/*
Theme Name:   GerCanada Child
Template:     zaaztheme
Description:  Child theme of zaaztheme for gercanada.com (immigration services).
Author:       Zaaz
Version:      0.3.0
Text Domain:  gercanada-child
*/

/* =============================================================================
   Typography — modern editorial scale on top of DM Sans (headings) + Inter (body).
   Variable-weight where supported; tight letter-spacing on display sizes;
   fluid sizes via clamp(); tabular-nums on numeric data.

   Font families themselves are wired via theme_mods + zaazbuilder_global_settings
   (DM Sans + Inter). This block only handles SIZES, WEIGHTS, and SPACING.
   ============================================================================= */
:root {
    --gc-fs-h1: clamp(2rem,    1.4rem + 2.8vw, 3.5rem);
    --gc-fs-h2: clamp(1.5rem,  1.2rem + 1.6vw, 2.25rem);
    --gc-fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
    --gc-fs-h4: 1.125rem;
    --gc-fs-body: 1.0625rem;       /* ~17px */
    --gc-fs-small: .875rem;
    --gc-lh-display: 1.1;
    --gc-lh-heading: 1.25;
    --gc-lh-body: 1.65;
    --gc-tracking-display: -0.025em;
    --gc-tracking-heading: -0.015em;
    --gc-tracking-eyebrow: 0.12em;
    --gc-color-fg:        #0f172a;  /* slate-900 — body text */
    --gc-color-mute:      #475569;  /* slate-600 — secondary text */
    --gc-color-line:      #e2e8f0;  /* slate-200 — borders */

    /* Brand palette (from /assets/svg/icon-brand.svg) */
    --gc-color-brand:     #1f3a5f;  /* deep navy — primary */
    --gc-color-brand-2:   #5a90c8;  /* sky blue — secondary */
    --gc-color-brand-bg:  #f5f8fc;  /* faint navy tint for section backgrounds */
    --gc-color-accent:    #1f3a5f;  /* body link color = brand navy */
}

/* =============================================================================
   Header logo sizing — keep the horizontal lockup readable, not gigantic.
   horizontal-brand-2x.png is 840×192 (~4.4:1 ratio).
   ============================================================================= */
.zt-site-logo img,
.custom-logo,
.wp-block-site-logo img {
    max-height: 56px;
    width: auto;
    height: auto;
}
@media (max-width: 640px) {
    .zt-site-logo img,
    .custom-logo,
    .wp-block-site-logo img {
        max-height: 44px;
    }
}

