/* ═══════════════════════════════════════════════════════════════
   Friends Cafe YYC — Main Stylesheet
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ───────────────────────────────────── */
:root {
    --fc-bg:           #574021;
    --fc-bg-warm:      #f3ead9;
    --fc-content-bg:   #b89c7b;
    --fc-text:         #3b2717;
    --fc-text-light:   #543c26;
    --fc-accent:       #DFC9B5;
    --fc-accent-dark:  #8B6F47;
    --fc-brown:        #281809;
    --fc-cream:        #FFFBF6;
    --fc-tan:          #DFC9B5;
    --fc-overlay:      rgba(40, 24, 9, 0.6);
    --fc-border:       #e0d5c7;
    --fc-shadow:       0 4px 20px rgba(40, 24, 9, 0.08);
    --fc-radius:       20px;
    --fc-radius-sm:    12px;
    --fc-transition:   0.3s ease;
    --fc-font-body:    'Lora', Georgia, 'Times New Roman', serif;
    --fc-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --fc-header-height: 132px;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--fc-header-height);
    -webkit-font-smoothing: antialiased;
}

/* Prevent rogue off-canvas elements (mobile-nav drawer, slide clones)
   from creating horizontal scroll on any page. */
html,
body {
    overflow-x: hidden;
}

/* <picture> wrapper around decorative imgs must not occupy layout space. */
picture {
    display: contents;
}

body {
    font-family: var(--fc-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--fc-text);
    background-color: var(--fc-bg);
    background-image:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.32) 0%,
            rgba(0, 0, 0, 0) 18%,
            rgba(0, 0, 0, 0) 82%,
            rgba(0, 0, 0, 0.32) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='680' height='680'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.22  0 0 0 0 0.14  0 0 0 0.78 0'/></filter><rect width='100%25' height='100%25' filter='url(%23m)'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.08' numOctaves='2' stitchTiles='stitch' seed='17'/><feColorMatrix values='0 0 0 0 0.22  0 0 0 0 0.14  0 0 0 0 0.06  0 0 0 0.58 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.10  0 0 0 0 0.04  0 0 0 0.44 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
    background-repeat: no-repeat, repeat, repeat, repeat;
    background-size: 100% 100%, 680px 680px, 320px 320px, 180px 180px;
    background-attachment: fixed, scroll, scroll, scroll;
    overflow-x: hidden;
}

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

a {
    color: var(--fc-accent-dark);
    text-decoration: none;
    transition: color var(--fc-transition);
}

a:hover {
    color: var(--fc-brown);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fc-font-heading);
    color: var(--fc-brown);
    line-height: 1.3;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ── Container ───────────────────────────────────────────────── */
.fc-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.fc-container--wide {
    max-width: 1400px;
}

.fc-text-center {
    text-align: center;
}

/* ── Header ──────────────────────────────────────────────────── */
.fc-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #0f333a;
    background-image:
        radial-gradient(ellipse 62% 170% at 50% 10%,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.12) 24%,
            rgba(255, 255, 255, 0) 48%,
            rgba(0, 0, 0, 0.14) 68%,
            rgba(0, 0, 0, 0.32) 88%,
            rgba(0, 0, 0, 0.46) 100%),
        url("../images/awning-texture.svg");
    background-repeat: no-repeat, repeat;
    background-size: 100% 100%, 220px 220px;
    box-shadow: 0 22px 44px -6px rgba(0, 0, 0, 0.42), 0 8px 20px -2px rgba(0, 0, 0, 0.22);
    transition: background-color var(--fc-transition), box-shadow var(--fc-transition);
}

.fc-header.scrolled {
    background-color: #0f333a;
    box-shadow: 0 22px 44px -6px rgba(0, 0, 0, 0.46), 0 8px 20px -2px rgba(0, 0, 0, 0.24);
}

/* Slanted, curved awning-strut stripes.
   Bottom anchor: end of every 3rd scallop from center (±180, ±360, …, 60px/scallop).
   Top anchor: shifted toward center by half the logo-container width (100px of 200px).
   Each stripe bows gently outward (away from center) via a quadratic bezier.
   SVG is drawn in a 2400px-wide canvas centered on the nav; the nav clips overflow. */
