/* ==========================================================================
   Home Page Styles — ColdStorage Canada
   Page-specific styles for the homepage. Anything reused across multiple
   pages belongs in components.css instead. Mobile-first; tablet at 768px,
   desktop at 1024px. All values reference design-system.css custom properties.
   ========================================================================== */


/* ==========================================================================
   Hero — homepage variant
   The full-viewport hero uses a background image set here (rather than
   inline) so we comply with the zero-inline-styles rule. Replace the URL
   in the rule below with the production image once it's uploaded.
   ========================================================================== */
.hero-homepage {
    background-image: url('/images/hero-homepage.jpg');
}


/* ==========================================================================
   Hero — subtitle
   The supporting line under the H1. Constrained width keeps line length
   readable on wide screens.
   ========================================================================== */
.hero-subtitle {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-white);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
    .hero-subtitle {
        font-size: var(--text-xl);
    }
}


/* ==========================================================================
   Hero — CTA group
   Two primary buttons. Stacked on mobile (full width) so each tap target
   is comfortable, side-by-side on tablet and up.
   ========================================================================== */
.hero-cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.hero-cta-group .btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 768px) {
    .hero-cta-group {
        flex-direction: row;
        justify-content: center;
        max-width: none;
    }

    .hero-cta-group .btn {
        width: auto;
    }
}


/* ==========================================================================
   Scroll Indicator
   Animated downward arrow centered at the bottom of the hero. The bounce
   keyframe uses transform-only animation for smooth GPU compositing.
   prefers-reduced-motion is honoured at the bottom of this section.
   ========================================================================== */
.scroll-indicator {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-white);
    font-size: var(--text-2xl);
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: background-color var(--transition-base);
    animation: scroll-indicator-bounce 2s infinite;
    z-index: 2;
}

.scroll-indicator:hover,
.scroll-indicator:focus-visible {
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.15);
    outline: none;
}

.scroll-indicator:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Vertical bounce: rises 12px and settles back to baseline */
@keyframes scroll-indicator-bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-12px);
    }
}

/* Respect users who request reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-indicator {
        animation: none;
    }
}


/* ==========================================================================
   Section subtitle
   The supporting line that appears under an H2 on intro sections such as
   "How Can We Help You?" and "The Only Team That Does Both".
   ========================================================================== */
.section-subtitle {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-600);
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-6);
}


/* ==========================================================================
   Three Paths — emoji icons inside service cards
   The card-service-icon container in components.css renders a 48x48 box
   sized for SVG glyphs. The emoji used on the homepage needs to render
   slightly larger to fill the same visual weight.
   ========================================================================== */
.path-emoji {
    font-size: 28px;
    line-height: 1;
    /* Use system emoji fonts for consistent rendering across platforms */
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}


/* ==========================================================================
   Section header
   Two-column header pattern used on Featured Listings and Latest Resources
   sections: title block on the left, action button on the right. On mobile
   the elements stack so the button doesn't crowd the title.
   ========================================================================== */
.section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.section-header .btn {
    align-self: stretch;
    justify-content: center;
}

@media (min-width: 768px) {
    .section-header {
        flex-direction: row;
        align-items: center;
        gap: var(--space-3);
    }

    .section-header .btn {
        align-self: auto;
        justify-content: center;
        flex-shrink: 0;
    }
}


/* ==========================================================================
   Why Choose Us — 4-up differentiator items
   Each item is a centered icon + heading + body block. Padding lives on
   the item itself rather than on a card wrapper, since this section is
   not card-styled (no background, no shadow, no border).
   ========================================================================== */
.why-choose-item {
    text-align: center;
    padding: var(--space-4);
}

.why-choose-icon {
    display: block;
    font-size: var(--text-3xl);
    line-height: 1;
    margin-bottom: var(--space-2);
    /* Use system emoji fonts for consistent rendering across platforms */
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.why-choose-item h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-neutral-900);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-1);
}

.why-choose-item p {
    color: var(--color-neutral-600);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}


/* ==========================================================================
   Skeleton card height modifiers
   These give the loading placeholders the right vertical footprint so the
   page doesn't shift dramatically when real content lands. Heights match
   the components they will be replaced with.
   ========================================================================== */
.skeleton-card-province {
    border-radius: var(--radius-lg);
    height: 160px;
    width: 100%;
}

.skeleton-card-resource {
    border-radius: var(--radius-lg);
    height: 200px;
    width: 100%;
}


/* ==========================================================================
   Lead Magnet — two-column conversion section
   Mobile-first single column; splits into two equal columns at 1024px+.
   The pitch column inherits the dark .section-dark theming; the form
   sits in a white card with a strong shadow to draw the eye.
   ========================================================================== */
.lead-magnet-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: center;
}

@media (min-width: 1024px) {
    .lead-magnet-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}


/* Left column: pitch copy on a dark background */
.lead-magnet-content h2 {
    color: var(--color-white);
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
}

.lead-magnet-content p {
    color: var(--color-neutral-300);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

/* Feature checklist */
.lead-magnet-features {
    list-style: none;
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
    padding: 0;
}

.lead-magnet-features li {
    color: var(--color-neutral-300);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
}

.lead-magnet-check {
    color: var(--color-accent);
    font-weight: var(--font-bold);
    flex-shrink: 0;
    /* Slight optical alignment with first line of text */
    line-height: var(--leading-normal);
}


/* Right column: white form card */
.lead-magnet-form-wrapper {
    width: 100%;
}

.lead-magnet-form-card {
    background-color: var(--color-white);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    color: var(--color-neutral-900);
}

.lead-magnet-form-card h3 {
    color: var(--color-neutral-900);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-1);
}

.lead-magnet-form-card p {
    color: var(--color-neutral-600);
    font-size: var(--text-base);
}


/* ==========================================================================
   Form honeypot
   Hidden anti-spam field. Visually removed from the page but still in the
   accessibility tree fallback (the parent label has aria-hidden="true" and
   the input has tabindex="-1" to keep it out of keyboard navigation).
   Using `display: none` would prevent some bot frameworks from filling it,
   so we use position-off-screen instead.
   ========================================================================== */
.form-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ==========================================================================
   Lead magnet success state
   Replaces the form on successful submission. JavaScript toggles the
   `hidden` attribute on #lm-success.
   ========================================================================== */
.lm-success-state {
    text-align: center;
    padding: var(--space-4);
}

.lm-success-icon {
    font-size: var(--text-5xl);
    line-height: 1;
    color: var(--color-success);
    margin-bottom: var(--space-2);
    font-weight: var(--font-bold);
}

.lm-success-state h3 {
    color: var(--color-neutral-900);
    margin-bottom: var(--space-1);
}


/* ==========================================================================
   Section wrapper marker
   The .section class signals a top-level page section to assistive tools
   and to designers reading the markup; .py-section in design-system.css
   provides the actual vertical padding. Defining .section as a no-op keeps
   semantics clear without duplicating padding rules.
   ========================================================================== */
.section {
    /* Intentionally empty: padding comes from the .py-section utility */
}

/* End of file */