/**
 * Theme Name: Hello RISE
 * Template: hello-elementor
 * Description: A starter theme for RISE Results projects
 * Author: Gayle Bird for RISE Results
 * Author URI: https://www.riseresults.com
 * Text Domain: hello-rise
 * Version: 2.2
 * Tested up to: 6.7.1
 * License: GNU General Public License v2.0 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 */

/* =========================================================
   RISE Semantic Stack
   LEGIT Western Wear Edition

   Created by Gayle Bird for RISE Results.

   CSS = fallback tokens, semantic HTML defaults,
         accessibility, forms, WooCommerce cleanup,
         and Elementor safety bridges.

   Atomic Variables = the main design values.
   Atomic Classes = layout, tone, rhythm, type, buttons,
                    cards, details, recipes.

   Local Styles = exceptions only.
   ========================================================= */


/* =========================================================
   01. Fallback Tokens
   Mirror Elementor Atomic variables.
   Atomic variables are the primary source of truth.
   ========================================================= */

:root {
    /* ---------- Colour system ---------- */
    --c-primary: #107E81;
    --c-secondary: #5D412F;
    --c-accent: #8D471C;

    --c-light: #E7E3DD;
    --c-dark: #3C281D;
    --c-surface: #FDFAF5;

    --c-focus: #8EDCE6;
    --c-text: #2D0F10;
    --c-bright: #F1BF98;
    --c-deep: #4C191B;

    --c-white: #FFFFFF;
    --c-text-inverse: #FFFFFF;
    --c-text-soft: color-mix(in srgb, var(--c-text), transparent 24%);

    --c-border: color-mix(in srgb, var(--c-text), transparent 84%);
    --c-overlay: color-mix(in srgb, var(--c-deep), transparent 34%);

    /* ---------- Typeface system ---------- */
    --f-primary: 'Arbutus', Georgia, serif;
    --f-text: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --f-accent: 'Abolition', 'Nunito Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ---------- Major Third type scale, ratio 1.25 ---------- */
    --t-xs: 0.64rem;
    --t-sm: 0.8rem;
    --t-base: 1rem;
    --t-md: 1.25rem;
    --t-lg: 1.563rem;
    --t-xl: 1.953rem;
    --t-2xl: 2.441rem;
    --t-hero: 3.815rem;
    --t-display: 3.815rem;
    --t-billboard: 4.768rem;
    --t-monument: 5.96rem;

    /* ---------- Line heights ---------- */
    --lh-tight: 1.08;
    --lh-heading: 1.18;
    --lh-body: 1.65;
    --lh-loose: 1.8;

    /* ---------- Spacing rhythm ---------- */
    --sp-tiny: 0.5rem;
    --sp-xs: 0.85rem;
    --sp-sm: 1.25rem;
    --sp-md: 2rem;
    --sp-lg: 4rem;
    --sp-xl: 7rem;

    /* ---------- Widths ---------- */
    --w-reading: 40rem;
    --w-narrow: 52rem;
    --w-site: 70rem;
    --w-wide: 88rem;

    /* ---------- Radius ---------- */
    --r-sm: 0.35rem;
    --r-md: 0.75rem;
    --r-lg: 1.25rem;
    --r-pill: 999px;

    /* ---------- Effects ---------- */
    --shadow-soft: 0 0.5rem 1.5rem rgba(45, 15, 16, 0.10);
    --shadow-card: 0 0.5rem 1.25rem rgba(45, 15, 16, 0.10);
    --shadow-lift: 0 1rem 2.5rem rgba(45, 15, 16, 0.16);
    --shadow-luxe: 0 1.25rem 3rem rgba(45, 15, 16, 0.14);

    --transition-fast: 180ms ease;

    /* ---------- Legacy aliases for old snippets/plugins ---------- */
    --color-primary: var(--c-primary);
    --color-secondary: var(--c-secondary);
    --color-accent: var(--c-accent);
    --color-light: var(--c-light);
    --color-dark: var(--c-dark);
    --color-surface: var(--c-surface);
    --color-focus: var(--c-focus);
    --color-text: var(--c-text);
    --color-bright: var(--c-bright);
    --color-deep: var(--c-deep);

    --type-xs: var(--t-xs);
    --type-sm: var(--t-sm);
    --type-base: var(--t-base);
    --type-md: var(--t-md);
    --type-lg: var(--t-lg);
    --type-xl: var(--t-xl);
    --type-hero: var(--t-hero);

    --leading-tight: var(--lh-tight);
    --leading-heading: var(--lh-heading);
    --leading-body: var(--lh-body);
    --leading-loose: var(--lh-loose);

    --space-xs: var(--sp-xs);
    --space-sm: var(--sp-sm);
    --space-md: var(--sp-md);
    --space-lg: var(--sp-lg);
    --space-xl: var(--sp-xl);

    --width-reading: var(--w-reading);
    --width-narrow: var(--w-narrow);
    --width-standard: var(--w-site);
    --width-wide: var(--w-wide);

    --radius-sm: var(--r-sm);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-lg);

    /* ---------- Elementor global colour bridge ---------- */
    --e-global-color-primary: var(--c-primary);
    --e-global-color-primary-subtle: var(--c-focus);
    --e-global-color-secondary: var(--c-secondary);
    --e-global-color-secondary-subtle: var(--c-light);
    --e-global-color-text: var(--c-text);
    --e-global-color-neutral-dark: var(--c-dark);
    --e-global-color-neutral-light: var(--c-light);
    --e-global-color-focus: var(--c-focus);
    --e-global-color-hover: var(--c-secondary);
    --e-global-color-overlay: var(--c-overlay);
}