.fc-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-1400 0 2800 80' preserveAspectRatio='none'><g stroke='%231e3e44' stroke-opacity='0.5' stroke-width='1.5' fill='none' stroke-linecap='round'><path d='M -275 80 Q -255 5 -175 0'/><path d='M -455 80 Q -435 5 -355 0'/><path d='M -635 80 Q -615 5 -535 0'/><path d='M -815 80 Q -795 5 -715 0'/><path d='M -995 80 Q -975 5 -895 0'/><path d='M -1175 80 Q -1155 5 -1075 0'/><path d='M 275 80 Q 255 5 175 0'/><path d='M 455 80 Q 435 5 355 0'/><path d='M 635 80 Q 615 5 535 0'/><path d='M 815 80 Q 795 5 715 0'/><path d='M 995 80 Q 975 5 895 0'/><path d='M 1175 80 Q 1155 5 1075 0'/></g></svg>");
    background-size: 2800px 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    /* Stripes faded via SVG stroke-opacity=0.3 so the filter shadow below
       isn't dimmed by a CSS opacity. feComponentTransfer slope=3.33 boosts
       the blurred alpha (capped by the 0.3 source) back up to ~1.0 so the
       shadow renders at its earlier ~0.475 effective density. */
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='s' x='-50%25' y='-50%25' width='200%25' height='200%25'><feGaussianBlur in='SourceAlpha' stdDeviation='16 3' result='blur'/><feComponentTransfer in='blur' result='boost'><feFuncA type='linear' slope='2.0'/></feComponentTransfer><feOffset in='boost' dx='0' dy='2' result='off'/><feFlood flood-color='black' flood-opacity='1'/><feComposite in2='off' operator='in' result='shadow'/><feMerge><feMergeNode in='shadow'/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#s");
}

/* Left-half awning scallops — unchanged pattern tiling from the left edge. */
.fc-header::after,
.fc-header__awning-mirror {
    --fc-scallop-w: 60px;
    --fc-scallop-h: 18px;
    content: "";
    position: absolute;
    top: 100%;
    height: var(--fc-scallop-h);
    background:
        url("../images/awning-texture.svg") top left / 220px 220px repeat,
        #051418;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='18' viewBox='0 0 60 18' preserveAspectRatio='none'><ellipse cx='30' cy='0' rx='30' ry='18' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='18' viewBox='0 0 60 18' preserveAspectRatio='none'><ellipse cx='30' cy='0' rx='30' ry='18' fill='black'/></svg>");
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: var(--fc-scallop-w) var(--fc-scallop-h);
    mask-size: var(--fc-scallop-w) var(--fc-scallop-h);
    pointer-events: none;
    filter: drop-shadow(0 10px 14px rgba(40, 24, 9, 0.42)) drop-shadow(0 3px 6px rgba(40, 24, 9, 0.28));
}

.fc-header::after {
    left: 0;
    width: 50%;
}

/* Right-half awning scallops — a true mirror of the left half.
   Same pattern, same tiling origin (left edge of this box), then the
   whole box is flipped horizontally so every scallop peak and color
   band on the right is the reflection of its left-side counterpart. */
.fc-header__awning-mirror {
    right: 0;
    width: 50%;
    transform: scaleX(-1);
}

/* Offset the fixed header when the WP admin bar is visible */
body.admin-bar .fc-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar .fc-header {
        top: 46px;
    }
}
@media screen and (max-width: 600px) {
    body.admin-bar .fc-header {
        top: 0;
    }
}

/* Hanging flower baskets below the nav */
.fc-header__basket {
    position: fixed;
    top: calc(var(--fc-header-height) - 32px);
    width: 320px;
    height: auto;
    z-index: 999;
    pointer-events: none;
    user-select: none;
    filter: brightness(0.72) contrast(1.15) drop-shadow(0 22px 28px rgba(0, 0, 0, 0.65)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45));
}

/* The extra width on top of the previous 230px is absorbed by the negative
   offset so the baskets grow outward toward the page edge, not inward. */
.fc-header__basket--left  { left: -130px; }
.fc-header__basket--right { right: -130px; }

