/* ==========================================================================
   CostGuard – Public Contact
   ──────────────────────────────────────────────────────────────────────────
   Rules only the public contact page uses. The vocabulary it is built from —
   aliases, rhythm, type, the centred hero, the band, the ledger, the split
   row, the chips, the quiet columns and the closing panel — lives in
   /css/costguard-public.css, which loads first.

   No colour literals below: every value resolves through --cg-*.

   The page alternates five shapes so no two neighbours look alike:
     hero      centred statement and the one primary action (.cg-pub-hero-center)
     address   full-bleed band, sticky editorial column, a ledger
     message   a split row under a hairline, what to include as chips
     answers   three quiet columns under a hairline, each with a link
     closing   centred statement, on ink in both themes (.cg-pub-promo-center)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — a question and an instruction, so a wider measure than a price
   headline, and the actions are the last thing in the section
   -------------------------------------------------------------------------- */

.cg-contact .cg-contact-hero .cg-pub-display-xl {
    max-width: 20ch;
}

.cg-contact .cg-contact-hero .cg-pub-actions {
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Address — the address itself is the largest thing in the column. It is
   the accent in its text role, and it may break anywhere on a narrow screen
   rather than push the page sideways.
   -------------------------------------------------------------------------- */

.cg-contact-address {
    display: grid;
    gap: 0.25rem;
    padding-top: var(--cg-pub-space-3);
    border-top: 1px solid var(--cg-border-strong);
}

.cg-contact-address-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cg-pub-muted);
}

html[lang="fa"] .cg-contact-address-label,
html[lang="ar"] .cg-contact-address-label,
html[lang="zh"] .cg-contact-address-label {
    letter-spacing: 0;
}

.cg-contact .cg-contact-address a {
    justify-self: start;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
    color: var(--cg-accent-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

.cg-contact .cg-contact-address a:hover {
    text-decoration-thickness: 2px;
}

.cg-contact .cg-contact-note {
    margin-top: var(--cg-pub-space-3);
    font-size: 0.9375rem;
}

.cg-contact .cg-contact-note a {
    color: var(--cg-accent-text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Message — the one risk on the page. Amber is reserved for risk, and a
   secret in an email is one.
   -------------------------------------------------------------------------- */

.cg-contact-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--cg-pub-space-1);
    margin: var(--cg-pub-space-4) 0 0;
    padding: var(--cg-pub-space-2) var(--cg-pub-space-3);
    border: 1px solid color-mix(in srgb, var(--cg-warning) 35%, transparent);
    border-radius: var(--cg-pub-radius);
    background: color-mix(in srgb, var(--cg-warning) 8%, transparent);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--cg-pub-ink);
}

.cg-contact-warning i {
    flex: 0 0 auto;
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--cg-warning);
}

/* --------------------------------------------------------------------------
   Answers — the heading sits above the columns, and each column ends in
   its link
   -------------------------------------------------------------------------- */

.cg-contact-head {
    margin-bottom: 3rem;
}

.cg-contact .cg-contact-head .cg-pub-display-lg {
    max-width: 22ch;
}

.cg-contact .cg-pub-feature .cg-link-arrow {
    margin-top: var(--cg-pub-space-2);
}