/* =========================================================
   02. Base
   ========================================================= */

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--f-text);
    font-size: var(--t-base);
    line-height: var(--lh-body);
    color: var(--c-text);
    background: var(--c-light);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

img {
    display: block;
}

figure {
    margin: 0;
}

address {
    font-style: normal;
}

::selection {
    background: var(--c-focus);
    color: var(--c-text);
}

:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 3px;
}


/* =========================================================
   03. Links
   ========================================================= */

a {
    color: var(--c-primary);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--c-deep);
}


/* =========================================================
   04. Semantic Typography
   Atomic ty-* classes handle designed type.
   These are safe HTML defaults only.

   LEGIT rhythm:
   h1 = primary brand face
   h2-h6 = accent/support face
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-block: 0 0.45em;
    color: inherit;
    text-wrap: balance;
}

h1 {
    font-family: var(--f-primary);
    font-size: var(--t-2xl);
    line-height: var(--lh-heading);
    font-weight: 400;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: var(--f-accent);
    line-height: var(--lh-heading);
    font-weight: 700;
}

h2 {
    font-size: var(--t-xl);
}

h3 {
    font-size: var(--t-lg);
}

h4 {
    font-size: var(--t-md);
}

h5 {
    font-size: var(--t-base);
}

h6 {
    font-size: var(--t-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

p,
ul,
ol {
    margin-block: 0 1em;
}

p:last-child,
ul:last-child,
ol:last-child {
    margin-bottom: 0;
}

ul,
ol {
    padding-left: 1.2em;
}

li + li {
    margin-top: 0.35rem;
}

strong,
b {
    font-weight: 700;
}

small,
caption,
figcaption {
    font-size: var(--t-sm);
    line-height: 1.45;
    color: var(--c-text-soft);
}


/* =========================================================
   05. Elementor / Atomic Neutral Helpers
   Deliberately tiny.
   Atomic owns l-*, w-*, rh-*, tone-*, ty-*, d-*.
   ========================================================= */

.elementor-widget-heading .elementor-heading-title,
.e-heading-base,
.e-paragraph-base {
    color: inherit;
}

