/* ========================================
   Brominon House Hunting — Main Styles
   Colors: Murram Red #B5502E
           Deep Ink #1C1B19
           Warm Stone #EFEAE1
   Fonts: Fraunces (headings), Inter (body)
   ======================================== */

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --murram: #B5502E;
    --murram-dark: #9a4628;
    --ink: #1C1B19;
    --stone: #EFEAE1;
    --stone-dark: #d4c9b8;
    --whatsapp: #25D366;
    --white: #FFFFFF;
    --gray-light: #f5f0e8;
    --gray: #999;
    --gray-dark: #666;
    --radius: 8px;
    --shadow: 0 4px 24px rgba(0,0,0,0.06);
    --shadow-hover: 0 8px 32px rgba(0,0,0,0.10);
    --transition: all 0.25s ease;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--stone);
    color: var(--ink);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* long emails / URLs / listing references must never push the layout wider
       than the screen on phones */
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    line-height: 1.2;
}

a {
    color: var(--murram);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--murram-dark);
}

img {
    max-width: 100%;
    height: auto;
}

/* ---------- Responsive media / content hardening ---------- */
svg, video, canvas, iframe, embed, object {
    max-width: 100%;
}

/* Tables and code blocks scroll inside their own box instead of stretching
   the page on narrow screens */
pre, code {
    max-width: 100%;
    overflow-x: auto;
}

table {
    max-width: 100%;
}

.app-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    width: 100%;
}

/* ---------- Shared page scaffolding ----------
   These are used by the static pages (about, faq, contact, privacy, terms) and
   by every dashboard. Defined here so those pages get the same, responsive
   frame even when they do not ship their own <style> block. Page-level rules
   always win, because page <style> blocks are rendered after this file. */
.form-page {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.page-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.page-subtitle {
    color: var(--gray-dark);
    margin-bottom: 1.5rem;
}

.dashboard-section {
    background: var(--white);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--stone-dark);
    margin-bottom: 1.5rem;
}

.dashboard-section h2 {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ---------- Page banner ----------
   Every page except the homepage opens with the same banner: a photo in a
   rounded card with the page heading over it. These rules live here rather than
   in a page <style> block because seven pages share them.

   Two things are deliberate:
   1. The photo is a real <img> (lazy + async), not a CSS background. A CSS
      background is fetched the moment the rule matches and cannot be deferred,
      so on a slow connection it competes with the fonts and the copy, and the
      heading can end up painted over an empty card. The <img> is only requested
      once the banner is laid out, while the card's flat ink background and the
      heading paint immediately - user interface first, photo second.
   2. The crop is set per page with object-position in source percentages, and
      overridden under 640px. The sources run from 0.66 (portrait high-rise) to
      2.89 (ultra-wide playroom) against banner shapes of 2.4 on desktop and 1.6
      on phones, so one global value would decapitate half of them. The numbers
      and the reasoning are in partials/pageHero.ejs. */
.page-hero {
    position: relative;
    isolation: isolate;      /* keeps the photo's negative z-index inside the card */
    display: flex;
    align-items: flex-end;   /* copy sits low, so the middle of the photo stays visible */
    aspect-ratio: 12 / 5;
    min-height: 190px;
    margin-bottom: 1.75rem;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--ink);
}

/* Shorter, wider banner for the pages whose own UI - the search filter bar, the
   saved listings - has to stay above the fold. A fixed aspect ratio rather than
   a max-height, because a max-height silently changes the effective ratio (and
   so the amount of the photo that gets cropped) as the window narrows. */
.page-hero--compact {
    aspect-ratio: 4 / 1;
    min-height: 150px;
}

.page-hero-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-pos, 50% 50%);
}

/* Fade the photo in over the ink card once it decodes. Gated on .js, which an
   inline script in partials/header.ejs sets before the first paint, so with
   JavaScript disabled the photo is simply visible instead of invisible forever. */
.js .page-hero-img {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.js .page-hero-img.is-loaded {
    opacity: 1;
}

.page-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(28, 27, 25, 0.28) 0%, rgba(28, 27, 25, 0.42) 45%, rgba(28, 27, 25, 0.76) 100%);
}

