/*
 * Homzen theme overrides.
 *
 * Loaded AFTER css/style.css (see platform/themes/homzen/config.php), so rules
 * here win. Kept as a hand-written file rather than editing assets/sass/*.scss
 * so these fixes survive an `npm run prod` rebuild of the compiled stylesheet.
 */

/* ---------------------------------------------------------------------------
 * Publish-proofing: section heading alignment
 *
 * These two rules previously existed ONLY in the published
 * public/themes/homzen/css/style.css, never in the theme source it is generated
 * from. Every `php artisan cms:theme:assets:publish` regenerated that file from
 * source and silently deleted them, so headings jumped back to centre until the
 * file was restored from git.
 *
 * Re-declaring them here (custom.css IS the source, and is copied verbatim on
 * publish) makes them survive. They are duplicated in the current style.css,
 * which is harmless — identical declarations, and custom.css loads last.
 *
 * Audited at the same time: everything else in that file's custom block
 * (.form-search-amenities, .wd-search-form, .modern-card, .project-card-style8)
 * DOES exist in the theme source, and js/script.js is a superset of the
 * committed copy, so nothing else is lost on publish.
 * ------------------------------------------------------------------------- */
.box-title {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.box-title .text-subtitle,
.box-title .section-title,
.box-title p {
    text-align: left !important;
}

/* ---------------------------------------------------------------------------
 * Project / property detail — heading alignment
 *
 * `.header-property-detail` is styled as a white, 16px-radius card with 30px
 * padding. The page background is also white, so the card is invisible and that
 * padding just read as a stray 30px indent: the title sat at 45px while every
 * block below it ("About this home", the specs grid, features) sat at 15px.
 * Dropping the horizontal padding lines the title up with the rest of the page.
 * Vertical padding is kept so the block keeps its spacing.
 * ------------------------------------------------------------------------- */
/*
 * The block shipped with 30px padding AND, at wider breakpoints only, a
 * -30px horizontal margin that cancelled it. Below that breakpoint the margin
 * was dropped but the padding stayed, so the title sat 30px right of every
 * other block; killing only the padding then pulled it 30px LEFT at wide
 * widths, because the negative margin was left uncompensated.
 *
 * Zeroing both makes the block sit exactly in its column at every width. The
 * second selector matches the theme's own `.flat-property-detail .header-…`
 * responsive rule so we win on specificity rather than relying on order.
 */
.header-property-detail,
.flat-property-detail .header-property-detail {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Children that compensated for the old 30px inset would now hang off the left
   edge, so neutralise their negative margins too. */
.header-property-detail > .content-top {
    margin-left: 0;
    margin-right: 0;
}

/* ---------------------------------------------------------------------------
 * Project / property detail — specs list label weight
 *
 * The labels are already wrapped in <strong> in the markup, but the theme
 * resets <strong> to font-weight 400, so "Total Floors" and "13" rendered at
 * identical weight and the list read as one flat run of text. Giving the label
 * real weight (and leaving the value at 400) restores the label/value pairing.
 * Covers the built-in fields and the API custom fields alike — both use the
 * same `.col > strong` markup.
 * ------------------------------------------------------------------------- */
.style-zolo-overview .col strong {
    font-weight: 600;
}

.style-zolo-overview .col {
    font-weight: 400;
}

/* ---------------------------------------------------------------------------
 * Listing grids (projects / properties) — card spacing
 *
 * The grid carried Bootstrap's `g-3` gutter, but the cards' own margins made the
 * result uneven: 30px between columns yet only 16px between rows, so the grid
 * read as horizontally airy and vertically cramped. Matching the vertical gutter
 * to the horizontal one gives an even 30px in both directions.
 *
 * The section wrapper is `flat-section-v5` on the listing pages (plain
 * `flat-section` elsewhere), hence the attribute match on the ancestor.
 * ------------------------------------------------------------------------- */
[class*="flat-section"] .row.g-3[class*="row-cols-"] {
    --bs-gutter-x: 1.875rem; /* 30px */
    --bs-gutter-y: 1.875rem; /* 30px */
}

/* ---------------------------------------------------------------------------
 * Listing grids (projects / properties) — card count per row
 *
 * The blade templates only carry Bootstrap's row-cols-* up to `xl` (>=1200px),
 * so anything wider than that (laptop, desktop, 4K) was stuck at 3 cards per
 * row forever, and the site's actual breakpoints don't line up with
 * Bootstrap's stock sm/md/xl scale anyway. Overriding the column width
 * directly (higher specificity than Bootstrap's row-cols-* utilities, so it
 * wins regardless of source order) gives the same 4/3/2/1 step used on the
 * homepage "Featured New Homes" grid:
 *   >1440px          -> 4 cards
 *   1025px - 1440px  -> 3 cards
 *   576px  - 1024px  -> 2 cards
 *   <=575px          -> 1 card
 * ------------------------------------------------------------------------- */
[class*="flat-section"] .row.g-3[class*="row-cols-"] > * {
    width: 33.3333%;
}

@media (min-width: 1441px) {
    [class*="flat-section"] .row.g-3[class*="row-cols-"] > * {
        width: 25%;
    }
}

@media (max-width: 1024px) {
    [class*="flat-section"] .row.g-3[class*="row-cols-"] > * {
        width: 50%;
    }
}

@media (max-width: 575.98px) {
    [class*="flat-section"] .row.g-3[class*="row-cols-"] > * {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
 * Listing cards — FIXED HEIGHT
 *
 * >>> TWEAK THESE TWO NUMBERS <<<
 *
 * The theme shipped these cards as `height: max-content`, so each card was as
 * tall as its own text — a project with a "120 flats" line came out taller than
 * one without, giving the ragged bottoms. Pinning a height makes every card
 * identical; the image takes a fixed slice and the text area takes the rest.
 *
 * Card structure this relies on:
 *   .modern-card  ->  .archive-top (flex column)
 *                        ├─ a.images-group   (the photo)
 *                        └─ .modern-content  (price / name / location)
 *
 * Starting values are the current rendered sizes, so this is a no-op until you
 * change them. Text area = card height - image height (374 - 219 = 155px here).
 *
 * After editing run:  php artisan cms:theme:assets:publish
 * ------------------------------------------------------------------------- */
:root {
    --kash-card-height: 342px;       /* total card height  */
    --kash-card-image-height: 219px; /* photo area height  */
}

.property-item.modern-card,
.homeya-box.modern-card,
.modern-card {
    height: var(--kash-card-height) !important;
    align-self: stretch !important;
    /* The card shipped with its own 30px bottom margin, which stacked on top of
       the grid's 30px vertical gutter and made rows sit 60px apart while columns
       sat 30px apart. The gutter owns vertical spacing now. */
    margin-bottom: 0 !important;
}

/* let the inner column fill the pinned height */
.modern-card .archive-top {
    height: 100% !important;
}

/* Ensure project cards in the listing grid stretch evenly across columns and
   keep the same footer alignment. */
.page-template .modern-card,
[class*="flat-section"] .modern-card,
[class*="flat-section"] .col.d-flex > .property-item,
[class*="flat-section"] .col.d-flex > .homeya-box,
[class*="flat-section"] .col.d-flex > .modern-card {
    width: 100%;
    height: 100%;
}

/* Photo takes a fixed slice.
 *
 * `min-height: 0` is load-bearing: .images-group is a flex item in a column
 * flex container, so its default `min-height: auto` floors it at its content
 * size. The <img> carries `aspect-ratio: 16/9`, which made that floor 219px and
 * silently ignored any smaller height. Clearing the floor AND the image's
 * aspect-ratio lets the height below actually win. */
.modern-card .images-group {
    /* .images-group is a flex item inside a COLUMN flex container, so its size
       is driven by flex-basis — a plain `height` (even inline !important) is
       ignored here. Setting the basis via the `flex` shorthand is what actually
       works; height/max-height back it up if the flex context ever changes. */
    flex: 0 0 var(--kash-card-image-height) !important;
    height: var(--kash-card-image-height) !important;
    max-height: var(--kash-card-image-height) !important;
    min-height: 0 !important;
    overflow: hidden;
}

.homeya-box.modern-card .images-style {
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 0 !important;
}

.modern-card .images-group img {
    aspect-ratio: auto !important;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

/* text area absorbs whatever is left. overflow:hidden stops an unusually long
   project name from bursting out of the pinned height — if you see text being
   clipped, raise --kash-card-height rather than removing this. */
.modern-card .modern-content {
    flex: 1 1 auto !important;
    height: auto !important;
    overflow: hidden;
}


/* ===========================================================================
 * MOBILE / TABLET RESPONSIVE
 *
 * Everything below is inside max-width media queries, so screens >= 992px
 * (desktop / large) render EXACTLY as before — no desktop rule is touched.
 *   - <= 991.98px : tablet and below (md/sm)
 *   - <= 575.98px : phones (xs)
 * Scope is the main-site surfaces in the brief: the project listing and the
 * project/property detail page. (The preconstruction landing templates are
 * standalone documents that load only their own inline stylesheet, not this
 * file, and are already mobile-first — so nothing here targets them, and the
 * shared site header/footer chrome is left alone.)
 * ======================================================================== */

@media (max-width: 991.98px) {

    /* The theme's mobile header hamburger (.mobile-nav-toggler) is positioned a
       few px past its container, which gave every mobile page a ~13px sideways
       scroll that read as "not responsive". `clip` stops the stray horizontal
       scroll without creating a scroll container (so position:sticky/fixed keep
       working) and without restyling the header itself. Vertical scroll is
       untouched. `.table-responsive` keeps its own internal x-scroll. */
    html,
    body {
        overflow-x: clip;
    }

    /* Long website URLs in the specs list must wrap, never widen the page. */
    .style-zolo-overview .col a {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* --- Header Logo Mobile Responsive Size --- */
@media (max-width: 767.98px) {
    .main-header .logo img,
    .header-lower .logo img,
    .logo-box .logo img,
    .nav-logo img {
        max-height: 32px !important;
        width: auto !important;
        object-fit: contain;
    }
}

@media (max-width: 575.98px) {

    /* --- Project listing cards ---------------------------------------------
       One card per row already (Bootstrap row-cols-1). The fixed height is fine
       here, but on the narrowest phones a project with more spec lines can run
       tight, so let the card grow to its content instead of clipping. The photo
       keeps its fixed slice; only the card total is released. */
    .property-item.modern-card,
    .homeya-box.modern-card,
    .modern-card {
        height: auto !important;
        min-height: var(--kash-card-height);
    }
    .modern-card .modern-content {
        overflow: visible;
    }
}

/* --- Page Preloader Spinner ----------------------------------------------- */
.preload-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.simple-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid var(--primary-color, #db1d23);
    border-radius: 50%;
    animation: simple-spin 0.75s linear infinite;
}

@keyframes simple-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
 * Contact / Consult Form Input Field Fix (Active & High-Contrast Style)
 * ------------------------------------------------------------------------- */
.single-property-contact .ip-group input,
.single-property-contact .ip-group textarea,
.contact-form .ip-group input,
.contact-form .ip-group textarea,
#contact-form input,
#contact-form textarea {
    background-color: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 12px 16px !important;
    opacity: 1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.single-property-contact .ip-group input:focus,
.single-property-contact .ip-group textarea:focus,
.contact-form .ip-group input:focus,
.contact-form .ip-group textarea:focus,
#contact-form input:focus,
#contact-form textarea:focus {
    background-color: #ffffff !important;
    border-color: #0392a6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(3, 146, 166, 0.15) !important;
}

/* Placeholder Contrast Fix */
.single-property-contact .ip-group input::placeholder,
.single-property-contact .ip-group textarea::placeholder,
.contact-form .ip-group input::placeholder,
.contact-form .ip-group textarea::placeholder,
#contact-form input::placeholder,
#contact-form textarea::placeholder {
    color: #4b5563 !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

.single-property-contact .ip-group,
.contact-form .ip-group {
    margin-bottom: 1rem !important;
}

/* ---------------------------------------------------------------------------
 * Listing Pagination Spacing Fix
 * ------------------------------------------------------------------------- */
.wd-navigation,
.flat-pagination {
    margin-top: 1.5rem !important;
    margin-bottom: 1.25rem !important;
}