body.admin-bar .fc-header__basket {
    top: calc(var(--fc-header-height) + 32px - 32px);
}
@media screen and (max-width: 782px) {
    body.admin-bar .fc-header__basket {
        top: calc(var(--fc-header-height) + 46px - 32px);
    }
}

@media (max-width: 900px) {
    .fc-header__basket { width: 220px; }
    .fc-header__basket--left  { left: -90px; }
    .fc-header__basket--right { right: -90px; }
}

@media (max-width: 768px) {
    .fc-header__basket { display: none; }
}

.fc-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: var(--fc-header-height);
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    height: var(--fc-header-height);
    column-gap: 60px;
    position: relative;
    z-index: 1;
}

.fc-header__logo {
    justify-self: center;
    align-self: start;
    width: 200px;
    height: 100px;
    transform: scale(1.32);
    transform-origin: top center;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background-color: #ebe2d1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.23  0 0 0 0 0.15  0 0 0 0 0.09  0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-repeat: repeat;
    background-size: 240px 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 22px 44px -6px rgba(0, 0, 0, 0.42), 0 8px 20px -2px rgba(0, 0, 0, 0.22);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.fc-header__logo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 55%, transparent 42%, rgba(40, 24, 9, 0.07) 72%, rgba(40, 24, 9, 0.17) 100%);
    pointer-events: none;
    z-index: 0;
}

.fc-header__logo > * {
    position: relative;
    z-index: 1;
}

.fc-header__logo a,
.fc-header__logo img,
.fc-header__logo-img {
    height: 86px;
    width: auto;
    display: block;
}

