/* custom.css - Windscreen Magik
 * Colours from client logo:
 *   Deep Navy Blue:  #0B2545 (frame / WINDSCREEN wordmark) - now the dominant colour,
 *                     carrying headings, icons and text, matching how the logo itself
 *                     uses navy as the primary colour and cyan only as a sparing accent.
 *   Magic Cyan Blue: #00B4D8 (sparkles / MAGIK wordmark) - pulled back to accent-only use
 *                     (hover underlines, review stars removed to amber, small touches)
 *                     after v1 leaned on it too heavily via a cyan-tinted background wash.
 *   Soft Slate Grey: #CCCCCC / neutral light tint #F2F2F3 for section/card backgrounds -
 *                     replaces the earlier #EAF4F8 (light cyan tint), which was the main
 *                     reason the page read as "too cyan" even where text was navy.
 *   Off-White:       #FBFBF9 (swapped from pure #FFFFFF - a touch warmer, less stark)
 * Warm Amber:        #F5A623 (navy''s complement) for CTAs and star ratings.
 * Fonts: Montserrat (heading/nav) + Open Sans (body) - both already self-hosted in base.css.
 * Hand-crafted build (no sheet tab), no contact form - phone only.
 */

:root {
    --color-primary:               #0B2545;
    --highlight:                   #00B4D8;
    --highlight-contrast:          #FBFBF9;
    --highlight-inverse:           #0B2545;
    --highlight-inverse-contrast:  #FBFBF9;

    --cover-text-color:             #0B2545;
    --cover-title-and-description-guard-bg-color: rgba(251, 251, 249, 0.90);
    --cover-title-text-shadow:      none;

    --sticky-menu-text-color:       #0B2545;

    --section-light-text-color:     #0B2545;
    --section-light-bg-color:       #FBFBF9;
    --section-dark-text-color:      #0B2545;
    --section-dark-bg-color:        #F2F2F3;

    --section-uni-quote:            #6b7280;
    --section-uni-code-bg-color:    #F2F2F3;

    --single-page-text-color:       var(--section-light-text-color);
    --single-page-bg-color:         var(--section-light-bg-color);

    --footer-color-background:      #0B2545;
    --footer-color:                 #e8f1f7;

    --ul-li-icon:                   fa-circle-check;

    --font-heading: 'Montserrat', sans-serif;
    --font-body:    'Open Sans', sans-serif;
    --font-nav:     'Montserrat', sans-serif;

    --nav-height:        100px;
    --layout-max-width:  1120px;
    --border-radius:     8px;

    --font-size-section-title:        2.4rem;
    --font-size-section-title-mobile: 2.0rem;
    --font-size-card-title:           1.8rem;
    --font-size-card-body:            1.5rem;
    --font-size-card-icon:            3.2rem;
    --font-size-subheading:           1.8rem;

    --card-border-color:    #CCCCCC;
    --input-border-color:   #CCCCCC;
    --nav-bg-color:         #FBFBF9;
    --nav-logo-text-color:  #0B2545;
    --color-error:          #c53030;
}

/* NAV - navy text throughout; cyan reduced to a small underline accent on hover */
.tella-nav-links .btn.site-menu {
    color: #0B2545; font-weight: 600;
    border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.tella-nav-links .btn.site-menu:hover { border-bottom-color: #00B4D8; }
.tella-logo-text                      { color: #0B2545 !important; font-weight: 700; }
.tella-mobile-link                    { color: #0B2545; }
.tella-mobile-link:hover              { color: #00B4D8; }

/* HERO - real photo (hero.png), trialled at lower resolution than ideal.
 * The background-image itself is set on the ::before pseudo-element (see
 * layouts/_default/index.html, changed from targeting #site-head.withCenteredImage
 * directly) so a blur can mask the source resolution without blurring the
 * headline text, which sits in #site-head-content on its own stacking layer.
 * ::before  = blurred photo, oversized via negative inset so blurred edges never show.
 *             Blur and wash both reduced from earlier passes - blur 10px->5px and
 *             wash 0.10->0.05 - the photo was reading as unidentifiable, not just soft.
 * ::after   = off-white wash, keeps navy text readable without fully obscuring the photo.
 * .vertical = actual content, lifted above both with z-index.
 */
#site-head, #site-head.withCenteredImage {
    height: 56vh;
    position: relative;
    overflow: hidden;
    background-color: #F2F2F3;
}
#site-head.withCenteredImage::before {
    content: "";
    position: absolute;
    inset: -20px;
    background-size: cover;
    background-position: center;
    filter: blur(5px);
    transform: scale(1.05);
    z-index: 0;
}
#site-head.withCenteredImage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(251, 251, 249, 0.05);
    z-index: 1;
}
#site-head .vertical {
    position: relative;
    z-index: 2;
}
#site-head-content { max-width: 600px; margin: 0 auto; }
#site-head-content .blog-title {
    color: #0B2545; font-size: 3.4rem; font-weight: 700; margin-bottom: 1rem;
}
#site-head-content .blog-description {
    color: #0B2545; font-size: 1.6rem; line-height: 1.6; margin-bottom: 1.8rem;
}

