/* =====================================================================
   SITE DESIGN SYSTEM — NHÀ HÀNG PHÌ LŨ
   --------------------------------------------------------------------
   Custom CSS only. No UI framework. Light, editorial luxury palette.
   Phase 11 polish:
     * Two wedding logos in the header (side-by-side, intrinsic aspect)
     * Floating Facebook + Zalo contact bubbles
     * Slightly thicker/bolder typography for stronger hierarchy
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
    /* Color palette — light, warm, refined */
    --color-ivory: #F8F6F0;
    --color-cream: #F1EBDD;
    --color-paper: #FFFDF9;
    --color-card-cream: #F1E2B6;
    --color-brown: #4A3A2E;
    --color-muted-brown: #8A7866;
    --color-champagne: #CDBA9B;
    --color-border: #D9CDBB;
    --color-ink: #2C241C;
    --color-line: #E5DCC9;

    /* Typography — Phase 11: weights nudged slightly heavier for
       a stronger editorial hierarchy. Body copy stays readable. */
    --font-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    /* Type scale */
    --fs-eyebrow: 0.7rem;
    --fs-body-sm: 0.875rem;
    --fs-body: 1rem;
    --fs-body-lg: 1.0625rem;
    --fs-h6: 1rem;
    --fs-h5: 1.25rem;
    --fs-h4: 1.5rem;
    --fs-h3: 2rem;
    --fs-h2: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
    --fs-h1: clamp(2.5rem, 1.6rem + 4vw, 4.75rem);

    /* Spacing scale (8px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;
    --space-11: 6rem;
    --space-12: 8rem;

    /* Layout */
    --container-max: 1280px;
    --container-px: clamp(1rem, 4vw, 2.5rem);

    /* Motion */
    --ease-soft: cubic-bezier(0.4, 0.1, 0.2, 1);
    --dur-fast: 180ms;
    --dur-base: 280ms;
    --dur-slow: 520ms;
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background-color: var(--color-paper);
    color: var(--color-brown);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.7;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---------- Page-scoped backgrounds ----------
   The homepage uses a warm cream-yellow page tint so the venue cards
   (which carry the same cream-yellow "paper" inside their gold border)
   read as physical invitation cards resting on a single surface —
   the cream of the card and the cream of the page flow into each
   other, leaving the champagne border + chamfered inner frame +
   corner dots to do the invitation work. Other pages keep the
   default paper background. */
body.page-home {
    background-color: var(--color-card-cream);
}

img,
picture,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-soft);
}

a:hover,
a:focus-visible {
    color: var(--color-ink);
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.18;
    color: var(--color-ink);
    letter-spacing: -0.005em;
}

p {
    margin: 0;
}

/* ---------- Accessibility ---------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    z-index: 1000;
    padding: var(--space-2) var(--space-4);
    background: var(--color-brown);
    color: var(--color-paper);
    border-radius: 2px;
    font-family: var(--font-sans);
    font-size: var(--fs-body-sm);
    transition: top var(--dur-fast) var(--ease-soft);
}

.skip-link:focus-visible {
    top: var(--space-3);
    color: var(--color-paper);
}

:focus-visible {
    outline: 2px solid var(--color-brown);
    outline-offset: 3px;
}

body.is-keyboard :focus:not(:focus-visible) {
    outline: none;
}

/* ---------- Layout helpers ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-px);
    padding-right: var(--container-px);
}

main {
    display: block;
}

/* ---------- Typography helpers ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-muted-brown);
    margin: 0 0 var(--space-6);
}

.eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    background-color: var(--color-champagne);
}

.section-title {
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: 1.12;
    color: var(--color-ink);
    letter-spacing: -0.005em;
}

.section-title span {
    display: block;
}

.section-head {
    max-width: 680px;
}

.section-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-head--center .eyebrow {
    justify-content: center;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-7);
    font-family: var(--font-sans);
    font-size: var(--fs-body-sm);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-soft),
                color var(--dur-base) var(--ease-soft),
                border-color var(--dur-base) var(--ease-soft),
                transform var(--dur-base) var(--ease-soft);
}

.btn__arrow {
    display: inline-block;
    transition: transform var(--dur-base) var(--ease-soft);
}

.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
    transform: translateX(5px);
}

.btn--primary {
    background-color: var(--color-brown);
    color: var(--color-paper);
    border-color: var(--color-brown);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background-color: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-paper);
}

.btn--outline {
    background-color: transparent;
    color: var(--color-brown);
    border-color: var(--color-brown);
}

.btn--outline:hover,
.btn--outline:focus-visible {
    background-color: var(--color-brown);
    color: var(--color-paper);
}

/* ---------- Link with arrow ---------- */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--fs-body-sm);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-brown);
    border-bottom: 1px solid var(--color-border);
    transition: border-color var(--dur-base) var(--ease-soft),
                color var(--dur-base) var(--ease-soft);
}