.fc-header__logo-since {
    position: absolute;
    bottom: 7px;
    font-family: var(--fc-font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--fc-text);
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

.fc-header__logo-since--left {
    left: 18px;
}

.fc-header__logo-since--right {
    right: 18px;
}

.fc-header__site-name {
    font-family: var(--fc-font-heading);
    font-size: 1.85rem;
    color: var(--fc-brown);
    font-weight: 700;
}

.fc-header__nav {
    display: flex;
    align-items: center;
    height: 100%;
    transform: translateY(6.75px);
}

.fc-header__nav--left {
    justify-content: flex-end;
}

.fc-header__nav--right {
    justify-content: flex-start;
}

.fc-nav__list {
    list-style: none;
    display: flex;
    gap: 22px;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
}

.fc-nav__list li {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Nudge the outermost items in each half-nav outward so Menu / Locations
   sit mirrored about the logo centerline. */
.fc-header__nav--left .fc-nav__list li:first-child {
    transform: translateX(-70px);
}

.fc-header__nav--right .fc-nav__list li:last-child {
    transform: translateX(70px);
}

.fc-nav__list li a {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    line-height: 1;
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-size: 1.2075rem;
    font-weight: 600;
    color: #ebe2d1;
    border-radius: 8px;
    transition: background var(--fc-transition), color var(--fc-transition);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.fc-nav__list li a:hover,
.fc-nav__list li.current-menu-item a {
    background: var(--fc-accent);
    color: var(--fc-brown);
}

.fc-header__social {
    display: flex;
    gap: 14px;
    align-items: center;
    height: 100%;
    position: absolute;
    top: 0;
    right: 10px;
    transform: translateY(6.75px);
    z-index: 2;
}

.fc-social-link {
    display: inline-flex;
    align-items: center;
    color: #ebe2d1;
    transition: color var(--fc-transition), opacity var(--fc-transition);
}

.fc-social-link:hover {
    color: #ebe2d1;
    opacity: 0.75;
}

/* ── Hamburger ───────────────────────────────────────────────── */
.fc-header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.fc-header__hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--fc-brown);
    transition: transform var(--fc-transition), opacity var(--fc-transition);
}

.fc-header__hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.fc-header__hamburger.active span:nth-child(2) {
    opacity: 0;
}

.fc-header__hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ── Mobile Nav ──────────────────────────────────────────────── */
.fc-mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100vh;
    background: var(--fc-cream);
    z-index: 999;
    transition: right var(--fc-transition);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

.fc-mobile-nav.open {
    right: 0;
}

.fc-mobile-nav__inner {
    padding: 100px 30px 40px;
}

.fc-mobile-nav__list {
    list-style: none;
}

.fc-mobile-nav__list li a {
    display: block;
    padding: 14px 0;
    font-size: 1.1rem;
    color: var(--fc-text);
    border-bottom: 1px solid var(--fc-border);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fc-mobile-nav__list li a:hover {
    color: var(--fc-accent-dark);
}

.fc-mobile-nav__social {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--fc-border);
}

.fc-mobile-nav__social a {
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* ── Main Content ────────────────────────────────────────────── */
.fc-main {
    margin-top: var(--fc-header-height);
    min-height: calc(100vh - var(--fc-header-height));
}

/* ── Page Layout ─────────────────────────────────────────────── */
.fc-page {
    padding: 60px 0;
}

/* Plaster-wall texture is applied globally on `body`. The full-bleed page
   wrappers inherit it — no need to repeat here. */

.fc-page--404 {
    padding: 120px 0;
}

.fc-page__title {
    margin-bottom: 30px;
    text-align: center;
}

.fc-page--has-hero {
    padding-top: 0;
}

.fc-page-hero {
    text-align: center;
    padding: 60px 20px 30px;
}

.fc-page-hero__title {
    font-family: var(--fc-font-heading);
    font-size: 3.25rem;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--fc-brown);
    margin: 0 0 14px;
}

.fc-page-hero__subtitle {
    font-family: var(--fc-font-body);
    font-size: 1.1rem;
    color: var(--fc-text);
    margin: 0 0 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.fc-page-hero__subtitle strong {
    font-weight: 600;
    margin-right: 4px;
}

.fc-page-hero__subtitle a {
    color: var(--fc-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.fc-page-hero__subtitle a:hover {
    color: var(--fc-accent-dark);
}

.fc-page-hero__divider {
    color: var(--fc-accent-dark);
    opacity: 0.7;
}

@media (max-width: 768px) {
    .fc-page-hero {
        padding: 40px 16px 20px;
    }
    .fc-page-hero__title {
        font-size: 2.5rem;
    }
    .fc-page-hero__subtitle {
        font-size: 1rem;
        gap: 8px;
    }
    .fc-page-hero__divider {
        display: none;
    }
    .fc-page-hero__subtitle > span {
        flex-basis: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .fc-page-hero__title {
        font-size: 2rem;
        letter-spacing: 0;
    }
}

.fc-page__body {
    max-width: 800px;
    margin: 0 auto;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.fc-btn {
    display: inline-block;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: var(--fc-radius-sm);
    cursor: pointer;
    transition: all var(--fc-transition);
    text-align: center;
}

.fc-btn--primary {
    background: var(--fc-brown);
    color: var(--fc-cream);
}

.fc-btn--primary:hover {
    background: var(--fc-accent-dark);
    color: var(--fc-cream);
}

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

.fc-btn--outline:hover {
    background: var(--fc-brown);
    color: var(--fc-cream);
}

.fc-btn--accent {
    background: var(--fc-accent);
    color: var(--fc-brown);
}

.fc-btn--accent:hover {
    background: var(--fc-accent-dark);
    color: var(--fc-cream);
}

/* ── Section ─────────────────────────────────────────────────── */
.fc-section {
    padding: 80px 0;
}

.fc-section--warm {
    background: var(--fc-bg-warm);
}

.fc-section--brown {
    background: var(--fc-brown);
    color: var(--fc-cream);
}

.fc-section--brown h2,
.fc-section--brown h3 {
    color: var(--fc-cream);
}

.fc-section__header {
    text-align: center;
    margin-bottom: 50px;
}

.fc-section__title {
    font-size: 2.2rem;
    margin-bottom: 12px;
}

.fc-section__subtitle {
    font-size: 1.1rem;
    color: var(--fc-text-light);
    max-width: 600px;
    margin: 0 auto;
}

/* ── Cards ───────────────────────────────────────────────────── */
.fc-card {
    background: var(--fc-content-bg);
    border-radius: var(--fc-radius);
    overflow: hidden;
    box-shadow: var(--fc-shadow);
    transition: transform var(--fc-transition), box-shadow var(--fc-transition);
}

.fc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(40, 24, 9, 0.12);
}

.fc-card__image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.fc-card__body {
    padding: 24px;
}

.fc-card__title {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.fc-card__text {
    color: var(--fc-text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ── Two-Column Layout ───────────────────────────────────────── */
.fc-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.fc-split--reverse .fc-split__image {
    order: 2;
}

.fc-split__image img {
    width: 100%;
    border-radius: var(--fc-radius);
    box-shadow: var(--fc-shadow);
}

.fc-split__content h2 {
    margin-bottom: 10px;
}

.fc-split__content h3 {
    font-size: 1.1rem;
    color: var(--fc-accent-dark);
    margin-bottom: 16px;
}

.fc-split__content p {
    margin-bottom: 20px;
    color: var(--fc-text-light);
    line-height: 1.7;
}

/* ── Footer ──────────────────────────────────────────────────── */
.fc-footer {
    background: var(--fc-brown);
    color: var(--fc-cream);
    padding: 60px 0 30px;
}

.fc-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.fc-footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.fc-footer__heading {
    font-size: 1.2rem;
    color: var(--fc-accent);
    margin-bottom: 16px;
}

.fc-footer__address,
.fc-footer__hours,
.fc-footer__phone,
.fc-footer__email {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 10px;
}

.fc-footer a {
    color: var(--fc-cream);
}

.fc-footer a:hover {
    color: var(--fc-accent);
}

.fc-footer__social {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

.fc-footer__social a {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fc-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 20px;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* ── Sticky Footer (Mobile) ──────────────────────────────────── */
.fc-sticky-footer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--fc-brown);
    z-index: 998;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.fc-sticky-footer__btn {
    flex: 1;
    display: block;
    padding: 14px 0;
    text-align: center;
    color: var(--fc-cream);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background var(--fc-transition);
}

.fc-sticky-footer__btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--fc-cream);
}

/* ── Contact Form ────────────────────────────────────────────── */
.fc-form {
    max-width: 600px;
    margin: 0 auto;
}

.fc-form__group {
    margin-bottom: 20px;
}

.fc-form__label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.fc-form__input,
.fc-form__select,
.fc-form__textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    font-family: var(--fc-font-body);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-sm);
    background: #fff;
    color: var(--fc-text);
    transition: border-color var(--fc-transition);
}

.fc-form__input:focus,
.fc-form__select:focus,
.fc-form__textarea:focus {
    outline: none;
    border-color: var(--fc-accent-dark);
}

.fc-form__textarea {
    min-height: 150px;
    resize: vertical;
}

/* ── Animations ──────────────────────────────────────────────── */
.fc-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fc-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* If motion is reduced or JS is delayed/missing, never leave content
   stuck at opacity:0 — visibility wins over animation. */
@media (prefers-reduced-motion: reduce) {
    .fc-fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Map ─────────────────────────────────────────────────────── */
.fc-map {
    width: 100%;
    height: 400px;
    border-radius: var(--fc-radius);
    overflow: hidden;
    box-shadow: var(--fc-shadow);
}

/* ── Utility ─────────────────────────────────────────────────── */
/* ── Newsletter ───────────────────────────────────────────────── */
.fc-newsletter {
    padding: 60px 0;
}

.fc-newsletter__form {
    max-width: 500px;
    margin: 24px auto 0;
}

.fc-newsletter__row {
    display: flex;
    gap: 12px;
}

.fc-newsletter__input {
    flex: 1;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: var(--fc-cream);
}

.fc-newsletter__input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.fc-newsletter__input:focus {
    border-color: var(--fc-accent);
    background: rgba(255, 255, 255, 0.15);
}

/* ── Form Success ────────────────────────────────────────────── */
.fc-form__success {
    text-align: center;
    padding: 30px;
    color: var(--fc-accent-dark);
    font-size: 1.1rem;
    font-weight: 600;
}

.fc-mb-0 { margin-bottom: 0; }
.fc-mb-1 { margin-bottom: 10px; }
.fc-mb-2 { margin-bottom: 20px; }
.fc-mb-3 { margin-bottom: 30px; }
.fc-mb-4 { margin-bottom: 40px; }

/* ── Booking Cards (Reservations Page) ───────────────────────── */
.fc-booking-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin: 40px 0 48px;
}

.fc-booking-card {
    --tilt: 0deg;
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 4 / 5;
    padding: 12px 12px 0;
    background: #f5ead5;
    color: var(--fc-brown);
    border: none;
    border-radius: 0;
    box-shadow:
        0 24px 34px rgba(0, 0, 0, 0.35),
        0 10px 16px rgba(0, 0, 0, 0.22);
    text-align: center;
    text-decoration: none;
    transform: rotate(var(--tilt));
    transition: transform var(--fc-transition), box-shadow var(--fc-transition), background var(--fc-transition);
    overflow: visible;
}

.fc-booking-cards .fc-booking-card:nth-child(5n+1) { --tilt: -1.8deg; }
.fc-booking-cards .fc-booking-card:nth-child(5n+2) { --tilt:  2.2deg; }
.fc-booking-cards .fc-booking-card:nth-child(5n+3) { --tilt: -1.2deg; }
.fc-booking-cards .fc-booking-card:nth-child(5n+4) { --tilt:  2.6deg; }
.fc-booking-cards .fc-booking-card:nth-child(5n+5) { --tilt: -2.4deg; }

.fc-booking-card::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 30%;
    width: 40%;
    aspect-ratio: 1633 / 383;
    background: url("../images/tape.png") no-repeat center / contain;
    z-index: 2;
    pointer-events: none;
    transform: rotate(-5deg);
}

.fc-booking-cards .fc-booking-card:nth-child(5n+1)::before { transform: rotate(-8deg); }
.fc-booking-cards .fc-booking-card:nth-child(5n+2)::before { transform: rotate(5deg) scaleX(-1); }
.fc-booking-cards .fc-booking-card:nth-child(5n+3)::before { transform: rotate(-3deg); }
.fc-booking-cards .fc-booking-card:nth-child(5n+4)::before { transform: rotate(10deg) scaleX(-1); }
.fc-booking-cards .fc-booking-card:nth-child(5n+5)::before { transform: rotate(-6deg); }

a.fc-booking-card:hover {
    transform: rotate(var(--tilt)) translateY(-4px);
    box-shadow:
        0 28px 40px rgba(0, 0, 0, 0.42),
        0 12px 18px rgba(0, 0, 0, 0.28);
    color: var(--fc-brown);
}

.fc-booking-card__photo {
    flex: 1;
    overflow: hidden;
    background: #d8cfc0;
    min-height: 0;
}

.fc-booking-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--fc-transition);
}

a.fc-booking-card:hover .fc-booking-card__photo img,
a.fc-booking-card:focus-visible .fc-booking-card__photo img {
    transform: scale(1.04);
}

/* Title becomes the handwritten caption in the polaroid's bottom strip. */
.fc-booking-card__title {
    font-family: 'Caveat', 'Lato', cursive;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.005em;
    color: var(--fc-brown);
    padding: 16px 8px 20px;
    display: block;
}

@media (max-width: 900px) {
    .fc-booking-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* On mobile the actual booking widget is the primary CTA — pull it
       above the marketing cards via explicit order, leaving any optional
       post content (.fc-page__body) at its natural top position. */
    .fc-page-reservations > .fc-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .fc-page-reservations > .fc-container > .fc-clipboard-widget { order: 1; }
    .fc-page-reservations > .fc-container > .fc-booking-cards    { order: 2; }

    /* Compact cards: single column, photo capped so each card is ~240px
       instead of ~419px — page goes from ~3,800px tall to ~2,000px. */
    .fc-booking-cards {
        grid-template-columns: 1fr;
        gap: 14px;
        margin: 0 0 16px;
    }
    .fc-booking-card {
        aspect-ratio: auto;
        min-height: 200px;
    }
    .fc-booking-card__photo {
        max-height: 140px;
    }
    .fc-booking-card__title {
        font-size: 1.25rem;
        padding: 10px 8px 14px;
    }
}

@media (max-width: 480px) {
    .fc-booking-cards {
        grid-template-columns: 1fr;
    }
}