/*
 * Alberton Guesthouse — Public Hospitality UI Layer
 * Visual-only stylesheet. It intentionally does not change booking,
 * pricing, availability, payment, CMS or database behaviour.
 */

:root {
    --agh-ink: #24271f;
    --agh-ink-soft: #5f6456;
    --agh-forest: #373b30;
    --agh-forest-deep: #24281f;
    --agh-olive: #666d55;
    --agh-line: #dedfd5;
    --agh-line-soft: #ecece5;
    --agh-paper: #fffefa;
    --agh-warm: #f8f5ee;
    --agh-sand: #efe8da;
    --agh-success: #45634c;
    --agh-danger: #8a4740;
    --agh-warning: #88652e;
    --agh-radius-sm: 10px;
    --agh-radius: 14px;
    --agh-radius-lg: 20px;
    --agh-shadow: 0 14px 38px rgba(36, 39, 31, .07);
}

html { scroll-behavior: smooth; }

body[data-agh-surface="public"] {
    background: var(--agh-warm) !important;
    color: var(--agh-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body[data-agh-surface="public"] ::selection {
    background: var(--agh-forest);
    color: #fff;
}

body[data-agh-surface="public"] .font-display,
body[data-agh-surface="public"] h1,
body[data-agh-surface="public"] h2 {
    text-wrap: balance;
}

body[data-agh-surface="public"] p {
    text-wrap: pretty;
}

body[data-agh-surface="public"] img {
    background: #eee9df;
}

/* Navigation: hospitality-first, quiet and grounded. */
body[data-agh-surface="public"] > header,
body[data-agh-surface="public"] header.sticky {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body[data-agh-surface="public"]:not([data-agh-page="home"]) header:not([class*="bg-brand-950"]) {
    background-color: rgba(255, 255, 255, .98) !important;
    border-color: var(--agh-line) !important;
}

body[data-agh-surface="public"] header img,
body[data-agh-surface="public"] header a img,
body[data-agh-surface="public"] header a > *,
body[data-agh-surface="public"] footer img,
body[data-agh-surface="public"] footer a img,
body[data-agh-surface="public"] footer a > * {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body[data-agh-surface="public"] header img,
body[data-agh-surface="public"] header a img,
body[data-agh-surface="public"] footer img,
body[data-agh-surface="public"] footer a img {
    border: 0 !important;
    object-fit: contain;
}

body[data-agh-surface="public"] header nav a {
    letter-spacing: -.01em;
}

/* Accessible focus states. */
body[data-agh-surface="public"] a:focus-visible,
body[data-agh-surface="public"] button:focus-visible,
body[data-agh-surface="public"] input:focus-visible,
body[data-agh-surface="public"] select:focus-visible,
body[data-agh-surface="public"] textarea:focus-visible,
body[data-agh-surface="public"] summary:focus-visible {
    outline: 3px solid rgba(102, 109, 85, .28) !important;
    outline-offset: 3px !important;
}

/* Buttons: fewer pills, stronger hierarchy, calmer surfaces. */
body[data-agh-surface="public"] a[class*="bg-brand-950"],
body[data-agh-surface="public"] button[class*="bg-brand-950"],
body[data-agh-surface="public"] a[class*="bg-brand-900"],
body[data-agh-surface="public"] button[class*="bg-brand-900"] {
    border-radius: var(--agh-radius-sm) !important;
    box-shadow: none !important;
}

body[data-agh-surface="public"] a[class*="bg-white"][class*="rounded-full"],
body[data-agh-surface="public"] button[class*="bg-white"][class*="rounded-full"] {
    border-radius: var(--agh-radius-sm) !important;
}

body[data-agh-surface="public"] a[class*="shadow"],
body[data-agh-surface="public"] button[class*="shadow"] {
    box-shadow: none;
}

/* Forms are intentionally practical on mobile. */
body[data-agh-surface="public"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body[data-agh-surface="public"] select,
body[data-agh-surface="public"] textarea {
    min-height: 44px;
    border-color: var(--agh-line) !important;
    border-radius: var(--agh-radius-sm) !important;
}

body[data-agh-surface="public"] textarea { min-height: 112px; }

body[data-agh-surface="public"] input::placeholder,
body[data-agh-surface="public"] textarea::placeholder {
    color: #8b8f83;
}

/* Public content surfaces: restrained depth instead of SaaS card stacks. */
body[data-agh-surface="public"] main section[class*="border"][class*="bg-white"],
body[data-agh-surface="public"] main div[class*="border"][class*="bg-white"] {
    box-shadow: none;
}

body[data-agh-surface="public"] main section[class*="shadow-soft"],
body[data-agh-surface="public"] main div[class*="shadow-soft"] {
    box-shadow: var(--agh-shadow) !important;
}

/* Homepage hero: still image-led, but no oversized landing-page theatre. */
body[data-agh-page="home"] #home {
    min-height: clamp(620px, 78vh, 760px) !important;
}

body[data-agh-page="home"] #home > div:last-child {
    min-height: clamp(620px, 78vh, 760px) !important;
}

body[data-agh-page="home"] #home h1 {
    max-width: 760px;
    font-size: clamp(2.9rem, 6vw, 4.45rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
}

body[data-agh-page="home"] #home .hero-overlay {
    background: linear-gradient(90deg, rgba(25, 27, 22, .78) 0%, rgba(25, 27, 22, .43) 52%, rgba(25, 27, 22, .12) 100%) !important;
}

body[data-agh-page="home"] #home [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Availability is a booking tool, not a floating decorative card. */
body[data-agh-page="home"] #availability > div > div {
    border-radius: var(--agh-radius-lg) !important;
    border-color: var(--agh-line) !important;
    box-shadow: 0 18px 48px rgba(36, 39, 31, .10) !important;
}

body[data-agh-page="home"] #availability label {
    border-radius: var(--agh-radius-sm) !important;
}