.site-main,
.elementor {
    overflow-x: clip;
}

.d-glitter-corner {
  position: relative;
  overflow: hidden;
}

.d-glitter-corner::after {
  content: "✦";
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--c-bright);
  font-family: var(--f-accent);
  font-size: 2rem;
  line-height: 1;
  opacity: 0.9;
  pointer-events: none;
}

 

/* =========================================================
   05b. Site Logo Safety
   Keeps the site logo isolated from reusable SVG icon rules.
   ========================================================= */

.site-logo svg,
.site-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}

.logo-area {
    line-height: 0;
}


/* =========================================================
   06. Forms
   ========================================================= */

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: 0.75rem 0.85rem;
    font-family: var(--f-text);
    font-size: var(--t-base);
    line-height: var(--lh-body);
    color: var(--c-text);
    background: var(--c-surface);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--c-focus);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus), transparent 76%);
}

textarea {
    min-height: 150px;
    resize: vertical;
}

label {
    font-family: var(--f-accent);
    font-size: var(--t-sm);
    font-weight: 700;
}


/* =========================================================
   07. Base / WooCommerce / Button Safety

   Blue-button fix:
   Elementor Button widgets contain an inner .elementor-button.
   A class on the widget wrapper does not always reach that
   inner button. This bridge keeps button size and colour sane.

   Atomic still owns the system. This only prevents Elementor
   defaults from leaking through.
   ========================================================= */


/* ---------- Default Atomic button bridge ---------- */

:where(
    .elementor-widget-button.button,
    .elementor-widget-button.btn
) {
    width: fit-content;
    max-width: 100%;
    justify-self: start;
    align-self: flex-start;
}

/* Default button appearance when no tone class is present. */
:where(
    .elementor-widget-button.button .elementor-button,
    .elementor-widget-button.btn .elementor-button,
    .elementor-button.button,
    .elementor-button.btn
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    width: fit-content;
    max-width: 100%;
    min-height: 46px;

    padding: var(--sp-xs) var(--sp-sm);
    border: 2px solid transparent;
    border-radius: var(--r-sm);

    background: var(--c-primary);
    color: var(--c-text-inverse);

    font-family: var(--f-accent);
    font-size: var(--t-sm);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;

    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

:where(
    .elementor-widget-button.button .elementor-button,
    .elementor-widget-button.btn .elementor-button,
    .elementor-button.button,
    .elementor-button.btn
):hover {
    transform: translateY(-1px);
}


/* ---------- Tone bridge for Elementor Button widgets ---------- */

.elementor-widget-button.button.tone-primary .elementor-button,
.elementor-button.button.tone-primary {
    background: var(--c-primary);
    color: var(--c-text-inverse);
}

.elementor-widget-button.button.tone-secondary .elementor-button,
.elementor-button.button.tone-secondary {
    background: var(--c-secondary);
    color: var(--c-text-inverse);
}

.elementor-widget-button.button.tone-accent .elementor-button,
.elementor-button.button.tone-accent {
    background: var(--c-accent);
    color: var(--c-text-inverse);
}

.elementor-widget-button.button.tone-light .elementor-button,
.elementor-button.button.tone-light {
    background: var(--c-light);
    color: var(--c-text);
}

.elementor-widget-button.button.tone-dark .elementor-button,
.elementor-button.button.tone-dark {
    background: var(--c-dark);
    color: var(--c-text-inverse);
}

.elementor-widget-button.button.tone-surface .elementor-button,
.elementor-button.button.tone-surface {
    background: var(--c-surface);
    color: var(--c-text);
}

.elementor-widget-button.button.tone-focus .elementor-button,
.elementor-button.button.tone-focus {
    background: var(--c-focus);
    color: var(--c-text);
}

.elementor-widget-button.button.tone-bright .elementor-button,
.elementor-button.button.tone-bright {
    background: var(--c-bright);
    color: var(--c-text);
}

.elementor-widget-button.button.tone-deep .elementor-button,
.elementor-button.button.tone-deep {
    background: var(--c-deep);
    color: var(--c-text-inverse);
}


/* ---------- Ghost / outline button bridge ---------- */

.elementor-widget-button.button-ghost .elementor-button,
.elementor-button.button-ghost,
.elementor-widget-button.button-outline .elementor-button,
.elementor-button.button-outline {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}


/* ---------- WordPress / WooCommerce fallback buttons ---------- */

:where(
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .wp-block-button__link
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    width: fit-content;
    max-width: 100%;
    min-height: 46px;

    padding: var(--sp-xs) var(--sp-sm);
    border: 2px solid transparent;
    border-radius: var(--r-sm);

    background: var(--c-primary);
    color: var(--c-text-inverse);

    font-family: var(--f-accent);
    font-size: var(--t-sm);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;

    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

:where(
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .wp-block-button__link
):hover {
    background: var(--c-secondary);
    color: var(--c-text-inverse);
    transform: translateY(-1px);
}


/* ---------- Standard form submit fallback ---------- */

form input[type="submit"],
form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    max-width: 100%;
    min-height: 46px;

    padding: var(--sp-xs) var(--sp-sm);
    border: 2px solid transparent;
    border-radius: var(--r-sm);

    background: var(--c-primary);
    color: var(--c-text-inverse);

    font-family: var(--f-accent);
    font-size: var(--t-sm);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;

    cursor: pointer;
}


/* =========================================================
   08. WooCommerce Light Touch
   Keep this light. Product/page layout can still be Atomic.
   ========================================================= */

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-md);
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none;
}