body,
.zb-page,
.zb-section,
.zt-page-rich {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-feature-settings: "cv02","cv03","cv04","cv11";  /* Inter character variants */
    font-size: var(--gc-fs-body);
    line-height: var(--gc-lh-body);
    color: var(--gc-color-fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Heading hierarchy */
h1, h2, h3, h4, h5, h6,
.zt-parallax-hero__title,
.gc-immt-card .gc-immt-value,
.gc-immt-kpis .gc-immt-num {
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--gc-color-fg);
    font-weight: 700;
    letter-spacing: var(--gc-tracking-heading);
    text-wrap: balance;
}
h1, .zt-parallax-hero__title {
    font-size: var(--gc-fs-h1);
    line-height: var(--gc-lh-display);
    letter-spacing: var(--gc-tracking-display);
    margin: 0 0 .75rem;
}
h2 {
    font-size: var(--gc-fs-h2);
    line-height: var(--gc-lh-heading);
    margin: 2.5rem 0 .75rem;
}
h3 {
    font-size: var(--gc-fs-h3);
    line-height: var(--gc-lh-heading);
    margin: 2rem 0 .5rem;
}
h4 {
    font-size: var(--gc-fs-h4);
    line-height: var(--gc-lh-heading);
    margin: 1.5rem 0 .5rem;
}

/* Hero overrides — the parallax block needs lighter-weight, larger title */
.zt-parallax-hero__title {
    font-weight: 700;
    color: #fff;
}
.zt-parallax-hero__lead {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
    line-height: 1.5;
    color: rgba(255,255,255,0.92);
    max-width: 60ch;
    margin: .5rem 0 0;
    text-wrap: pretty;
}
.zt-parallax-hero__eyebrow {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 600;
    font-size: .8125rem;
    letter-spacing: var(--gc-tracking-eyebrow);
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 1rem;
    display: inline-block;
}

/* Body content rhythm */
.zt-page-rich p,
.zt-page-rich li {
    max-width: 70ch;
    text-wrap: pretty;
}
.zt-page-rich p {
    margin: 0 0 1rem;
}
.zt-page-rich ul,
.zt-page-rich ol {
    margin: 0 0 1.5rem 1.25rem;
    padding: 0;
}
.zt-page-rich li {
    margin-bottom: .375rem;
    line-height: 1.55;
}
.zt-page-rich strong {
    font-weight: 600;
    color: var(--gc-color-fg);
}
.zt-page-rich em {
    color: var(--gc-color-mute);
}
.zt-page-rich a:not(.gc-btn-wa) {
    color: var(--gc-color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: text-decoration-thickness .12s ease;
}
.zt-page-rich a:not(.gc-btn-wa):hover {
    text-decoration-thickness: 2px;
}

/* Numeric data — tabular-nums everywhere it matters */
.gc-immt-table,
.gc-immt-kpis,
.gc-immt-pt-card .gc-immt-value,
.gc-immt-draw-card {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.gc-immt-pt-card .gc-immt-value {
    font-weight: 700;
    letter-spacing: -0.015em;
}
.gc-immt-card .gc-immt-where,
.gc-immt-table thead th {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: var(--gc-tracking-eyebrow);
}

/* =============================================================================
   Brand application — accent surfaces, hovers, focus rings, hero overlay tint
   ============================================================================= */

/* Service card hover & focus → brand navy ring (was indigo placeholder) */
.gc-services li:hover {
    border-color: var(--gc-color-brand-2);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(31, 58, 95, 0.10);
}
.gc-services a {
    color: var(--gc-color-brand);
}
.gc-services a:hover {
    color: var(--gc-color-brand);
}

/* Live data cards — give the value a brand tint instead of generic gray */
.gc-immt-pt-card .gc-immt-value {
    color: var(--gc-color-brand);
}
.gc-immt-kpis .gc-immt-num {
    color: var(--gc-color-brand);
}
.gc-immt-draw-card .gc-immt-draw-type {
    color: var(--gc-color-brand-2);
    font-weight: 600;
}

/* Table headers — brand-tinted background, navy text */
.gc-immt-table thead th {
    background: var(--gc-color-brand-bg);
    color: var(--gc-color-brand);
}

/* FAQ — opened state pivots to brand navy (was green) */
.gc-faq[open] summary {
    color: var(--gc-color-brand);
}

/* Hero overlay tint — subtle navy wash instead of pure black so brand reads through.
   The theme's built-in overlay uses rgba(15,23,42,0.55–0.82); we layer a navy
   gradient on top of the bg-image via ::after. */
.zt-parallax-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(31, 58, 95, 0.65) 0%,
        rgba(15, 23, 42, 0.55) 100%
    );
    z-index: 0;
    pointer-events: none;
}
.zt-parallax-hero {
    position: relative;
}
.zt-parallax-hero__inner {
    position: relative;
    z-index: 1;
}

/* Eyebrow accent line — small touch on hero eyebrow text */
.zt-parallax-hero__eyebrow {
    color: rgba(255, 255, 255, 0.85);
}

/* Focus ring (a11y) — brand sky-blue */
a:focus-visible,
button:focus-visible,
.gc-btn-wa:focus-visible {
    outline: 2px solid var(--gc-color-brand-2);
    outline-offset: 3px;
    border-radius: 4px;
}

/* =============================================================================
   WhatsApp CTA button — green pill with WA icon (CSS mask, currentColor fill)
   See feedback memory: zaaztheme's KSES filter strips inline SVG, so the icon
   is rendered via CSS mask-image instead.
   ============================================================================= */
.gc-btn-wa {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #25D366;
    color: #fff !important;
    padding: .75rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.gc-btn-wa:hover,
.gc-btn-wa:focus {
    background: #1ea952;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, .35);
    text-decoration: none;
}
.gc-btn-wa::before {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    -webkit-mask: var(--gc-wa-icon) no-repeat center / contain;
    mask:         var(--gc-wa-icon) no-repeat center / contain;
    flex-shrink: 0;
}
:root {
    --gc-wa-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.149-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0 0 20.465 3.488'/%3E%3C/svg%3E");
}

/* =============================================================================
   Service pages — shared layout polish
   ============================================================================= */
.gc-hero,
.gc-service-hero {
    margin: 0 0 2.5rem;
}
.gc-hero h1,
.gc-service-hero h1 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    margin-bottom: .75rem;
}
.gc-services {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.gc-services li {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    transition: border-color .15s ease, transform .15s ease;
}
.gc-services li:hover {
    border-color: #c7d2fe;
    transform: translateY(-1px);
}
.gc-services a {
    display: block;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: #111827;
    font-weight: 600;
}
.gc-live-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-bottom: 1rem;
}
.gc-live-grid .gc-immt-card {
    max-width: none;
}

/* FAQ details block */
.gc-faq summary {
    cursor: pointer;
    font-weight: 600;
    padding: .75rem 0;
    border-bottom: 1px solid #e5e7eb;
}
.gc-faq[open] summary {
    color: #1ea952;
}
.gc-faq p {
    padding: .75rem 0 1rem;
    color: #374151;
}

/* =============================================================================
   Campaign landing pages — components used by /asesoria-canada/ and similar
   ============================================================================= */

/* Compliance disclaimer banner — amber, prominent above-fold */
.gc-disclaimer {
    background: #fff7ed;
    border-left: 4px solid #f59e0b;
    padding: 1rem 1.25rem;
    border-radius: .5rem;
    margin: 0 0 2rem;
    font-size: .9375rem;
    line-height: 1.55;
    color: #78350f;
}
.gc-disclaimer strong { color: #78350f; }
.gc-disclaimer a {
    color: #92400e !important;
    text-decoration: underline;
}

/* Quick CTA strip — under hero, single line + button */
.gc-quick-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 0 0 2rem;
    padding: 1rem 1.25rem;
    background: var(--gc-color-brand-bg);
    border-radius: .75rem;
}
.gc-quick-cta p {
    margin: 0 !important;
    color: var(--gc-color-fg);
    flex: 1 1 auto;
    min-width: 0;
}

/* "Why" cards — 3-up risk / value grid */
.gc-why-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin: 1.5rem 0 2.5rem;
    list-style: none;
    padding: 0;
}
.gc-why-grid li {
    background: #fff;
    border: 1px solid var(--gc-color-line);
    border-top: 3px solid var(--gc-color-brand-2);
    border-radius: .75rem;
    padding: 1.25rem 1.25rem 1rem;
    margin: 0 !important;
}
.gc-why-grid h3 {
    margin: 0 0 .5rem !important;
    font-size: 1.0625rem;
    color: var(--gc-color-brand);
}
.gc-why-grid p {
    color: var(--gc-color-mute);
    font-size: .9375rem;
    margin: 0 !important;
    max-width: none !important;
}