.link-arrow span {
    transition: transform var(--dur-base) var(--ease-soft);
}

.link-arrow:hover,
.link-arrow:focus-visible {
    color: var(--color-ink);
    border-bottom-color: var(--color-ink);
}

.link-arrow:hover span,
.link-arrow:focus-visible span {
    transform: translateX(5px);
}

.link-arrow--inline {
    margin-top: var(--space-5);
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--color-paper);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: saturate(110%);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    flex-wrap: wrap;
}

/* Brand area: two logos + brand text */
.site-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    line-height: 1;
    text-decoration: none;
    color: var(--color-ink);
    min-width: 0;
}

/* Logos: each image preserves its intrinsic aspect ratio. The
   taller Golden logo sits beside the PhiLu logo at a unified cap so
   the pair looks balanced at every viewport. */
.site-brand-logos {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.4rem, 0.8vw, 0.75rem);
    flex-shrink: 0;
}

.site-brand-logos__img {
    display: block;
    height: 88px;
    width: auto;
    max-width: none;
    transition: transform var(--dur-base) var(--ease-soft),
                opacity var(--dur-base) var(--ease-soft);
}

.site-brand:hover .site-brand-logos__img,
.site-brand:focus-visible .site-brand-logos__img {
    transform: translateY(-1px);
}

/* Compact header on small screens — keep both visible but trim size */
@media (max-width: 575.98px) {
    .site-header__inner {
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }

    .site-brand-logos__img {
        height: 68px;
    }
}

/* Nav toggle (mobile) */
.site-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
}

.site-nav-toggle__bar {
    display: block;
    width: 22px;
    height: 1px;
    background-color: var(--color-brown);
    transition: transform var(--dur-base) var(--ease-soft),
                opacity var(--dur-base) var(--ease-soft);
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Nav */
.site-nav {
    margin-left: auto;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2.25rem);
}

.site-nav__link {
    position: relative;
    display: inline-block;
    padding: var(--space-2) 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body-sm);
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-brown);
}

.site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background-color: var(--color-brown);
    transition: right var(--dur-base) var(--ease-soft);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
    color: var(--color-ink);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link.is-active::after {
    right: 0;
}

.site-nav__link.is-active {
    color: var(--color-ink);
}

/* Mobile nav */
@media (max-width: 767.98px) {
    .site-nav-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-paper);
        border-bottom: 1px solid var(--color-border);
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: transform var(--dur-base) var(--ease-soft),
                    opacity var(--dur-base) var(--ease-soft);
    }

    .site-nav.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-2) var(--container-px) var(--space-5);
    }

    .site-nav__list li {
        border-top: 1px solid var(--color-line);
    }

    .site-nav__list li:last-child {
        border-bottom: 1px solid var(--color-line);
    }

    .site-nav__link {
        display: block;
        padding: var(--space-4) 0;
        font-size: 0.8125rem;
    }

    .site-nav__link::after {
        display: none;
    }
}

@media (min-width: 768px) {
    .site-nav-toggle {
        display: none;
    }
}

/* ---------- Footer ---------- */
.site-footer {
    background-color: var(--color-ivory);
    color: var(--color-brown);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-12);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-top: var(--space-10);
    padding-bottom: var(--space-9);
}