/* Stone-on-photo heading. .page-title / .page-subtitle are re-scoped with two
   classes on purpose: a page's own <style> block is rendered after this file
   and wins on equal specificity, and several pages set a dark colour there. */
.page-hero .page-title {
    color: var(--stone);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
    margin-bottom: 0.25rem;
}

.page-hero .page-subtitle {
    color: rgba(239, 234, 225, 0.92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
    margin-bottom: 0;
    max-width: 640px;
}

@media (max-width: 640px) {
    .page-hero {
        aspect-ratio: 8 / 5;
        min-height: 180px;
        padding: 1.25rem 1.125rem;
        border-radius: 10px;
        margin-bottom: 1.25rem;
    }

    .page-hero--compact {
        aspect-ratio: 16 / 9;
    }

    .page-hero-img {
        object-position: var(--hero-pos-sm, var(--hero-pos, 50% 50%));
    }
}

/* ---------- Typography ---------- */
.text-murram { color: var(--murram); }
.text-ink { color: var(--ink); }
.text-stone { color: var(--stone); }
.text-gray { color: var(--gray); }
.text-gray-dark { color: var(--gray-dark); }

.bg-murram { background: var(--murram); }
.bg-ink { background: var(--ink); }
.bg-stone { background: var(--stone); }
.bg-white { background: var(--white); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn-primary {
    background: var(--murram);
    color: var(--stone);
}

.btn-primary:hover {
    background: var(--murram-dark);
    color: var(--stone);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(181, 80, 46, 0.3);
}

.btn-outline {
    background: transparent;
    color: var(--murram);
    border: 2px solid var(--murram);
}

.btn-outline:hover {
    background: var(--murram);
    color: var(--stone);
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
}

.btn-ghost:hover {
    background: rgba(181, 80, 46, 0.08);
}

.btn-success {
    background: var(--whatsapp);
    color: white;
}

.btn-success:hover {
    background: #1da851;
    color: white;
}

.btn-danger {
    background: #dc2626;
    color: white;
}

.btn-danger:hover {
    background: #b91c1c;
    color: white;
}

/* ---------- Cards ---------- */
.card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--stone-dark);
    overflow: hidden;
    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.card-body {
    padding: 1.25rem;
}

.card-title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.card-text {
    color: var(--gray-dark);
    font-size: 0.875rem;
}

/* ---------- Property Cards ---------- */
.property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.property-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--stone-dark);
    transition: var(--transition);
}

.property-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.property-card-image {
    position: relative;
    padding-top: 66.67%;
    background: var(--stone-dark);
    overflow: hidden;
}

.property-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.property-card-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--murram);
    color: var(--stone);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.property-card-body {
    padding: 1rem;
}

.property-card-price {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--murram);
}

.property-card-price span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--gray);
}

.property-card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--gray-dark);
    margin-top: 0.5rem;
}

.property-card-meta i {
    margin-right: 0.25rem;
}

/* Titles, locations and listing links are rendered inside <a class="property-card">
   on most pages, so reset the link colour and keep long titles wrapping. */
.property-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.property-card:hover {
    color: inherit;
}

.property-card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    overflow-wrap: anywhere;
}

.property-card-location {
    font-size: 0.8rem;
    color: var(--gray-dark);
    margin-bottom: 0.25rem;
}

.property-card-location i {
    color: var(--murram);
    margin-right: 0.25rem;
}

/* ---------- Forms ---------- */
.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    color: var(--ink);
}

.form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 2px solid var(--stone-dark);
    border-radius: var(--radius);
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    transition: var(--transition);
    background: var(--white);
}

.form-control:focus {
    outline: none;
    border-color: var(--murram);
    box-shadow: 0 0 0 3px rgba(181, 80, 46, 0.15);
}

.form-control.error {
    border-color: #dc2626;
}

