/*
 * site.css — small hand-written overrides that don't belong as inline
 * Tailwind utility classes. Loaded after the Tailwind CDN script so it can
 * override CDN-generated utility classes where needed.
 */

[x-cloak] {
    display: none !important;
}

/* Never allow the page to be wider than the screen (kills the "narrow strip /
   zoomed-out" effect on phones caused by any stray wide/off-screen element).
   IMPORTANT: overflow-x on body must be `clip`, not `hidden` — `hidden` turns
   the body into its own scroll container, which silently disables
   position:sticky (the sticky nav). `clip` blocks sideways overflow without
   that side effect; the `hidden` line is only a fallback for old browsers. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

/* Any word too long for its container wraps instead of being clipped at the
   screen edge. This covers the cases Tailwind's break-words misses on mobile:
   text inside line-clamp boxes, post bodies, and flex/grid children. */
body {
    overflow-wrap: anywhere;
}

/* Images never overflow their container. (Tailwind's h-full class still wins
   for the fixed-ratio card/gallery images, so object-cover fills keep working.) */
img {
    max-width: 100%;
}

/* Rich-text post bodies (Quill output) get readable spacing without
   requiring the Tailwind Typography plugin config to be tuned per element. */
.prose img {
    border-radius: 0.75rem;
}

.prose a {
    color: #b8863f; /* gold-600 — matches the editorial accent */
    text-decoration: underline;
}

/* Post bodies use the readable serif for a magazine feel. */
.prose {
    font-family: 'Lora', Georgia, serif;
}

/* ---------------------------------------------------------------------------
   Smart top bar: the masthead (logo + menu) stays pinned at ALL times; only
   the Malta/Sicily region bar tucks away while scrolling down and drops back
   the instant the visitor scrolls up. site.js measures the region bar and
   stores its height in --rb-h, then toggles .topbar-hidden by direction.
--------------------------------------------------------------------------- */
#site-topbar {
    transition: transform 0.25s ease;
}
#site-topbar.topbar-hidden {
    /* Shift up by exactly the region bar's height: the region bar slides
       out of the viewport while the masthead stays pinned to the top. */
    transform: translateY(calc(-1 * var(--rb-h, 0px)));
}

/* ---------------------------------------------------------------------------
   About page — island division blocks (Malta / Sicily).

   Written as plain CSS on purpose: assets/css/tailwind.css is a PRE-COMPILED
   static build with no Node toolchain in this repo, so utilities it does not
   already contain (order-*, aspect-ratio, gradients) cannot be added from
   markup. Everything below is scoped to the .island-* classes used by
   templates/page-about.php.
--------------------------------------------------------------------------- */
.island-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

/* Side-by-side from tablet up (768px). Below that the photo always comes
   first and spans the column, whichever division it is. Splitting at 768
   rather than 1024 matters on iPad portrait: in one column the 4:3 portrait
   would otherwise render ~700px wide and dominate the screen. */
@media (min-width: 768px) {
    .island-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        /* Top-align rather than centre: the text column is a good deal taller
           than the 4:3 portrait, and a vertically centred photo just floats
           with dead space above and below it. */
        align-items: start;
    }
    /* Sicily mirrors Malta: photo moves to the right column. */
    .island-grid--flip .island-media {
        order: 2;
    }
}

@media (min-width: 1024px) {
    .island-grid {
        gap: 3.5rem;
    }
}

.island-photo {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid rgb(226 222 211);
    background: rgb(241 240 234);
}

.island-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

/* Name plate over the bottom of the portrait. The gradient keeps the text
   readable regardless of what the photo looks like behind it. */
.island-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem 1.5rem 1.25rem;
    background: linear-gradient(to top, rgba(10, 26, 43, 0.88) 0%, rgba(10, 26, 43, 0.55) 45%, rgba(10, 26, 43, 0) 100%);
    color: rgb(248 247 243);
}

.island-caption-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.2;
}

.island-caption-role {
    margin-top: 0.15rem;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgb(226 163 108);
}

/* Numbered rule above each division heading ("01 / Malta"). */
.island-eyebrow {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.island-eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgb(226 222 211);
}

.island-list {
    display: grid;
    gap: 0.85rem;
}

.island-list li {
    display: flex;
    gap: 0.7rem;
    line-height: 1.6;
}

.island-list li::before {
    content: '';
    flex: 0 0 auto;
    width: 0.45rem;
    height: 0.45rem;
    margin-top: 0.55rem;
    border-radius: 9999px;
    background: rgb(208 122 69); /* gold-500 */
}

.js-lead-form-message.is-success {
    color: #166534;
}

.js-lead-form-message.is-error {
    color: #991b1b;
}

/* ---------------------------------------------------------------------------
   Image lightbox (property galleries). Static CSS on purpose: the overlay is
   injected by JS after page load, so Tailwind's CDN scanner would never see
   its classes — plain CSS avoids that problem entirely.
--------------------------------------------------------------------------- */
.lb-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(10, 26, 43, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-img {
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 7rem);
    width: auto;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lb-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: rgba(241, 240, 234, 0.12);
    color: #f1f0ea;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border: 0;
    user-select: none;
}
.lb-btn:hover { background: rgba(241, 240, 234, 0.25); }

.lb-close { top: 1rem; right: 1rem; }
.lb-prev  { left: 0.5rem;  top: 50%; transform: translateY(-50%); }
.lb-next  { right: 0.5rem; top: 50%; transform: translateY(-50%); }

.lb-count {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(241, 240, 234, 0.7);
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
}

/* A bit more breathing room for the arrows on larger screens. */
@media (min-width: 640px) {
    .lb-prev { left: 1.25rem; }
    .lb-next { right: 1.25rem; }
    .lb-img  { max-width: 88vw; }
}