/*
 * Odent Brand Layer — sits on top of the Salute parent theme.
 * Loaded after the parent so cascade wins for every overridden token.
 *
 * Editing rule of thumb:
 *   - Brand tokens (colors, font families) → :root variables below.
 *   - Component overrides (buttons, cards, links, headings) → tokens flow through.
 *   - Section-specific tweaks → keep them at the bottom + comment why.
 */

/* ---------------------------------------------------------------------------
 *  1. BRAND TOKENS
 * ------------------------------------------------------------------------- */
:root {
    /* Brand palette (mirrors the Odent landing page) */
    --odent-cyan-trust:    #7DD3D8;
    --odent-lime-energy:   #B8D957;
    --odent-charcoal:      #3D4548;
    --odent-charcoal-900:  #2A3033;
    --odent-deep-teal:     #1F5F66;
    --odent-teal-600:      #194E54;
    --odent-soft-sand:     #F5F1EA;
    --odent-cloud-gray:    #E8EDEF;
    --odent-coral:         #FF8A7D;
    --odent-forest:        #2A5D4E;
    --odent-text-secondary:#6B7378;
    --odent-success-green: #22C55E;
    --odent-whatsapp-green:#25D366;
    --odent-amber-star:    #F2A93B;

    /* Type scale (fluid via clamp — works without JS) */
    --odent-h1: clamp(2.5rem, 6vw, 4.5rem);
    --odent-h2: clamp(2rem, 4vw, 3rem);
    --odent-h3: clamp(1.5rem, 3vw, 2rem);
    --odent-h4: clamp(1.25rem, 2vw, 1.5rem);
    --odent-lead: clamp(1.0625rem, 1.5vw, 1.25rem);

    /* Override Elementor's accent variables so any widget that reads them
       gets Odent colors automatically (header CTA, default buttons, etc). */
    --vamtam-accent-color-1: var(--odent-deep-teal);
    --vamtam-accent-color-2: var(--odent-lime-energy);
    --vamtam-accent-color-3: var(--odent-forest);
    --vamtam-accent-color-4: var(--odent-cloud-gray);
    --vamtam-accent-color-5: #FFFFFF;
    --vamtam-accent-color-6: var(--odent-charcoal);
    --vamtam-accent-color-7: var(--odent-soft-sand);
    --vamtam-accent-color-8: #F0FAFB;

    --e-global-color-vamtam_accent_1: var(--odent-deep-teal);
    --e-global-color-vamtam_accent_2: var(--odent-lime-energy);
    --e-global-color-vamtam_accent_3: var(--odent-forest);
    --e-global-color-vamtam_accent_4: var(--odent-cloud-gray);
    --e-global-color-vamtam_accent_5: #FFFFFF;
    --e-global-color-vamtam_accent_6: var(--odent-charcoal);
    --e-global-color-vamtam_accent_7: var(--odent-soft-sand);
    --e-global-color-vamtam_accent_8: #F0FAFB;
    --e-global-color-vamtam_primary_font_color: var(--odent-charcoal);
    --e-global-color-vamtam_h1_color: var(--odent-charcoal-900);
    --e-global-color-vamtam_h2_color: var(--odent-charcoal-900);
    --e-global-color-vamtam_h3_color: var(--odent-charcoal-900);
    --e-global-color-vamtam_h4_color: var(--odent-charcoal-900);
    --e-global-color-vamtam_h5_color: var(--odent-deep-teal);
    --e-global-color-vamtam_h6_color: var(--odent-forest);
}

/* ---------------------------------------------------------------------------
 *  2. GLOBAL TYPOGRAPHY
 * ------------------------------------------------------------------------- */