body[data-agh-page="home"] #availability label > div:first-child {
    background: transparent !important;
    border: 1px solid var(--agh-line-soft);
}

/* Amenities become an editorial fact list rather than six AI-style feature cards. */
body[data-agh-page="home"] #amenities > div > div.mt-12 {
    overflow: visible !important;
    gap: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--agh-line) !important;
    border-bottom: 1px solid var(--agh-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body[data-agh-page="home"] #amenities > div > div.mt-12 > div {
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 1.75rem !important;
    border-bottom: 1px solid var(--agh-line-soft);
}

body[data-agh-page="home"] #amenities > div > div.mt-12 > div > div:first-child {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid var(--agh-line);
    background: var(--agh-paper) !important;
}

body[data-agh-page="home"] #amenities h3 { margin-top: 1.15rem !important; }

/* Gallery should feel photographic, not like a rounded-card grid. */
body[data-agh-page="home"] #gallery [class*="overflow-hidden"][class*="rounded"] {
    border-radius: var(--agh-radius) !important;
}

body[data-agh-page="gallery"] main [class*="rounded-[22px]"] {
    border-radius: var(--agh-radius) !important;
}

/* Booking / availability pages: summary remains visible but visually subordinate. */
body[data-agh-page="book"] main,
body[data-agh-page="booking-confirmation"] main,
body[data-agh-page="day-visit-book"] main,
body[data-agh-page="day-visit-confirmation"] main,
body[data-agh-page="rooms"] main,
body[data-agh-page="room"] main {
    background: var(--agh-warm);
}

body[data-agh-surface="public"] main section[class*="rounded-["],
body[data-agh-surface="public"] main article[class*="rounded-["],
body[data-agh-surface="public"] main div[class*="rounded-["][class*="border"] {
    border-radius: var(--agh-radius-lg) !important;
}

/* Price blocks: numbers read first, decoration second. */
body[data-agh-surface="public"] [class*="font-display"][class*="text-4xl"],
body[data-agh-surface="public"] [class*="font-display"][class*="text-5xl"] {
    letter-spacing: -.03em !important;
}

/* Status alerts remain unmistakable without neon colour. */
body[data-agh-surface="public"] [class*="bg-green-50"] {
    background-color: #edf3ed !important;
    color: #31543c !important;
}

body[data-agh-surface="public"] [class*="bg-red-50"] {
    background-color: #f8eeee !important;
    color: #7a3936 !important;
}

body[data-agh-surface="public"] [class*="bg-amber-50"] {
    background-color: #f7f1e4 !important;
    color: #765925 !important;
}

/* Policy/legal pages read like hospitality information, not legal-product cards. */
body[data-agh-page="terms"] main,
body[data-agh-page="privacy"] main,
body[data-agh-page="refunds"] main,
body[data-agh-page="house-rules"] main {
    background: var(--agh-warm);
}

body[data-agh-page="terms"] main section:first-child,
body[data-agh-page="privacy"] main section:first-child,
body[data-agh-page="refunds"] main section:first-child,
body[data-agh-page="house-rules"] main section:first-child {
    background: var(--agh-paper) !important;
}

/* Footer: useful, not oversized. */
body[data-agh-surface="public"] footer {
    border-color: rgba(255, 255, 255, .10);
}

/* Lightbox keeps attention on the photography. */
body[data-agh-page="gallery"] dialog {
    border-radius: var(--agh-radius) !important;
}

/* Mobile-specific hospitality priorities. */
@media (max-width: 767px) {
    body[data-agh-page="home"] #home {
        min-height: 650px !important;
    }

    body[data-agh-page="home"] #home > div:last-child {
        min-height: 650px !important;
        padding-bottom: 7rem !important;
    }

    body[data-agh-page="home"] #availability {
        margin-top: -3.25rem !important;
    }

    body[data-agh-page="home"] #availability > div > div {
        padding: 1rem !important;
    }

    body[data-agh-page="home"] #amenities > div > div.mt-12 > div {
        padding: 1.5rem 0 !important;
    }

    body[data-agh-surface="public"] main h1 {
        font-size: clamp(2.25rem, 11vw, 3.25rem) !important;
        line-height: 1.04 !important;
    }

    body[data-agh-surface="public"] main h2 {
        line-height: 1.08;
    }

    body[data-agh-surface="public"] [class*="py-24"] {
        padding-top: 4.25rem !important;
        padding-bottom: 4.25rem !important;
    }

    body[data-agh-surface="public"] [class*="rounded-[30px]"] {
        border-radius: var(--agh-radius) !important;
    }
}

@media (min-width: 640px) {
    body[data-agh-page="home"] #amenities > div > div.mt-12 > div {
        padding-top: 1.8rem !important;
        padding-bottom: 1.8rem !important;
    }

    body[data-agh-page="home"] #amenities > div > div.mt-12 > div:nth-child(odd) {
        border-right: 1px solid var(--agh-line-soft);
    }
}

@media (min-width: 1024px) {
    body[data-agh-page="home"] #amenities > div > div.mt-12 > div {
        border-right: 1px solid var(--agh-line-soft);
    }

    body[data-agh-page="home"] #amenities > div > div.mt-12 > div:nth-child(3n) {
        border-right: 0;
    }

    body[data-agh-page="home"] #amenities > div > div.mt-12 > div:nth-last-child(-n+2) {
        border-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-agh-surface="public"] *,
    body[data-agh-surface="public"] *::before,
    body[data-agh-surface="public"] *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}