/* HERO / GENERAL CTA - warm amber pop against the cool navy brand */
.tella-hero-cta {
    display: inline-block;
    background-color: #F5A623;
    color: #0B2545 !important;
    padding: 1.1rem 2.8rem;
    border-radius: var(--border-radius);
    font-family: var(--font-nav);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    transition: background-color 0.2s ease, transform 0.15s ease;
}
.tella-hero-cta:hover { background-color: #0B2545; color: #FBFBF9 !important; transform: translateY(-2px); }

/* SECTION h2 */
.post-content h2 {
    font-size: 2.0rem; font-weight: 700; color: #0B2545;
    margin-top: 2rem; margin-bottom: 0.75rem;
}

/* SERVICE CARDS - navy icons (was cyan) */
.tella-card i, .tella-card svg { color: #0B2545; }

/* Buttons fallback (submit etc.) - amber, matching hero CTA */
.tella-submit-btn { background-color: #F5A623 !important; color: #0B2545 !important; }
.tella-submit-btn:hover:not(:disabled) { background-color: #0B2545 !important; color: #FBFBF9 !important; }

/* FOOTER - navy background */
footer, .site-footer            { background-color: #0B2545; color: #e8f1f7; }
footer a, .footer a             { color: #e8f1f7; }
footer a:hover, .footer a:hover { color: #00B4D8; }

/* CONTACT - phone-only, no form (see contact.md). Navy icon (was cyan).
 * Second link is the click-to-navigate address (opens Google Maps in a new tab). */
.tella-contact-simple {
    display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 2rem;
}
.tella-contact-simple a {
    display: inline-flex; align-items: center; gap: 0.7rem;
    color: #0B2545; font-weight: 700; font-size: 2rem;
    text-decoration: none; font-family: var(--font-heading);
}
.tella-contact-simple a:hover { color: #00B4D8; }
.tella-contact-simple i { color: #0B2545; font-size: 1.6rem; }

/* SERVICE AREAS - map (left, square) + vertical suburb list (right).
 * Map image is a static asset generated at build time by build_service_area_map.py
 * (Google Static Maps, one pin per suburb) - see static/images/service-area-map.png.
 * Stacks to a single column on mobile, map on top. */
.tella-service-area-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    margin-top: 1.5rem;
}
@media (max-width: 767px) {
    .tella-service-area-grid { grid-template-columns: 1fr; }
}
.tella-service-area-map {
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid #CCCCCC;
    background-color: #F2F2F3;
}
.tella-service-area-map img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* Suburb list: 2 CSS columns (newspaper-style) + tighter type/spacing so 18 suburbs
 * comes in around the same height as the square map instead of towering over it.
 * break-inside: avoid keeps each row intact rather than splitting across the column gap. */
.tella-suburb-list-vertical {
    list-style: none;
    margin: 0; padding: 0;
    columns: 2;
    column-gap: 1.6rem;
}
.tella-suburb-list-vertical li {
    display: flex; align-items: center; gap: 0.5rem;
    color: #0B2545; font-weight: 600; font-size: 1.25rem;
    border-bottom: 1px solid #F2F2F3;
    padding-bottom: 0.4rem;
    margin-bottom: 0.4rem;
    break-inside: avoid;
}
.tella-suburb-list-vertical i {
    color: #F5A623; font-size: 1.05rem; flex-shrink: 0;
}
@media (max-width: 500px) {
    .tella-suburb-list-vertical { columns: 1; }
}

/* Legacy chip style, kept for any content still using the flat wrapped-chip layout */
.tella-suburb-list {
    display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem;
}
.tella-suburb-chip {
    background-color: #F2F2F3;
    color: #0B2545;
    border: 1px solid #CCCCCC;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 1.4rem;
    font-weight: 600;
}

/* GOOGLE REVIEWS SECTION (site-local, validating before template promotion - see CLAUDE.md S21)
 * Neutral grey card background (was cyan-tinted). Amber stars/badge kept - reads as a
 * ratings convention, not part of the brand-cyan overuse. */
.tella-reviews-wrap { max-width: var(--layout-max-width); margin: 0 auto; }

.tella-reviews-badge {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    margin-bottom: 2rem; font-size: 1.6rem; color: #0B2545; font-weight: 700;
}
.tella-reviews-badge i.fa-brands.fa-google { color: #0B2545; font-size: 1.4rem; }
.tella-reviews-star { color: #F5A623; font-size: 1.3rem; }
.tella-reviews-count { font-weight: 400; color: #6b7280; font-size: 1.3rem; }

.tella-reviews-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem;
}
@media (max-width: 767px) {
    .tella-reviews-grid { grid-template-columns: 1fr; }
}

.tella-review-card {
    background-color: #F2F2F3;
    border-radius: var(--border-radius);
    padding: 1.4rem 1.6rem;
}
.tella-review-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; }
.tella-review-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background-color: #0B2545; color: #FBFBF9;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.2rem; flex-shrink: 0;
}
.tella-review-meta { display: flex; flex-direction: column; }
.tella-review-author { font-weight: 700; color: #0B2545; font-size: 1.4rem; }
.tella-review-time { color: #6b7280; font-size: 1.2rem; }
.tella-review-stars { color: #F5A623; font-size: 1.1rem; margin-bottom: 0.5rem; }
.tella-review-text { color: #0B2545; font-size: 1.4rem; line-height: 1.6; margin: 0; }

/* "See all our reviews on Google" link, opens in a new tab (external destination). */
.tella-reviews-link-wrap { text-align: center; margin-top: 1.8rem; }
.tella-reviews-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: #0B2545; font-weight: 700; font-size: 1.4rem;
    text-decoration: none; border-bottom: 2px solid transparent;
    padding-bottom: 2px; transition: border-color 0.2s ease;
}
.tella-reviews-link:hover { border-bottom-color: #00B4D8; }
.tella-reviews-link i { font-size: 1.1rem; }

/* WHY CHOOSE US - vertical service cards, navy icons (was cyan) */
.tella-card-vertical-aside i { color: #0B2545; font-size: 2.6rem; }