/* ================================
   Shared Components
   ================================

   Extracted in Batch 4 from residential-styles.css and commercial-styles.css
   which contained near-identical duplicate blocks for these components.

   Themed bits (e.g. badge-dot color) are handled by body-class-scoped
   overrides below, so each division page gets the correct color
   without needing its own copy of the entire component block.

   Naming: these are all shared, un-themed base components. Any theme
   variation should use a body class selector (.residential-page .foo
   or .commercial-page .foo, etc.) for the variation only.
   ================================ */


/* ================================
   Hero grid overlay
   (subtle grid pattern on division & portfolio hero sections)
   ================================ */
.hero-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
    z-index: 1;
}


/* ================================
   Service hero layout
   (positioning + typography — per-page background is still
   set in division stylesheets because each has its own hero image)
   ================================ */
.service-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    padding: 0 40px;
}

.service-hero-title {
    font-family: var(--font-body);
    font-size: clamp(48px, 10vw, 100px);
    font-weight: 700;
    color: white;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.03em;
}


/* ================================
   Service badge
   (small "Greater Toronto Area" / "Residential Services" pill)
   ================================ */
.service-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 32px;
}

.service-badge .badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
    /* Default color; overridden per theme below */
    background: var(--accent-color);
}

/* Themed badge-dot colors — scoped by body class */
.residential-page .service-badge .badge-dot { background: var(--res-accent-light); }
.commercial-page .service-badge .badge-dot  { background: var(--com-accent-light); }
.siteworks-page .service-badge .badge-dot   { background: var(--sw-accent-light); }

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}


/* ================================
   Back-to-Home nav link
   (used on every non-home page)
   ================================ */
.back-to-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 8px 0;
    transition: color 0.3s ease;
}

.back-to-home svg {
    transition: transform 0.3s ease;
}

.back-to-home:hover svg {
    transform: translateX(-4px);
}

/* Themed hover colors — scoped by body class */
.residential-page .back-to-home:hover { color: var(--res-primary); }
.commercial-page .back-to-home:hover  { color: var(--com-primary); }
.siteworks-page .back-to-home:hover   { color: var(--sw-primary); }
.fp-page .back-to-home:hover          { color: var(--fp-primary); }


/* ================================
   Service scroll indicator
   (the "Scroll" cue at the bottom of division hero sections)

   Batch 4.5: Moved from bottom-center to bottom-left to avoid colliding
   with CTA buttons on shorter viewports. Same move as the homepage.
   ================================ */
.service-scroll-indicator {
    position: absolute;
    bottom: 48px;
    left: 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.service-scroll-indicator .scroll-line {
    width: 1px;
    height: 40px;
    position: relative;
    overflow: hidden;
    /* Theme color applied via body class below */
    background: linear-gradient(to bottom, var(--accent-color), transparent);
}

.service-scroll-indicator .scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: var(--accent-color);
    animation: scrollLine 2s ease-in-out infinite;
}

/* Themed scroll-indicator colors — scoped by body class */
.residential-page .service-scroll-indicator .scroll-line         { background: linear-gradient(to bottom, var(--res-accent-light), transparent); }
.residential-page .service-scroll-indicator .scroll-line::after  { background: var(--res-accent-light); }
.commercial-page .service-scroll-indicator .scroll-line          { background: linear-gradient(to bottom, var(--com-accent-light), transparent); }
.commercial-page .service-scroll-indicator .scroll-line::after   { background: var(--com-accent-light); }
.siteworks-page .service-scroll-indicator .scroll-line           { background: linear-gradient(to bottom, var(--sw-accent-light), transparent); }
.siteworks-page .service-scroll-indicator .scroll-line::after    { background: var(--sw-accent-light); }

@keyframes scrollLine {
    0% { transform: translateY(-20px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(60px); opacity: 0; }
}


/* ================================
   Accordion header button reset  (Batch 7b)
   ================================
   The .accordion-header element on residential and commercial pages was
   converted from <div> to <button type="button"> for proper accessibility.
   This reset ensures it renders visually identical to the previous <div>.

   Division stylesheets then apply their themed .accordion-header styling
   (background, hover, etc.) on top — because the selector is unchanged,
   all existing rules still apply.

   The reset is scoped to button.accordion-header so it cannot accidentally
   affect <button> elements elsewhere (e.g., nav CTAs, form buttons).
*/
button.accordion-header {
    /* Strip all browser default button styling */
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    /* Full-width block so flex children (image, content) fill the row */
    width: 100%;
    box-sizing: border-box;
}

/* Keyboard focus ring — visible, accessible, on-brand. */
button.accordion-header:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Safari needs this explicit :focus clear to avoid default blue ring
   showing alongside the themed :focus-visible ring. */
button.accordion-header:focus:not(:focus-visible) {
    outline: none;
}