.site-footer__name {
    font-family: var(--font-serif);
    font-size: 1.625rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: var(--space-3);
    letter-spacing: 0.005em;
}

.site-footer__tagline {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-muted-brown);
    line-height: 1.7;
}

.site-footer__claim {
    margin-top: var(--space-5);
    font-size: var(--fs-body-sm);
    color: var(--color-brown);
    line-height: 1.7;
    max-width: 36ch;
}

.site-footer__nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.site-footer__nav a {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-brown);
    transition: color var(--dur-fast) var(--ease-soft);
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
    color: var(--color-ink);
}

.site-footer__label {
    font-family: var(--font-sans);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-muted-brown);
    margin-bottom: var(--space-4);
}

.site-footer__placeholder {
    font-size: var(--fs-body-sm);
    color: var(--color-brown);
    margin-bottom: var(--space-1);
    line-height: 1.6;
}

.site-footer__placeholder em {
    font-style: italic;
    color: var(--color-muted-brown);
}

.site-footer__cta {
    margin-top: var(--space-5);
}

.site-footer__bottom {
    border-top: 1px solid var(--color-border);
    padding: var(--space-5) 0;
}

.site-footer__bottom p {
    font-size: var(--fs-body-sm);
    color: var(--color-muted-brown);
    letter-spacing: 0.04em;
}

@media (min-width: 768px) {
    .site-footer__inner {
        grid-template-columns: 1.5fr 1fr 1.2fr;
        gap: var(--space-10);
    }
}

/* ---------- Floating contact bubbles (Phase 11) ----------
   Two stacked icon-only buttons in the bottom-right. They float above
   the page content, stay visible while scrolling, do not block the
   booking CTA (they sit below it on desktop), and use recognizable
   inline SVG icons so we don't pull in an icon library. */
.contact-bubbles {
    position: fixed;
    right: clamp(0.75rem, 2vw, 1.25rem);
    bottom: clamp(0.75rem, 2vw, 1.5rem);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
    pointer-events: none; /* let the document receive clicks beneath */
}

.contact-bubbles__item {
    pointer-events: auto;
}

.contact-bubbles__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--color-paper);
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 24px rgba(44, 36, 28, 0.10),
                0 2px 6px rgba(44, 36, 28, 0.06);
    color: var(--color-brown);
    transition: transform var(--dur-base) var(--ease-soft),
                background-color var(--dur-base) var(--ease-soft),
                border-color var(--dur-base) var(--ease-soft),
                color var(--dur-base) var(--ease-soft),
                box-shadow var(--dur-base) var(--ease-soft);
}

/* Both the inline SVG (Facebook mark) and the <img> (Zalo mark)
   share these dimensions so the brand badges stay the same visual
   size regardless of how they're embedded. */
.contact-bubbles__link svg,
.contact-bubbles__link img {
    width: 26px;
    height: 26px;
    display: block;
}

/* `fill: currentColor` only makes sense for inline SVG — the Zalo
   JPG carries its own brand colors, so it's scoped to the SVG. */
.contact-bubbles__link svg {
    fill: currentColor;
}

/* The Zalo JPG already has a square aspect ratio with its own
   rounded corners, so it just sits flush inside the circular
   bubble without further cropping. */
.contact-bubbles__link img {
    border-radius: 4px;
}

.contact-bubbles__link:hover,
.contact-bubbles__link:focus-visible {
    transform: translateY(-2px);
    background-color: var(--color-brown);
    border-color: var(--color-brown);
    color: var(--color-paper);
    box-shadow: 0 12px 30px rgba(44, 36, 28, 0.18);
}

/* Brand-tinted hover for the two services. Default uses neutral
   brown; hover reveals the service's recognizable color so the
   icon area feels like the platform brand while resting. */
.contact-bubbles__link--facebook:hover,
.contact-bubbles__link--facebook:focus-visible {
    background-color: #1877F2;
    border-color: #1877F2;
}

.contact-bubbles__link--zalo:hover,
.contact-bubbles__link--zalo:focus-visible {
    background-color: #0068FF;
    border-color: #0068FF;
}