body,
body button,
body input,
body select,
body textarea {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--odent-charcoal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.font-h1, .font-h2, .font-h3, .font-h4, .font-h5, .font-h6,
.elementor-heading-title {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-weight: 500;
    color: var(--odent-charcoal-900);
    letter-spacing: -0.01em;
    text-wrap: balance;
}
h1, .font-h1 { font-size: var(--odent-h1); line-height: 1.05; font-variation-settings: "opsz" 144; }
h2, .font-h2 { font-size: var(--odent-h2); line-height: 1.1;  font-variation-settings: "opsz" 96;  }
h3, .font-h3 { font-size: var(--odent-h3); line-height: 1.2;  }
h4, .font-h4 { font-size: var(--odent-h4); line-height: 1.3;  }

/* Italic Fraunces feels like the "premium" voice — the landing uses it for
   highlights inside H1/H2. Mirror that here for any em.italic-emphasis. */
em.italic-emphasis,
.italic-emphasis {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100;
    color: var(--odent-deep-teal);
}

/* ---------------------------------------------------------------------------
 *  3. LINKS + BUTTONS
 * ------------------------------------------------------------------------- */
body a {
    color: var(--odent-deep-teal);
    transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
body a:hover { color: var(--odent-teal-600); }

body .elementor-button,
body button,
html .button,
html input[type=submit],
.wp-block-button__link {
    background-color: var(--odent-deep-teal);
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    border: 0;
    border-radius: 9999px; /* pill, matching the landing's CTA shape */
    padding: 14px 28px;
    transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 0 4px 14px -2px rgb(31 95 102 / 0.35);
}
body .elementor-button:hover,
body button:hover,
.wp-block-button__link:hover {
    background-color: var(--odent-teal-600);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -4px rgb(31 95 102 / 0.45);
}

/* Secondary CTA variant — add class "is-secondary" or use Elementor's
   "Style: secondary" option which we map to lime for dental warmth. */
body .elementor-button.is-secondary,
body .elementor-button.elementor-button-secondary {
    background-color: var(--odent-lime-energy);
    color: var(--odent-charcoal-900);
    box-shadow: 0 6px 20px -6px rgb(184 217 87 / 0.55);
}
body .elementor-button.is-secondary:hover,
body .elementor-button.elementor-button-secondary:hover {
    background-color: #9BBF3D;
    color: var(--odent-charcoal-900);
}

/* ---------------------------------------------------------------------------
 *  4. CONTAINERS / SECTION RHYTHM
 * ------------------------------------------------------------------------- */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con {
    --container-max-width: 1280px;
    max-width: 1280px;
}

/* Subtle warmth on sand-colored sections */
.has-bg-sand,
.elementor-section.elementor-section-stretched.bg-sand {
    background: linear-gradient(180deg, #FBFAF6 0%, var(--odent-soft-sand) 100%);
}

/* ---------------------------------------------------------------------------
 *  5. HEADER — top utility bar (rendered by functions.php wp_body_open)
 * ------------------------------------------------------------------------- */
.odent-topbar-wrapper {
    background: var(--odent-charcoal-900);
    color: #fff;
    font-size: 0.875rem;
    padding: 8px 0;
}
.odent-topbar {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: flex-end;
    align-items: center;
}
.odent-topbar a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 180ms;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.odent-topbar a:hover {
    color: var(--odent-lime-energy);
}
@media (max-width: 640px) {
    .odent-topbar { gap: 0.75rem; font-size: 0.8125rem; justify-content: center; }
    .odent-email { display: none; } /* keep mobile bar tight */
}

/* ---------------------------------------------------------------------------
 *  6. WHATSAPP FLOATING BUTTON
 * ------------------------------------------------------------------------- */
.odent-fab-whatsapp {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--odent-whatsapp-green);
    color: #fff;
    box-shadow: 0 8px 24px -4px rgb(37 211 102 / 0.45);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.odent-fab-whatsapp:hover {
    transform: scale(1.08);
    color: #fff;
    box-shadow: 0 12px 28px -4px rgb(37 211 102 / 0.55);
}

/* ---------------------------------------------------------------------------
 *  7. CARDS / BOXES — softer than parent's hard 0px corners
 * ------------------------------------------------------------------------- */
.elementor-widget-vamtam-icon-box .elementor-widget-container,
.elementor-widget-image-box .elementor-image-box-content,
.vamtam-card,
.elementor-widget-vamtam-team .vamtam-team-member,
.elementor-widget-vamtam-services .vamtam-services-item {
    border-radius: 16px !important;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
 *  8. FORMS — inputs feel less sharp + brand-tinted focus
 * ------------------------------------------------------------------------- */
body input:not([type="button"]):not([type="submit"]),
body textarea,
body select,
body .elementor-field-textual {
    border-radius: 12px;
    border-color: var(--odent-cloud-gray);
    transition: border-color 200ms, box-shadow 200ms;
}
body input:focus:not([type="button"]):not([type="submit"]),
body textarea:focus,
body select:focus,
body .elementor-field-textual:focus {
    border-color: var(--odent-deep-teal);
    box-shadow: 0 0 0 4px rgb(125 211 216 / 0.18);
    outline: none;
}

/* ---------------------------------------------------------------------------
 *  9. ACCESSIBILITY — visible focus rings on all interactive elements
 * ------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--odent-lime-energy) !important;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------------------
 * 10. PRINT — hide noisy floating elements
 * ------------------------------------------------------------------------- */
@media print {
    .no-print,
    .odent-topbar-wrapper,
    .odent-fab-whatsapp { display: none !important; }
}

/* ---------------------------------------------------------------------------
 * 11. DENTAL-TOURISM MICRO-DETAILS
 *     (small touches that match the landing aesthetic)
 * ------------------------------------------------------------------------- */
/* "Savings" chips — used on pricing comparisons */
.odent-savings-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 4px 12px;
    border-radius: 9999px;
    background: var(--odent-lime-energy);
    color: var(--odent-charcoal-900);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

/* Trust strip stars */
.odent-stars { color: var(--odent-amber-star); letter-spacing: 0.08em; }