/* ==========================================================================
   Olive Skin & Aesthetics — Design Tokens (CSS Custom Properties)
   ==========================================================================
   Single source of truth for ALL brand colours, typography, and spacing.

   HOW TO USE:
     colour   →  var(--olive-color-text)
     font     →  var(--olive-font-family)
     spacing  →  var(--olive-space-md)

   These custom properties are the ONLY place hex codes and font strings
   may appear. Every other CSS file must reference these variables.
   ========================================================================== */

/* Google Fonts: Cormorant Garamond */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap');

:root {

  /* ── ① BACKGROUND COLOURS ──────────────────────────────────────────────── */

  --olive-bg-base:        #FAFAF8;   /* off-white  — page & card backgrounds   */
  --olive-bg-soft:        #E4EFE3;   /* soft sage  — topbar, footer, sections  */
  --olive-bg-white:       #FFFFFF;   /* pure white — nav dropdowns, form inputs */
  /* legacy near-white variants mapped to --olive-bg-base: #F4F9F4, #FCF9F4 */


  /* ── ② TEXT & ICON COLOURS ─────────────────────────────────────────────── */

  --olive-color-text:     #333534;   /* primary — headings, body, nav, icons   */
  --olive-color-text-muted: #414443; /* slightly lighter — credential list copy */
  --olive-color-text-helper: #8A8A72; /* placeholder / helper instruction text  */
  --olive-color-text-dark:  #333026; /* near-black — lightbox captions & controls */
  --olive-color-icon:     #333534;   /* SVG stroke/fill — always matches text  */
  --olive-color-white:    #FFFFFF;   /* pure white text (hero, btn labels)     */
  --olive-color-black:    #000000;   /* pure black — video backgrounds         */


  /* ── ③ BRAND ACCENT COLOURS ────────────────────────────────────────────── */

  --olive-color-muted:    #9DB89A;   /* muted olive — tabs, inactive labels    */
  --olive-color-muted-alt: #A3AC79;  /* warm olive variant — footer accent     */
  --olive-color-light:    #C2D6BF;   /* light sage  — borders, dividers        */


  /* ── ④ BUTTON COLOURS ──────────────────────────────────────────────────── */

  --olive-btn-bg:         #7C9E79;   /* sage green — primary button fill       */
  --olive-btn-bg-hover:   #6E9068;   /* darker sage — hover / active state     */
  --olive-btn-bg-deep:    #5C7659;   /* deep forest green — FCB / accent use   */
  --olive-color-forest:   #2C4436;   /* dark forest — credentials border accent */
  --olive-btn-text:       #FFFFFF;   /* white label on filled buttons          */
  --olive-btn-text-outline: #5F7A5D; /* dark sage — outline button text        */


  /* ── ⑤ BORDER COLOURS ──────────────────────────────────────────────────── */

  --olive-border-dropdown:  #D0E4CE; /* nav dropdown border                    */
  --olive-border-mega:      #C8DFC5; /* mega-menu category heading underline   */
  --olive-border-soft:      #E4EFE3; /* soft sage — research card, tabs border */
  --olive-border-form:      #E4EFE3; /* Fluent Forms input border              */
  --olive-border-card:      #E7E4D6; /* card / accordion / detail block border */
  --olive-border-focus:     #9DB89A; /* form focus ring border colour          */


  /* ── ⑥ OVERLAY & BACKDROP COLOURS ─────────────────────────────────────── */

  /* Modal / lightbox backdrops */
  --olive-overlay-modal:    rgba(0, 0, 0, 0.60);       /* contact form overlay      */
  --olive-overlay-video:    rgba(51, 48, 38, 0.90);    /* video modal backdrop      */
  --olive-overlay-lightbox: rgba(0, 0, 0, 0.95);       /* image lightbox backdrop   */

  /* Hero image dim layer */
  --olive-overlay-hero:     rgba(51, 48, 38, 0.55);    /* hero video dimmer         */

  /* Meaning badge (frosted glass on hero) */
  --olive-overlay-badge:    rgba(163, 172, 121, 0.15); /* badge frosted bg          */

  /* B/A card gradient overlay */
  --olive-overlay-ba:       rgba(92, 118, 89, 0.75);   /* before/after card tint    */

  /* White overlays (glass buttons, carousel dots, lightbox controls) */
  --olive-overlay-white-low:    rgba(255, 255, 255, 0.20);  /* hero play btn bg      */
  --olive-overlay-white-border: rgba(255, 255, 255, 0.70);  /* hero play btn border  */
  --olive-overlay-white-dot:    rgba(255, 255, 255, 0.60);  /* carousel dot inactive */
  --olive-overlay-white-play:   rgba(255, 255, 255, 0.85);  /* video play circle     */
  --olive-overlay-white-nav:    rgba(255, 255, 255, 0.90);  /* lightbox prev/next bg */
  --olive-overlay-white-ctrl:   rgba(255, 255, 255, 0.95);  /* lightbox close bg     */
  --olive-overlay-white-badge:  rgba(255, 255, 255, 0.50);  /* badge divider line    */
  --olive-overlay-white-text:   rgba(255, 255, 255, 0.95);  /* badge body text       */

  /* Carousel dot inactive (sage tint) */
  --olive-overlay-dot-sage:     rgba(92, 118, 89, 0.25);    /* static dot bg         */


  /* ── ⑦ SHADOW & ELEVATION ──────────────────────────────────────────────── */

  --olive-shadow:         0 10px 30px rgba(92, 118, 89, 0.10);  /* standard card      */
  --olive-shadow-lg:      0 18px 45px rgba(92, 118, 89, 0.16);  /* hovered card       */
  --olive-shadow-header:  0 2px 0 rgba(194, 214, 191, 0.30);    /* sticky header line */
  --olive-shadow-subtle:  0 2px 8px rgba(0, 0, 0, 0.05);        /* header subtle      */
  --olive-shadow-btn:     0 4px 12px rgba(0, 0, 0, 0.20);       /* scroll-top button  */
  --olive-shadow-dark:    0 4px 20px rgba(0, 0, 0, 0.30);       /* badge shadow       */
  --olive-shadow-img:     0 8px 24px rgba(51, 48, 38, 0.12);    /* surgeon/map images */
  --olive-shadow-img-sm:  0 8px 24px rgba(51, 48, 38, 0.14);    /* category card img  */
  --olive-shadow-card-sm: 0 4px 12px rgba(51, 48, 38, 0.25);    /* category card btn  */
  --olive-shadow-lift:    0 16px 40px rgba(51, 48, 38, 0.18);   /* surgeon card hover */

  /* Credentials panel shadows */
  --olive-shadow-cred:    0 12px 40px rgba(44, 68, 54, 0.08);   /* panel outer        */
  --olive-shadow-cred-sm: 0 4px 16px rgba(44, 68, 54, 0.06);    /* card resting       */
  --olive-shadow-cred-lg: 0 14px 34px rgba(44, 68, 54, 0.13);   /* card hover         */

  /* Lightbox image shadow */
  --olive-shadow-lightbox: 0 10px 50px rgba(0, 0, 0, 0.50);

  /* Focus ring */
  --olive-focus-ring:     0 0 0 2px rgba(157, 184, 154, 0.20);  /* form input focus   */


  /* ── ⑧ TYPOGRAPHY ──────────────────────────────────────────────────────── */

  /*
   * ONE font family for everything — headings, body, nav, reviews, forms.
   * Maps to theme.json slug "heading": "Cormorant Garamond", Georgia, serif.
   * Font WEIGHT and SIZE vary per context; the family never changes.
   */
  --olive-font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;   /* single font — used everywhere */

  /* Font weights */
  --olive-font-weight-light:    300;   /* delicate decorative text              */
  --olive-font-weight-regular:  400;   /* body copy, paragraphs, nav labels     */
  --olive-font-weight-medium:   500;   /* sub-labels, button text, captions     */
  --olive-font-weight-semibold: 600;   /* card headings, FAQ summaries          */
  --olive-font-weight-bold:     700;   /* page headings h1–h2, stats numbers    */

  /* Font style */
  --olive-font-style-normal:    normal;

  /* Letter spacing */
  --olive-tracking-tight:   0.5px;     /* default body copy                     */
  --olive-tracking-normal:  1px;       /* section headings, nav underlines      */
  --olive-tracking-wide:    2px;       /* eyebrow / label text                  */
  --olive-tracking-widest:  3px;       /* hero display / meaning badge          */
  --olive-tracking-label:   1.5px;     /* procedure sticky nav labels           */

  /* Line height */
  --olive-leading-tight:    1.1;       /* display headings                      */
  --olive-leading-snug:     1.2;       /* large headings                        */
  --olive-leading-normal:   1.4;       /* compact paragraphs                    */
  --olive-leading-relaxed:  1.6;       /* quote / philosophy blocks             */
  --olive-leading-body:     1.7;       /* standard body copy                    */
  --olive-leading-loose:    1.8;       /* spacious body / subheadings           */
  --olive-leading-looser:   1.85;      /* wide-spaced content areas             */
  --olive-leading-open:     2;         /* very open / airy layouts              */
  --olive-leading-wide:     2.2;       /* footer / wide-spaced lists            */
  --olive-leading-hero:     1.65;      /* hero tagline                          */


  /* ── ⑨ SPACING (mirrors theme.json spacingSizes) ───────────────────────── */

  --olive-space-xs:   0.75rem;   /* spacing-20 — icon gaps, tight padding      */
  --olive-space-sm:   1.25rem;   /* spacing-30 — card inner padding            */
  --olive-space-md:   2rem;      /* spacing-40 — standard section gaps         */
  --olive-space-lg:   3.5rem;    /* spacing-50 — generous section padding      */
  --olive-space-xl:   5rem;      /* spacing-60 — hero / page-level padding     */


  /* ── ⑩ MOTION / EASING ─────────────────────────────────────────────────── */

  --olive-ease: 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================================
   Global font-family application
   Apply the single brand typeface to every element. WP / browser defaults
   fall back to system-sans; this override makes everything consistent.
   ========================================================================== */

html,
body {
  font-family: var(--olive-font-family) !important;
}

/* Exclude icon fonts from override */
[class*="fcb-icon"],
[class*="icon-fcb"],
.fcb-icon,
.fcb-close-img,
[class^="icon-"] {
  font-family: inherit !important;
}

p,
li,
td,
th,
figcaption,
blockquote,
label,
input,
textarea,
select,
button,
.wp-block-paragraph,
.wp-block-list li,
.wp-block-quote,
.wp-block-pullquote {
  font-family: var(--olive-font-family);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title {
  font-family: var(--olive-font-family);
}

.wp-block-navigation,
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__label,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-family: var(--olive-font-family);
}

.wp-block-button__link,
.wp-element-button,
.olive-card-btn,
a.olive-card-btn {
  font-family: var(--olive-font-family);
}

.testimonial-card__text,
.testimonial-card__author,
.testimonial-card__meta,
.olive-carousel-slide p {
  font-family: var(--olive-font-family);
}

.fluentform,
.fluentform input,
.fluentform textarea,
.fluentform select,
.fluentform label,
.fluentform .ff-btn-submit {
  font-family: var(--olive-font-family) !important;
}

.olive-topbar,
.olive-footer {
  font-family: var(--olive-font-family);
}

.procedure-nav__link,
.treatment-tabs__btn,
.olive-tabs-nav button,
.olive-tabs-nav label,
.olive-surgeon-filter button,
.olive-trust-badge__label,
.olive-meaning-title,
.olive-meaning-text {
  font-family: var(--olive-font-family);
}


/* ==========================================================================
   Icon colour token application
   ========================================================================== */

.olive-topbar .wp-block-social-link svg,
.olive-footer .wp-block-social-link svg {
  fill:  var(--olive-color-icon) !important;
  color: var(--olive-color-icon) !important;
}

.olive-trust-badge__icon svg,
.values-card__icon svg {
  stroke: var(--olive-color-icon);
  fill:   var(--olive-color-icon);
}

.wp-block-group svg[stroke="#333534"],
.wp-block-html svg[stroke="#333534"],
div svg[stroke="#333534"] {
  stroke: var(--olive-color-icon) !important;
}