/*
Theme Name: Anan Property Group
Template: wpresidence
Text Domain: anan-property-group
Description: Child theme of WPResidence for anan26.
Author: Anan Property Group
Version: 3.4
*/

/* Font consistency (2026-07-30, v2 - Montserrat replaces Inter for body text per
   user preference, pairs better with Fraunces headings): headings use Fraunces,
   body/menu/card-details use Montserrat. Self-hosted (not Google Fonts CDN) for
   speed - avoids the extra DNS/connection hop to fonts.googleapis.com +
   fonts.gstatic.com and the two-step CSS-then-font fetch, and avoids sending EU
   visitor IPs to Google. Each family below is ONE variable-font file per subset
   (latin / latin-ext - covers en/de/fr/it/es; th/ru/zh are out of scope per
   product decision) covering the whole weight range used site-wide. */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('https://anan26.stephenhadden.co.uk/wp-content/themes/anan-property-group/fonts/fraunces-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('https://anan26.stephenhadden.co.uk/wp-content/themes/anan-property-group/fonts/fraunces-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('https://anan26.stephenhadden.co.uk/wp-content/themes/anan-property-group/fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('https://anan26.stephenhadden.co.uk/wp-content/themes/anan-property-group/fonts/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --wp-estate-h1-font-family-option: 'Fraunces', Georgia, serif !important;
    --wp-estate-h2-font-family-option: 'Fraunces', Georgia, serif !important;
    --wp-estate-h3-font-family-option: 'Fraunces', Georgia, serif !important;
    --wp-estate-h4-font-family-option: 'Fraunces', Georgia, serif !important;
    --wp-estate-h5-font-family-option: 'Fraunces', Georgia, serif !important;
    --wp-estate-h6-font-family-option: 'Fraunces', Georgia, serif !important;
    --wp-estate-paragraph-font-family-option: 'Montserrat', Helvetica, Arial, sans-serif !important;
    --wp-estate-menu-font-family-option: 'Montserrat', Helvetica, Arial, sans-serif !important;
    --wp-estate-card-details-font-family-option: 'Montserrat', Helvetica, Arial, sans-serif !important;
}


/* Font hierarchy refinement (2026-07-30): Fraunces is reserved for genuine
   structural headings only (page title, section titles, category group labels,
   card titles) - Montserrat carries everything else, including elements that
   are marked up as h1-h6 but are actually CONTENT, not headings. Rule of thumb
   modeled on Christie's/Sotheby's real-estate sites: serif = structure, sans =
   information. Confirmed via live DOM audit of the single-property template. */

/* Nearby: venue names are content rows under a category heading, not headings
   themselves - only the category label (.yelp_category) stays Fraunces. */
.yelp_unit_name {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-weight: 500 !important;
}
/* Give the category label real separation from the venue rows under it now
   that both aren't competing on font alone. */
.yelp_category {
    letter-spacing: 0.02em;
    font-weight: 600 !important;
}

/* Advanced Search widget: "Beds"/"Baths"/"Price selector" are dropdown field
   labels, not headings. */
.wpestate-beds-baths-popoup-wrapper h3,
.wpestate-price-popoup-wrapper_v3 h3 {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
}

/* Reviews: "No reviews found." / login notice are status messages, not headings. */
.property_reviews_wrapper h5 {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
}

/* Hero price on the single-property page gets the serif treatment - the one
   number on the page that earns display-font weight (Christie's/Sotheby's
   pattern). Scoped to the single hero price only, not card/widget prices -
   those are being addressed separately on the homepage/property-card pass. */
/* Reconsidered (2026-07-30): price is financial data, not a heading - Fraunces's
   display-serif contrast reads less precise/scannable for exact numbers, and every
   OTHER price on the site (cards, listing grids) already renders in Montserrat.
   Match them instead of standing out. */
.price_area {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
}


/* "Contact Me" is an action prompt above a contact form/button, not a section
   heading - appears both on the single-property agent sidebar and repeated
   inside each homepage property card. Demote to Montserrat; the agent's own
   name directly above it stays Fraunces (functions as that mini widget's title). */



/* Editor's Picks slider (WpResidence_Property_Slider_v4) renders its card titles
   via a plugin-hardcoded class, not an Elementor typography control, so it wasn't
   caught by the earlier bulk font-family fix - card titles are headings, Fraunces. */
.featured_type6_title {
    font-family: 'Fraunces', Georgia, serif !important;
}


/* Meet the Team grid (3 agents) uses a 4-column flex row that left-packs when
   under-full, leaving a visible gap on the right. Center it - scoped to this
   specific widget instance (elementor-element-f7fc702) so other property/area
   grids elsewhere on the site, which are usually full rows, aren't affected. */