/* Numbered 3-step process */
.gc-steps {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    counter-reset: gc-step;
    margin: 1.5rem 0 2.5rem;
    list-style: none;
    padding: 0;
}
.gc-steps li {
    background: var(--gc-color-brand-bg);
    border-radius: .75rem;
    padding: 1.5rem 1.25rem 1.25rem;
    counter-increment: gc-step;
    margin: 0 !important;
}
.gc-steps li::before {
    content: counter(gc-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: var(--gc-color-brand);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    margin-bottom: .75rem;
    font-family: "DM Sans", system-ui, sans-serif;
}
.gc-steps h3 {
    margin: 0 0 .375rem !important;
    font-size: 1rem;
    color: var(--gc-color-brand);
}
.gc-steps p {
    color: var(--gc-color-mute);
    font-size: .9375rem;
    margin: 0 !important;
    max-width: none !important;
}

/* Repeated CTA section block */
.gc-cta-block {
    background: var(--gc-color-brand-bg);
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
    margin: 2.5rem 0;
}
.gc-cta-block h2 {
    margin: 0 0 .5rem !important;
}
.gc-cta-block p {
    margin: 0 0 1.25rem !important;
    max-width: 50ch;
    margin-left: auto !important;
    margin-right: auto !important;
}
.gc-cta-block .gc-cta-meta {
    color: var(--gc-color-mute);
    font-size: .875rem;
    margin: 1rem 0 0 !important;
}

/* Checklist (filled checkmark icon via mask) */
.gc-checklist {
    list-style: none !important;
    padding: 0 !important;
    margin: 1rem 0 1.5rem !important;
    display: grid;
    gap: .5rem;
}
.gc-checklist li {
    padding-left: 1.75rem;
    position: relative;
    line-height: 1.55;
    margin: 0 !important;
}
.gc-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .35em;
    width: 1.125rem;
    height: 1.125rem;
    background-color: var(--gc-color-brand);
    -webkit-mask: var(--gc-check-icon) no-repeat center / contain;
    mask: var(--gc-check-icon) no-repeat center / contain;
}
:root {
    --gc-check-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

/* Landing-page chrome — hide the main site nav on /asesoria-canada/ and any
   other page flagged with _gc_landing_page meta. Body class is added by the
   child theme's body_class filter. We keep the footer (legal links) and the
   page hero, just drop the top nav so paid traffic stays focused on the CTA
   and doesn't browse off into the broader service catalog. */
body.gc-landing-page .zt-header,
body.gc-landing-page .zt-entry-header {
    display: none !important;
}
body.gc-landing-page .zt-parallax-hero {
    margin-top: 0;
}

/* Footer-style legal disclaimer at end of LP */
.gc-foot-disclaimer {
    background: #f8fafc;
    border-top: 1px solid var(--gc-color-line);
    padding: 1.5rem 1.25rem;
    border-radius: .5rem;
    margin: 2.5rem 0 0;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--gc-color-mute);
}
.gc-foot-disclaimer p {
    margin: 0 0 .5rem !important;
    max-width: none !important;
}
.gc-foot-disclaimer a {
    color: var(--gc-color-mute) !important;
    text-decoration: underline;
}