/* ==========================================================================
   Contact Page Styles — ColdStorage Canada
   Page-specific styles for /contact.html. Mobile-first; tablet at 768px,
   desktop at 1024px. All values reference design-system.css custom
   properties (no hardcoded colors or sizes — Rule 2).

   Note on tabs: the .tab-nav, .tab-btn, .tab-panel base styles already exist
   in listings.css (added during the listing detail tab section). The contact
   page reuses those classes. We only override layout-related rules here via
   the .contact-tab-nav modifier.
   ========================================================================== */


/* ==========================================================================
   Contact Hero
   The base .hero + .hero-compact + .section-dark classes from
   components.css and design-system.css handle the navy background and
   compact height. We override only the inner padding so the headline +
   subtitle sit balanced rather than top-heavy.
   ========================================================================== */
.contact-hero .hero-content {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.contact-hero .hero-subtitle {
    /* Cap subtitle width so it doesn't stretch to a thin one-line ribbon
       on wide desktops — improves readability. */
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--space-2);
    color: var(--color-neutral-300);
}


/* ==========================================================================
   Path Cards — three large clickable cards
   Each card is a full <a> element so the entire card is the click target,
   not just an inner button. The hover state lifts the card with a shadow
   and accent-coloured border to invite the click.
   ========================================================================== */
.path-card {
    display: block;
    background-color: var(--color-white);
    border: 2px solid var(--color-neutral-300);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    text-align: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: var(--transition-base);
    /* Subtle baseline shadow so cards have depth before any hover */
    box-shadow: var(--shadow-sm);
}

.path-card:hover,
.path-card:focus-visible {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    color: inherit;
    outline: none;
    text-decoration: none;
}

.path-card:focus-visible {
    /* Accessible focus ring sits above the standard hover state */
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

.path-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: var(--space-2);
    /* Use system emoji fonts so glyphs render consistently */
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.path-card h3 {
    margin-top: 0;
    margin-bottom: var(--space-1);
}

.path-card p {
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
    margin-bottom: var(--space-3);
    line-height: var(--leading-relaxed);
}

/* The "Tell us more →" indicator inside each card. The actual click target
   is the parent <a>, so this is just visual — pointer-events disabled
   so hover styles flow correctly to the card. */
.path-cta {
    pointer-events: none;
}


/* ==========================================================================
   Contact Tab Nav
   Centers the tab buttons horizontally and adds breathing room before the
   tab panels. The base .tab-nav layout (border-bottom, flex, scroll on
   mobile) lives in listings.css.
   ========================================================================== */
.contact-tab-nav {
    justify-content: center;
    margin-bottom: var(--space-6);
}

/* Placeholder text inside empty tab panels — looks de-emphasized so it's
   clear the form is "coming". JS prompt will replace this content. */
.tab-placeholder {
    color: var(--color-neutral-400);
    font-style: italic;
    text-align: center;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}


/* ==========================================================================
   Commitment Grid — two-column layout
   List on the left, team-preview sidebar on the right at desktop.
   Stacks single-column on mobile.
   ========================================================================== */
.commitment-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 768px) {
    .commitment-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .commitment-grid {
        /* At desktop, give more space to the commitment list since it has
           more content; sidebar caps at 360px so it stays readable. */
        grid-template-columns: 1fr 360px;
    }
}


/* ==========================================================================
   Commitment List — vertical stack of icon + text rows
   ========================================================================== */
.commitment-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    list-style: none;
    padding-left: 0;
    margin-top: var(--space-3);
}

.commitment-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.commitment-icon {
    font-size: var(--text-2xl);
    line-height: 1;
    flex-shrink: 0;
    /* Match the hero/badges emoji rendering across platforms */
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.commitment-text strong {
    display: block;
    color: var(--color-neutral-900);
    font-size: var(--text-base);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-1);
}

.commitment-text p {
    color: var(--color-neutral-600);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin: 0;
}


/* ==========================================================================
   Team Preview Sidebar
   The .sidebar-card class is reused from provinces.css for visual
   consistency. We re-declare a minimal version here so contact.html
   doesn't depend on provinces.css being loaded.
   ========================================================================== */
#team-preview .sidebar-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

#team-preview .sidebar-card h3 {
    margin-top: 0;
    margin-bottom: var(--space-3);
}

#team-preview .sidebar-card p {
    color: var(--color-neutral-900);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* ==========================================================================
   Contact Form Layout — two-column grid inside each tab panel
   Form on the left, "what happens next" sidebar on the right at desktop.
   Stacks single-column on mobile.
   ========================================================================== */
.contact-form-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 1024px) {
    .contact-form-layout {
        grid-template-columns: 1fr 300px;
        gap: var(--space-6);
    }
}


/* ==========================================================================
   Contact Form Wrapper — heading + lead paragraph above the form fields
   ========================================================================== */
.contact-form-wrapper h2 {
    margin-top: 0;
    margin-bottom: var(--space-1);
}

.contact-form-wrapper > p {
    color: var(--color-neutral-600);
    margin-bottom: var(--space-4);
    line-height: var(--leading-relaxed);
}


/* ==========================================================================
   Form Sidebar — column container for the "what we'll do" + "call us" cards
   ========================================================================== */
.form-sidebar {
    display: flex;
    flex-direction: column;
}


/* ==========================================================================
   Sidebar card spacing utility
   Used by the "Prefer to call?" card so it sits below the steps card with
   visible space between. Replaces an inline margin-top from the spec.
   ========================================================================== */
.sidebar-card-spaced {
    margin-top: var(--space-3);
}

.sidebar-card-lead {
    margin-top: 0;
    margin-bottom: var(--space-2);
}

.call-cta {
    /* The phone-emoji + label fit better with a small line-height adjustment
       so the button content vertically centers inside the .btn-lg padding. */
    line-height: 1.2;
}


/* ==========================================================================
   Form Steps — numbered list inside the sidebar's "what happens next" card
   Replaces the inline padding-left + per-li padding from the spec.
   ========================================================================== */
.form-steps {
    list-style: decimal;
    padding-left: var(--space-3);
    margin-top: 0;
    margin-bottom: 0;
}

.form-steps li {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    color: var(--color-neutral-900);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}


/* ==========================================================================
   Checkbox + Radio Groups
   Wrapping flex of checkbox / radio labels. Each label includes both the
   input and the visible text so clicking the text toggles the input.
   ========================================================================== */
.checkbox-group,
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.form-checkbox-label,
.form-radio-label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-neutral-900);
    /* Each label is its own clickable target; padding gives it a comfortable
       hit area on touch devices without overflowing the wrap row. */
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    padding-right: var(--space-2);
}

.form-checkbox-label input,
.form-radio-label input {
    /* Reset the native control so it sits aligned with the label text */
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}


/* ==========================================================================
   Fieldset reset for the radio group container
   Browsers default-style fieldsets with borders and inset padding; we want
   it to look like a regular form-group with just a legend acting as label.
   ========================================================================== */
.form-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    margin-bottom: var(--space-3);
    min-width: 0;
}

.form-fieldset legend {
    /* legend has special positioning rules; force normal block flow */
    padding: 0;
    margin-bottom: var(--space-1);
}


/* ==========================================================================
   Form Honeypot
   Hidden anti-spam field — positioned off-screen rather than display:none
   so naive form-fillers still see and fill it.
   ========================================================================== */
.form-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* End of file */