.elementor-element-f7fc702 .elementor_wpresidece_grid {
    justify-content: center;
}


/* Design refinement (2026-07-30, round 3):
   1. Accordion section headings (Details/Features/Address/What's Nearby/etc.) bumped
      slightly for clearer differentiation from their Montserrat sub-labels
      (.feature_chapter_name "Interior Details"/"Other Features" etc, already correct).
   2. Nearby: reconsidered per user feedback - ONLY the section title ("What's Nearby")
      should be Fraunces. The category group label ("Restaurants") is not itself a true
      heading, so it moves to Montserrat too, differentiated from the venue name below it
      by weight/size alone (bold + larger) rather than a font-family switch - matches the
      pattern already used successfully in Details/Features/Address, where label and value
      are both Montserrat.
   3. Nearby category icons: was a per-category rainbow of pill-shaped colors inherited
      from the theme's old Yelp integration. Unified to the site's own gold, as a true
      circle, white glyph - matches the checkmark-icon treatment already used in Features. */
/* The visible heading text lives in a NESTED <button class="accordion-button">
   inside .accordion-header (Bootstrap accordion markup), which carries its own
   font-size that beats simple inheritance from the wrapper - targeting only
   .accordion-header (as the previous version of this rule did) changed the
   wrapper's own computed style but never reached the actual rendered text. */
.accordion-header,
.accordion-button {
    font-size: 32px !important;
    font-weight: 600 !important;
}
.yelp_category {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}
.yelp_icon i {
    background-color: #D2C196 !important;
    color: #FFFFFF !important;
    border-radius: 50% !important;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}


/* Design refinement (round 4): a few headings live OUTSIDE the accordion/tab system
   (.accordion-header/.accordion-button) entirely, using their own distinct wrappers, so
   the earlier size/weight boost never reached them - they were left looking orphaned
   next to the now-bold accordion headings. Bring them to the same 32px/600 treatment.
   "Contact Me" specifically: this template has no separate "Agent" section heading, so
   Contact Me functions as that section's de facto title - promoted back to Fraunces to
   match, reversing the earlier Montserrat demotion. */
.property_reviews_wrapper h4,
.agent_listings_title_similar,
.wpestate_single_agent_details_header_wrapper h3,
.wpestate_single_agent_details_header_wrapper h4 {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 32px !important;
    font-weight: 600 !important;
}


/* Description content uniformity (2026-07-30): listing descriptions get pasted in from
   wildly different sources (Word, AI drafts, plain typing) with wildly different HTML
   structure - some flat paragraphs, some with real h1-h6 subheadings baked in. Those
   embedded headings were inheriting the SAME sitewide section-heading style (28px+
   Fraunces) as real panel titles like "Description" itself, so a listing whose pasted
   text happened to include subheadings looked structurally different/inconsistent next
   to one that didn't. Two-part fix: (1) force consistent body typography regardless of
   what inline styles a future paste might carry (defensive - none exist today, verified
   via direct DB read, but !important here beats inline styles too if that ever changes),
   (2) cap any heading tag found INSIDE description content to one modest, uniform
   in-content subheading treatment - clearly smaller than real section titles - so pasted
   content can never accidentally render its own competing full-size headings. */
.wpestate_property_description {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    color: #222222 !important;
}
.wpestate_property_description h1,
.wpestate_property_description h2,
.wpestate_property_description h3,
.wpestate_property_description h4,
.wpestate_property_description h5,
.wpestate_property_description h6 {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #252A2C !important;
    margin: 20px 0 8px !important;
}

/* WPResidence's --wp-estate-cssbox-shadow-* vars default to the stock theme's
   demo blue (rgba(7,152,255,.08) / rgba(0,110,225,.08)) and were never re-themed
   for our tan/charcoal palette - swap in a neutral charcoal glow instead.
   !important because main.css enqueues AFTER this child stylesheet. */
:root {
    --wp-estate-cssbox-shadow-elementor-option: 0 10px 27px 0 rgba(37, 42, 44, .08) !important;
    --wp-estate-cssbox-shadow-option: 3px 1px 20px 0 rgba(37, 42, 44, .08) !important;
}

/* Accessibility: parent theme hardcodes #888 (2.86:1 on white) for the
   slider price/editorial text -- darken to pass WCAG AA (4.5:1). */
.property_slider_editorial_price {
    color: #757575 !important;
}

/* Accessibility: .property_title_label (For Sale/For Rent badge) mixes the
   brand color at 85% opacity over the page background, which lightens the
   effective fill enough that white label text drops to ~4.07:1 (fails AA).
   Force full opacity -- matches the solid buttons elsewhere, which already
   pass at 5.66:1 with the same brand color. */
.property_title_label {
    background-color: var(--wp-estate-main-color-option, var(--wp-estate-main-color)) !important;
}

