/* City landing pages (/{lang}/city/{slug}). Every selector here is scoped
   under .city- (or a plain new selector used only inside city.blade.php),
   loaded only by that one template - nothing here can affect any other
   page's appearance. Colors reuse the site's real, already-live brand
   reds (#de2c42 / #e5314a / #aa0719), not the 2019 PDF's literal orange
   palette, per explicit decision. Font stack matches the site's existing
   Fira Sans usage everywhere else. */

/* Whisper-light brand-red wash across the whole photo (was a strong tint
   before - reduced ~3x in opacity per explicit direction) - keeps the
   photo reading as bright, colorful and festive, not recolored. Legibility
   for the H1/subtitle/CTA now comes from .city-hero-textbg below instead
   of tinting the whole image. */
.city-hero-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(45deg, rgba(170, 7, 25, .26) 0%, rgba(222, 44, 66, .16) 55%, rgba(222, 44, 66, .05) 100%);
}

/* Local darkening scoped to just the text block (added as a second class
   alongside the existing, shared .character - .character itself is used
   unmodified on character.blade.php, so this never touches that page). */
/* Lightened 2026-10-01 (real-device review: panel read as a large,
   over-saturated dark rectangle, hiding too much of each city's own
   photo). Opacity cut by roughly a third; text-shadow added below on
   both h1 and subtitle as a readability safety net, since the panel
   itself is no longer doing all the contrast work alone - same
   technique already used when the homepage Hero's own scrim was
   lightened. */
.city-hero-textbg {
    display: inline-block;
    background: linear-gradient(135deg, rgba(18, 2, 4, .38), rgba(170, 7, 25, .26));
    border-radius: 20px;
    padding: 26px 32px;
}

/* Scoped under .city-page so character.blade.php's own, unmodified
   .character>h1 (style.css) is never touched - this is additive only. */
.city-page .character h1 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