.contact-bubbles__tooltip {
    position: absolute;
    right: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    padding: 0.4rem 0.65rem;
    background-color: var(--color-ink);
    color: var(--color-paper);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-soft),
                transform var(--dur-fast) var(--ease-soft);
}

.contact-bubbles__item {
    position: relative;
}

.contact-bubbles__link:hover + .contact-bubbles__tooltip,
.contact-bubbles__link:focus-visible + .contact-bubbles__tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

@media (max-width: 575.98px) {
    .contact-bubbles__link {
        width: 46px;
        height: 46px;
    }

    .contact-bubbles__link svg {
        width: 22px;
        height: 22px;
    }

    .contact-bubbles__tooltip {
        display: none;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Page loader (brand-mark reveal) ----------
   Full-screen cream overlay shown on first paint and on every
   intra-site navigation. The Phì Lũ logo opens outward from the
   center with a soft upward drift, a small serif tagline fades
   in underneath, and the whole overlay dissolves upward to reveal
   the page beneath.

   The animation runs from pure CSS so no JavaScript framework is
   needed. site.js handles the auto-hide timing and the fade-out
   on the next navigation, but the overlay still looks correct even
   if JavaScript never runs (it just stays in place). */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse at center,
            rgba(205, 186, 155, 0.20) 0%,
            rgba(241, 235, 221, 0) 60%),
        var(--color-cream);
    overflow: hidden;
    /* sits above every layer, including the contact bubbles */
}

.page-loader__contain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 1.5rem);
    padding: 1.5rem;
    /* keep the overlay above page content even on extreme zoom */
    position: relative;
    z-index: 1;
}

.page-loader__logo {
    display: block;
    width: clamp(180px, 26vw, 280px);
    height: auto;
    /* Open-from-center reveal: clip-path shrinks inward to a single
       point so all four edges retract toward the middle, then the
       image settles into place with a soft fade and upward drift.
       Works on the raster .png image without requiring an inline
       SVG — mimicking the strokebuild feel of the reference site. */
    opacity: 0;
    transform: translateY(10px) scale(0.94);
    clip-path: inset(50% 50% 50% 50%);
    filter: drop-shadow(0 2px 14px rgba(74, 58, 46, 0.10));
    animation: page-loader-reveal 1300ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.page-loader__caption {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-brown);
    opacity: 0;
    transform: translateY(8px);
    animation: page-loader-caption 800ms ease-out 900ms forwards;
    white-space: nowrap;
}

.page-loader__caption-sep {
    margin: 0 0.6em;
    color: rgba(74, 58, 46, 0.45);
}

@keyframes page-loader-reveal {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.94);
        clip-path: inset(50% 50% 50% 50%);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes page-loader-caption {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Exit: the overlay dissolves upward to reveal the page. Triggered
   by site.js adding the .is-leaving class. The page above stays
   interactive the moment this transition starts so the click that
   started it never feels blocked. */
.page-loader.is-leaving {
    opacity: 0;
    transform: translateY(-2vh);
    transition:
        opacity 620ms ease-in,
        transform 620ms cubic-bezier(0.55, 0, 0.45, 1);
    pointer-events: none;
}

/* After the transition, the element is removed from the layout
   entirely (set by site.js via the [hidden] attribute). */
.page-loader[hidden] {
    display: none;
}

/* When the user's system asks for reduced motion: collapse the
   reveal to a single instant paint with a short fade. The overlay
   still appears and disappears but skips the wipe + drift + scale. */
@media (prefers-reduced-motion: reduce) {
    .page-loader__logo,
    .page-loader__caption {
        animation-duration: 1ms !important;
        animation-delay: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    .page-loader.is-leaving {
        transition-duration: 200ms !important;
        transform: none !important;
    }
}

@media (max-width: 575.98px) {
    .page-loader__logo {
        width: clamp(150px, 46vw, 220px);
    }

    .page-loader__caption {
        font-size: 0.78rem;
        letter-spacing: 0.18em;
    }
}