/* Homepage "Sell/Buy/Rent a home" CTA boxes (Elementor Call to Action widget,
   3x on the homepage): the widget's built-in field mapping put the small
   uppercase eyebrow label ("SELL YOUR HOME") on the Primary/Fraunces global
   font and the big question headline ("Thinking of selling your home?") on
   the Text/Montserrat global font -- backwards from every other heading on the
   site, where Fraunces is the display serif and Montserrat is the label/caption
   font. Swap just this widget's two fields to match. */
.elementor-widget-wpresidence-call-to-action .elementor-cta__title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
}
.elementor-widget-wpresidence-call-to-action .elementor-cta__description {
    font-family: 'Fraunces', Georgia, serif !important;
}

/* Homepage "Featured Article" hero (WpResidence_Featured_Article widget): same
   backwards pairing as the Sell/Buy/Rent CTA boxes above -- the small caption
   ("Featured Article") and the big headline ("Buying a Thai Villa...") both
   inherit the Accent/Montserrat global font. Leave the caption as-is (correct --
   small sans label) and promote just the headline to Fraunces, matching every
   other display headline on the site. */
.elementor-widget-WpResidence_Featured_Article .featured_article_type2 .h2,
.elementor-widget-WpResidence_Featured_Article .featured_article_type2 h2 {
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 500 !important;
}

/* Mobile top bar: the utility bar (currency + measurement unit switcher) used to
   be desktop-only (Bootstrap d-none d-xl-block, removed in the child override at
   templates/headers/top_bar.php). Now visible at every width. Social icons
   (.left-top-widet) are hidden below xl -- they're already duplicated in the
   footer, and 7 icons + 2 dropdowns doesn't fit a phone-width row -- leaving the
   currency/measurement dropdowns as the sole, centered content on mobile. */
@media (max-width: 1199.98px) {
    .ana-topbar-mobile .top_bar {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 8px;
        padding-bottom: 8px;
        flex-wrap: wrap;
        justify-content: center !important;
        row-gap: 6px;
    }
    .ana-topbar-mobile .left-top-widet {
        display: none;
    }
    .ana-topbar-mobile .right-top-widet ul.xoxo {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin: 0;
        padding: 0;
    }
    /* Compact the dropdowns themselves: the parent's .top_bar .wpresidence_dropdown
       .dropdown-toggle rule fixes width at 145px (fine on a wide desktop bar) --
       on mobile that forced both widgets onto two rows. Shrink to content width
       with tighter padding/font so THB + the unit switcher fit on one line. */
    .ana-topbar-mobile .right-top-widet .widget-container {
        padding: 0 !important;
    }
    .ana-topbar-mobile .top_bar .wpresidence_dropdown .dropdown-toggle {
        width: auto !important;
        min-width: 0;
        max-width: 165px;
        padding: 0 20px 0 10px !important;
        font-size: 12px !important;
        height: 24px;
        line-height: 24px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* ---------------------------------------------------------------------------
   Logo aspect ratio.
   WPResidence sets both max-width (100px, from the theme option) and max-height
   (90px default, 60px in the sticky header) on .logo img, and the img's width /
   height attributes act as presentational CSS width/height. That makes each axis
   clamp independently, squashing the 555x392 mark to 100x90 (1.11 vs 1.42).
   Restoring auto sizing lets the replaced-element rules honour both maxima while
   keeping the aspect ratio - in the sticky header too. ID beats .logo img on
   specificity, so load order does not matter.
   --------------------------------------------------------------------------- */
#logo_image {
    width: auto;
    height: auto;
}


/* ---------------------------------------------------------------------------
   Mega menu typography.

   Root cause: Max Mega Menu's theme "custom_css" contains a block labelled
   "Spectra-exact mega menu clone - measured from live wpspectra.com", which
   hard-sets Figtree / 600 / #646464 on every menu tier with !important. Figtree
   is never loaded, so it fell through to Montserrat at weight 600 - heavier than
   any heading on this site, in another brand's voice. Hence !important here: it
   is the only way to outrank that block without unpicking 178KB of cloned CSS.
   The block itself should be retired properly at some point.

     tier 1  top-level items     Montserrat, lighter + uppercase + wide tracking
     tier 2  panel column heads  Fraunces, echoing the section headings
     tier 3  panel link grid     Montserrat regular, kept sans for scanning

   Colours, spacing and layout are deliberately left to the existing rules -
   this changes voice only.
   --------------------------------------------------------------------------- */

/* Tier 1 - top-level items, plus the language switcher so it stays in step. */
body #mega-menu-wrap-primary #mega-menu-primary.mega-menu > li.mega-menu-item > a.mega-menu-link,
body #mega-menu-wrap-primary #mega-menu-primary.mega-menu > li.wpr-language-switcher-menu-item .wpr-language-switcher-toggle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* Tier 2 - column headings inside the panels (For Sale, Thalang, Our Team...).
   Sentence case, with the same slight negative tracking as the site's headings. */
body #mega-menu-wrap-primary #mega-menu-primary.mega-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

/* Tier 3 - the link grid. Deliberately stays sans: a serif at this size in a
   dense multi-column grid turns fussy and is slower to scan. */
body #mega-menu-wrap-primary #mega-menu-primary.mega-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
}