.city-hero-subtitle {
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.35;
    color: #fff;
    max-width: 480px;
    margin: 18px 0 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

.city-button-lg {
    font-size: 20px;
    padding: 18px 42px;
    margin-top: 30px;
}

/* Compact Hero language switcher (2026-10-01) - same visual principle
   as the approved .home-hero-lang on the homepage Hero (home.css),
   scoped independently here under .city-hero-lang so neither template
   can affect the other. Hidden entirely on desktop by default (existing
   header .lang pill is untouched and keeps working there); shown only
   on mobile, inside .city-hero-textbg, right after the CTA button - in
   normal document flow, never fixed/sticky, never overlapping the
   mascot/H1/subtitle/CTA. */
.city-hero-lang {
    display: none;
}

@media only screen and (max-width: 767px) {
    .city-hero-textbg {
        display: block;
        border-radius: 14px;
        padding: 22px 20px;
    }

    .city-hero-subtitle {
        font-size: 18px;
        max-width: 100%;
    }

    .city-button-lg {
        font-size: 16px;
        padding: 14px 28px;
        margin-top: 20px;
    }

    .city-hero-lang {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        margin-top: 12px;
        flex-wrap: nowrap;
    }

    .city-hero-lang a,
    .city-hero-lang span {
        display: block;
        padding: 6px 13px;
        border-radius: 999px;
        font-family: "Fira Sans", Arial, Helvetica, sans-serif;
        font-weight: 700;
        font-size: 12px;
        line-height: 1.3;
        text-decoration: none;
        color: rgba(255, 255, 255, .65);
        text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
        white-space: nowrap;
    }

    .city-hero-lang span.is-active {
        background: linear-gradient(90deg, #FF0A57, #FF4616);
        color: #fff;
        text-shadow: none;
    }
}

/* Content sections - generous vertical "air" + alternating tint for
   rhythm, per the brand guideline's whitespace/hierarchy guidance. */
.city-section {
    padding: 70px 0;
}

.city-section-alt {
    background: #f8f4f2;
}

.city-section-heading {
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #2a2a2a;
    margin: 0 0 20px;
}

@media only screen and (max-width: 767px) {
    /* Final mobile spacing fix: was 40px 0 (80px combined gap between
       adjacent sections) - reduced so two plain card sections
       (Intro/about_area/why_us) land ~24px apart. */
    .city-section {
        padding: 12px 0;
    }

    /* A card section followed by a "common" (Services/FAQ - the
       label+underline header pattern) section gets a slightly larger,
       ~32px gap instead, so the heading reads as its own new group
       rather than another card in the same row. Bottom padding is left
       at the 12px inherited from .city-section above. */
    .city-section.common {
        padding-top: 20px; /* mobile-spacing-fix */
    }

    .city-section-heading {
        font-size: 20px;
    }
}

/* FAQ accordion - plain <details>/<summary>, fully re-skinned, no JS/no
   new markup dependency beyond what native HTML already provides. */
.city-faq-item {
    border-bottom: 1px solid #e5e3df;
    padding: 18px 0;
}

.city-faq-item:first-child {
    border-top: 1px solid #e5e3df;
}

.city-faq-question {
    cursor: pointer;
    list-style: none;
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #2a2a2a;
    padding-right: 32px;
    position: relative;
}

.city-faq-question::-webkit-details-marker {
    display: none;
}

.city-faq-question::after {
    content: "+";
    position: absolute;
    right: 0;
    top: -2px;
    font-weight: 700;
    font-size: 24px;
    color: #de2c42;
    transition: transform .2s ease;
}

.city-faq-item[open] .city-faq-question::after {
    transform: rotate(45deg);
}

html[dir=rtl] .city-faq-question {
    padding-right: 0;
    padding-left: 32px;
}

html[dir=rtl] .city-faq-question::after {
    right: auto;
    left: 0;
}

.city-faq-answer {
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #5d5b5b;
    margin: 12px 0 0;
}

@media only screen and (max-width: 767px) {
    .city-faq-question {
        font-size: 15px;
    }

    .city-faq-answer {
        font-size: 14px;
    }
}

/* ===================================================================
   Mobile city hero fix (Netanya reference implementation, applies to
   any future city page using the same template).

   Root cause: .bg is `position:fixed; height:100%` (=100vh) site-wide
   for every page using this hero pattern (this file never touches that
   shared rule in style.css - only city.css, and only scoped under
   .city-page below). On a narrow/tall mobile viewport that makes the
   actual background-size:cover box roughly viewport-shaped (~0.45:1,
   width:height), while the city hero photo is landscape (~1.87:1).
   `cover` scales by the box's HEIGHT (the binding dimension there),
   which pushes the image's rendered WIDTH far past the screen - only
   a narrow ~25% vertical slice of the photo's width was ever visible,
   massively over-zooming the panda and cropping the children on both
   sides.

   Fix: give .bg (and .screen, so the text overlay still lines up with
   the now-shorter image band) an explicit mobile height close to the
   photo's own aspect ratio instead of the viewport's, so
   background-size:cover barely needs to crop at all anymore. .bg's
   `position` itself is left as `fixed` (unchanged) - only its height
   changes - so the existing "later sections scroll over and visually
   cover the pinned background" mechanism, already working on this
   exact page today, is not touched.
   =================================================================== */
@media only screen and (max-width: 767px) {
    .city-page .bg {
        /* Real-Android bug fix: .bg is `position:fixed` site-wide (shared
           rule in style.css, not touched here) - without a
           `.fullpage-section` wrapper (city.blade.php has none), it stays
           pinned to the viewport while the page scrolls, so later
           sections scrolled OVER the still-visible hero photo instead of
           it scrolling away normally. `absolute` is the same technique
           style.css itself already uses for this exact hero pattern
           wherever a `.fullpage-section` wrapper IS present (e.g. the
           homepage slider) - here it's scoped to `.city-page` + mobile
           only, via an explicit override, since city.blade.php has no
           such wrapper to trigger that existing rule automatically.
           `.screen`'s `min-height:78vw` below already matches this
           height, so taking `.bg` out of normal flow leaves no gap: the
           image and `.screen`'s content occupy the same visual region,
           and the next section starts right after `.screen` ends. */
        position: absolute;
        height: 90vw;
    }

    .city-page .screen {
        min-height: 90vw;
        padding: 20px 6%;
        align-items: flex-end;
    }

    /* This specific photo's subject sits close to horizontally centered -
       the site-wide mobile default (60% 50%, tuned for other hero photos
       in style.css) isn't right for it, so it's overridden here just for
       .city-page. */
    .city-page .bg .bg-parallax .cover {
        background-position: 50% center;
    }

    /* Lighter than the shared (desktop-tuned) overlay above in this same
       file - was making the photo read as too dark on mobile, especially
       now that far more of its actual (mostly bright/warm) content is
       visible instead of a tight crop dominated by the panda's dark
       costume. Text contrast is still protected separately by
       .city-hero-textbg's own dark backing below, so this can go lighter
       without hurting H1 legibility. */
    .city-page .city-hero-overlay {
        background: linear-gradient(180deg, rgba(170, 7, 25, .13) 0%, rgba(222, 44, 66, .07) 55%, rgba(222, 44, 66, .02) 100%);
    }

    .city-page .character {
        max-width: 100%;
        padding: 0;
    }

    .city-page .city-hero-textbg {
        padding: 8px 12px;
        border-radius: 12px;
    }

    /* Overrides the shared, much larger mobile h1 (32px/40px, from
       style.css) - text itself is unchanged, only sized down so even a
       2-line headline no longer spans past the panda's head/face inside
       the now much-shorter hero band. Trimmed further 2026-10-01 (real-
       device review on a longer H1 that was wrapping to 3 lines) - still
       a clearly readable, bold 18px, not a redesign. */
    .city-page .character h1 {
        font-size: 18px;
        line-height: 24px;
        margin: 0;
    }

    .city-page .city-hero-subtitle {
        font-size: 12px;
        line-height: 1.3;
        margin: 4px 0 0;
        max-width: 100%;
    }

    .city-page .city-button-lg {
        font-size: 13px;
        padding: 9px 20px;
        margin-top: 8px;
    }
}
/* ===================================================================
   Two-layer city hero: independent foreground mascot <img>.

   Deliberately NOT a background-image/.cover layer - .city-mascot is a
   real <img>, sized via its own natural aspect ratio (object-fit:contain
   means it is scaled to fit within the box below WITHOUT ever being
   cropped - head/ears/hands can never be cut off, regardless of the
   photo's own crop). Lives inside .screen (position:relative on both
   desktop and mobile - never touched by this file), NOT inside
   .bg/.bg-parallax/.cover, so it is completely independent of whatever
   .bg itself is doing (fixed on desktop, absolute on mobile - see the
   .city-page .bg rule above). No DB position fields - pure responsive
   CSS, per explicit instruction to keep this simple; only re-visit if a
   future city's mascot photo genuinely doesn't fit these defaults.
   Renders only when cities.mascot is set (see city.blade.php's
   `@if($cityMascotUrl)`) - completely absent from the DOM otherwise, so
   cities without a mascot (including Netanya right now) are entirely
   unaffected.
   =================================================================== */
.city-mascot {
    position: absolute;
    z-index: 3;
    right: 6%;
    bottom: 0;
    max-width: 32%;
    max-height: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

html[dir=rtl] .city-mascot {
    right: auto;
    left: 6%;
}

@media only screen and (max-width: 767px) {
    /* Horizontal-overflow fix: .city-mascot's right:-10% below (unchanged,
       Panda's visual position/size are not touched by this fix) pushes
       part of its box past .screen's own right edge, which is otherwise
       flush with the viewport edge. .screen has no overflow clipping of
       its own, so that bleed was expanding the whole page's scrollable
       width, causing horizontal drag on real Android. Clipped here, at
       the exact box the mascot is positioned inside - vertical scroll
       (overflow-y) is untouched. */
    .city-page .screen {
        overflow-x: hidden;
    }

    .city-page .city-mascot {
        top: auto;
        right: -10%;
        bottom: 14%;
        max-width: 48%;
        max-height: 56%;
    }

    html[dir=rtl] .city-page .city-mascot {
        right: auto;
        left: 4%;
    }

    /* Haifa-only reposition (real-Android review) - scoped via the
       `.city-haifa` body class (city.blade.php, driven by $city->slug),
       so Netanya's approved baseline `.city-page .city-mascot` rule
       above is completely untouched. Size (max-width/max-height) and
       `top:auto` are intentionally NOT repeated here - Haifa keeps the
       same size, only right/bottom move. */
    .city-haifa .city-mascot {
        right: -2%;
        bottom: 10%;
    }
}

/* ===================================================================
   Content-area visual refresh (post-hero sections only - hero, overlay,
   Panda/mascot and H1 are untouched by every rule below). Warm off-white
   page background instead of plain white, each text block treated as a
   soft card. Purely additive CSS, scoped under .city-page - no Blade
   changes were needed: .container already wraps Intro/about_area/why_us/
   FAQ, so cards go directly onto that existing structure.
   =================================================================== */

body.city-page {
    background: #FFF7F5;
}

/* Intro and About-area both carry the SAME .screen class as the hero (a
   pre-existing quirk of this template, not introduced here) - .screen's
   own min-height:100vh/display:flex (from the shared style.css) was
   forcing these ordinary text sections to be at least one full viewport
   tall, producing the large empty white space beneath short paragraphs
   that prompted this fix. Neutralized here, scoped to city pages only -
   .screen itself (hero included) and every other page using it stay
   untouched. .city-section's own padding (70px 0 / 40px 0 on mobile,
   defined above in this same file) is unaffected - this only clears the
   two extra properties .screen was contributing on top of it. */
.city-page section.city-section.screen {
    min-height: auto;
    display: block;
}

/* Cards now read as a matched set on one warm background, instead of
   alternating white/grey section stripes. */
.city-page .city-section-alt {
    background: transparent;
}

.city-page .city-section article.text {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 16px rgba(43, 20, 12, .06);
    padding: 36px 40px;
    max-width: 860px;
    margin: 0 auto;
}

/* FAQ's own .container IS its card - that section has no separate
   article.text wrapper, .container there holds the <details> items
   directly. ".common .container" only matches FAQ (Services has no
   .container at all in its markup), so Services is untouched. */
.city-page .city-section.common .container {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 16px rgba(43, 20, 12, .06);
    padding: 8px 40px;
    max-width: 860px;
    margin: 0 auto;
}

/* The first FAQ item's own top divider would now duplicate the card's
   own top edge. */
.city-page .city-faq-item:first-child {
    border-top: none;
}

/* Small brand-color accents on the Services/FAQ section labels - a thin
   line + the label's own background patch, not a large tinted block. */
.city-page .common-header:after {
    background: #FF4616;
}

.city-page .common-header > span {
    background: #FFF7F5;
}

.city-page .city-section-heading {
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 3px solid #FF830A;
}

@media only screen and (max-width: 767px) {
    /* Cards get real side margins on mobile (never flush with the screen
       edge) and slightly tighter internal padding, matching the same
       desktop/mobile ratio already used by .city-section's own padding
       above. */
    .city-page .city-section article.text,
    .city-page .city-section.common .container {
        margin: 0 16px;
        padding: 24px 20px;
        border-radius: 16px;
        /* Overflow fix: .container's base rule (style.css) is
           width:100% with no box-sizing set anywhere (default
           content-box), so the padding above was being ADDED on top of
           that 100% instead of being absorbed by it - the actual cause
           of the page-wide horizontal drag. border-box makes width:100%
           include this padding again, matching article.text (width:auto,
           unaffected either way, box-sizing has no effect on it). */
        box-sizing: border-box;
        /* .container's base rule (style.css) pins width to an explicit
           100% - box-sizing alone does not stop the margin above from
           overflowing an explicitly-sized box (margin is never absorbed
           by box-sizing). Overriding to auto here lets the browser solve
           margin-left + width + margin-right = parent width, the same
           mechanism article.text already relied on correctly (it has no
           explicit width anywhere). */
        width: auto;
    }
}

/* ===================================================================
   "Our programs" grid - UX Stage (real-clicks-to-programs audit).
   Shown directly after the Hero on every city page. New, city-scoped
   classes only - NOT .home-tile (that class only exists in home.css,
   loaded exclusively by the homepage, untouched by this change);
   visually similar to it by deliberate design, not a shared dependency.
   Section itself uses the plain .city-section rhythm (12px/70px
   top/bottom, already tuned) - tiles carry their own white-card look on
   the existing #FFF7F5 page background, same visual language as the
   Intro/FAQ cards elsewhere in this file.
   =================================================================== */
.city-programs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.city-program-tile {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(43, 20, 12, .08);
    text-decoration: none;
    color: #2a2a2a;
}

.city-program-tile img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.city-program-tile span {
    display: block;
    padding: 10px 12px;
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
}

@media only screen and (max-width: 767px) {
    /* 2 columns x 3 rows, per explicit instruction - lets a mobile
       visitor see the full assortment at a glance instead of guessing
       the old carousel could be swiped. */
    .city-programs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .city-program-tile span {
        font-size: 13px;
        padding: 8px 10px;
    }
}

/* Visual polish: this specific source photo (character figure occupying
   only the right ~45-96% of a wide 16:9 frame, large blank area on the
   left) crops badly at the default center position - shifted right so
   the crop removes the blank space instead of the character's hand.
   The other 5 program cards' source photos don't need this (checked
   each one individually - already close to the target ratio with
   centered subjects). */
.city-program-tile[data-type="characters"] img {
    object-position: 90% center;
}

.city-program-tile[data-type="inflatables"] img {
    object-position: 32% center;
}

.city-program-tile[data-type="inclusive"] img {
    object-position: center 62%;
}

/* SEO City Pilot - Netanya only (Phase 4A.2): link color for the new
   services-connection note (city.blade.php, .city-services-note), scoped
   narrowly to this one block's own class so no other current or future
   .city-section text link is affected. Reuses the two brand accent
   colors already used elsewhere in this file (.common-header:after /
   .city-section-heading border). */
.city-services-note a {
    color: #FF4616;
    text-decoration: underline;
}

.city-services-note a:hover {
    color: #FF830A;
}