.woocommerce ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    padding: var(--sp-md);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
}

.woocommerce ul.products li.product a img {
    width: 100%;
    margin: 0 0 var(--sp-sm);
    border-radius: calc(var(--r-md) - 0.25rem);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 0;
    color: var(--c-text);
    font-family: var(--f-accent);
    font-size: var(--t-lg);
    line-height: var(--lh-heading);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--c-deep);
    font-weight: 700;
}

.woocommerce ul.products li.product .button {
    margin-top: var(--sp-sm);
}

/* ---------------------------------------------------------
   LEGIT PRODUCT TAG CHIPS
   --------------------------------------------------------- */

.legit-product-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
}

.legit-product-tag {
	display: inline-flex;
	align-items: center;
	width: auto;
	padding: 0.4rem 0.65rem;
	    font-family: var(--f-stamp);

	border: 1px solid #82d3d5;
	border-radius: 4px;
	background: #e6f7f5;

	color: #94461f;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.045em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;

	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease;
}

.legit-product-tag:hover,
.legit-product-tag:focus-visible {
	border-color: #138f94;
	background: #138f94;
	color: #fff;
	text-decoration: none;
}

.legit-product-tag:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* =========================================================
   09. Tables / Misc WordPress Content
   ========================================================= */

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: var(--sp-xs);
    border-bottom: 1px solid var(--c-border);
    text-align: left;
}

hr {
    border: 0;
    border-top: 1px solid var(--c-border);
    margin-block: var(--sp-md);
}


/* =========================================================
   10. Responsive
   ========================================================= */

@media (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }

    /*
       Do NOT force Atomic buttons full width.
       Atomic owns button width.

       WooCommerce and standard form submit buttons may go
       full width on mobile because those are utility flows.
    */
    :where(
        .woocommerce a.button,
        .woocommerce button.button,
        .woocommerce input.button,
        .woocommerce #respond input#submit
    ) {
        width: 100%;
    }

    form input[type="submit"],
    form button[type="submit"] {
        width: 100%;
    }
}


/* =========================================================
   11. Motion Safety
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   12. Editor Convenience
   Remove if it ever gets annoying.
   ========================================================= */

#elementor-panel-category-pro-elements {
    display: none !important;
}