/* The FontAwesome marks and dropdown chevrons are pseudo-elements on the link,
   so they inherit the tracking above and drift away from their labels. */
body #mega-menu-wrap-primary #mega-menu-primary.mega-menu li.mega-menu-item > a.mega-menu-link::before,
body #mega-menu-wrap-primary #mega-menu-primary.mega-menu li.mega-menu-item > a.mega-menu-link > span.mega-indicator::after {
    letter-spacing: normal !important;
}

/* Language switcher - match tier 1.
   Two separate elements need naming: the bar label is a <div
   class="wpr-language-switcher-label"> with text-transform:none set on it
   directly (so it ignored the uppercase inherited from the toggle button), and
   each dropdown row is a <button class="wpr-language-switcher-item"> that was
   still at the plugin default 16px/400. Thai and Chinese have no letter case,
   so uppercase is simply a no-op for those two.
   Scoped to the primary menu: the mobile header carries its own switcher
   instance with a different design. */
body #mega-menu-wrap-primary #mega-menu-primary.mega-menu li.wpr-language-switcher-menu-item .wpr-language-switcher-label,
body #mega-menu-wrap-primary #mega-menu-primary.mega-menu li.wpr-language-switcher-menu-item button.wpr-language-switcher-item {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}


/* ---------------------------------------------------------------------------
   Hero timed copy sequence + mobile play control.

   The lines are stacked on top of each other and cross-fade, so the hero never
   reflows and the copy reads as a sequence rather than accumulating. Pure CSS
   keyframes on purpose: FlyingPress delays JavaScript until user interaction,
   so anything JS-driven would leave the LCP element blank until someone taps.

   Timing: each line runs 4s (fade in, hold, fade out) with ~0.5s cross-fades.
   The last line ends at 24.4s, deliberately clear of the 25s mark where the
   video's own baked-in text and logo take over. Delays are all in one place
   below - retime them here when the new edit is cut.

   Runs once rather than looping with the 60s video: a CSS loop drifts against
   the video clock (0.33s per cycle), and re-running the copy every minute on a
   page people linger on gets irritating.
   --------------------------------------------------------------------------- */

.anan-hero__freeform {
    width: 100%;
}

.anan-hero__seq {
    position: relative;
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    min-height: 8.5rem;
}

.anan-hero__seq p.anan-hero__line {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    top: 50%;
    margin: 0;
    opacity: 0;
    color: #fff;
    text-align: center;
    text-wrap: balance;
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    font-size: clamp(1.3rem, 3.1vw, 2.5rem);
    line-height: 1.28;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 28px rgba(0, 0, 0, 0.38);
    animation-name: anan-hero-line;
    animation-duration: 4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: both;
}

@keyframes anan-hero-line {
      0% { opacity: 0; transform: translateY(-42%); }
     15% { opacity: 1; transform: translateY(-50%); }
     78% { opacity: 1; transform: translateY(-50%); }
    100% { opacity: 0; transform: translateY(-58%); }
}

/* Timings are generated per page by anan_hero_build_sequence() from the\n   Hero Copy admin tab - deliberately not duplicated here. */\n
/* Mobile play control - the poster stands in until the visitor asks for the
   video, so nothing multi-megabyte downloads unless they choose it. */
.anan-hero__play {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.22);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: #fff;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.anan-hero__play[hidden] {
    display: none !important;
}

.anan-hero__play svg {
    width: 20px;
    height: 20px;
    margin-left: 3px; /* optical centring of the triangle */
    fill: currentColor;
}

.anan-hero__play:hover,
.anan-hero__play:focus-visible {
    background: rgba(210, 193, 150, 0.30);
    border-color: #d2c196;
    transform: translateX(-50%) scale(1.06);
}

/* Someone who asked for less motion gets the whole message at once, and a
   still hero. */
@media (prefers-reduced-motion: reduce) {
    .anan-hero__seq {
        min-height: 0;
    }
    .anan-hero__seq p.anan-hero__line {
        position: static;
        opacity: 1;
        transform: none;
        animation: none;
        margin: 0 0 0.45em;
        font-size: clamp(1rem, 2.2vw, 1.5rem);
    }
    .anan-hero__play {
        transition: none;
    }
}