.form-control.error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.form-control::placeholder {
    color: var(--gray);
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

/* ---------- Alerts / Flash Messages ---------- */
.alert {
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.875rem;
    border-left: 4px solid transparent;
}

.alert-success {
    background: #ecfdf5;
    border-color: #059669;
    color: #065f46;
}

.alert-error {
    background: #fef2f2;
    border-color: #dc2626;
    color: #991b1b;
}

.alert-warning {
    background: #fffbeb;
    border-color: #d97706;
    color: #92400e;
}

.alert-info {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1e40af;
}

/* ---------- Tags & Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-verified {
    background: #059669;
    color: white;
}

.badge-agent {
    background: var(--murram);
    color: var(--stone);
}

.badge-available {
    background: #059669;
    color: white;
}

.badge-rented {
    background: var(--gray);
    color: white;
}

/* ---------- Utility ---------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

.text-center { text-align: center; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.rounded { border-radius: var(--radius); }
.shadow { box-shadow: var(--shadow); }

.w-full { width: 100%; }
.h-full { height: 100%; }

/* ==========================================================
   Responsive layer
   Breakpoints: 1440px+ / 1800px+ (large monitors),
                1024px, 768px (tablets), 640px, 480px, 400px (phones)
   ========================================================== */

/* ---------- Phones (landscape) and small tablets ---------- */
@media (max-width: 768px) {
    .property-grid {
        grid-template-columns: 1fr 1fr;
    }

    .main-content {
        padding: 1.25rem;
    }
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
    .main-content {
        padding: 1rem;
    }

    /* 16px inputs stop iOS Safari from zooming when a field is focused.
       .form-control is listed explicitly because the class rule above would
       otherwise win on specificity. */
    .form-control,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px;
    }

    /* comfortable touch targets */
    .btn:not(.btn-sm) {
        min-height: 44px;
    }

    .alert {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    .card-body,
    .property-card-body {
        padding: 1rem;
    }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
    .property-grid {
        grid-template-columns: 1fr;
    }

    .form-page,
    .main-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .btn {
        justify-content: center;
    }

    .property-card-meta {
        gap: 0.5rem;
        flex-wrap: wrap;
    }
}

/* ---------- Very small phones (iPhone SE, Galaxy A0x) ---------- */
@media (max-width: 400px) {
    .main-content {
        padding: 0.75rem;
    }

    .dashboard-section,
    .card-body {
        padding: 1rem;
    }
}

/* ---------- Large screens: give the layout more room ---------- */
@media (min-width: 1440px) {
    .main-content {
        max-width: 1320px;
    }
}

@media (min-width: 1800px) {
    /* The whole layout is rem-based, so a slightly larger root size scales
       typography, spacing and grids up for big monitors. */
    html {
        font-size: 17px;
    }

    .main-content {
        max-width: 1480px;
    }
}

/* ========================================
   Pagination — shared partial (views/partials/pagination.ejs)
   Rendered by every listing page: admin users/audit/flags, moderation
   queues, property search, dashboard listings, inboxes, reviews and
   favourites. Views that already declare their own .pagination/.page-link
   rules stay compatible: they only re-declare the same visual treatment.
   ======================================== */
.pagination-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 1.75rem 0 0.5rem;
}

.pagination-info {
    font-size: 0.8rem;
    color: var(--gray-dark, #666);
    text-align: center;
}

.pagination-info strong {
    font-weight: 600;
    color: var(--ink, #1C1B19);
}

.pagination-pageof {
    color: var(--gray, #999);
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    border: 1px solid var(--stone-dark, #d4c9b8);
    border-radius: 6px;
    background: var(--white, #fff);
    color: var(--ink, #1C1B19);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1;
    transition: var(--transition, all 0.25s ease);
}

.page-link:hover:not(.disabled):not(.active) {
    background: var(--gray-light, #f5f0e8);
    border-color: var(--murram, #B5502E);
}

.page-link.active {
    background: var(--murram, #B5502E);
    border-color: var(--murram, #B5502E);
    color: var(--white, #fff);
    font-weight: 600;
}

.page-link.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.page-ellipsis {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 20px;
    height: 36px;
    color: var(--gray, #999);
    font-size: 0.875rem;
}

@media (max-width: 480px) {
    .page-link {
        min-width: 32px;
        height: 32px;
        padding: 0 0.4rem;
        font-size: 0.8rem;
    }

    .page-ellipsis {
        height: 32px;
    }

    /* Keep the arrow affordance, drop the word on very narrow screens */
    .page-link .page-link-text {
        display: none;
    }
}