/* custom.css - your own tweaks, loaded after the theme's style.css.
   Anything here wins over the theme. Edit, then ./build.sh --serve to check.
   (The older Publii-era tweaks live at the end of style.css - leave those alone.) */

/* =====================================================================
   LOGO SWITCH
   ---------------------------------------------------------------------
   The logo is hidden: nothing shows in the top-left and the menu stays
   centred. The logo is still in site/partials/header.html, so the rest
   of the layout doesn't change.
   To show a logo again: put the image in site/media/website/, set the
   src (and width/height) of the .logo <img> in header.html, and delete
   the rule below.
   ===================================================================== */
.logo { display: none; }

/* =====================================================================
   HEADER: menu and page title scale with the window  (3.0)
   ---------------------------------------------------------------------
   --u is one "design pixel". At 1320px wide and up it is exactly 1px,
   so the header looks as it always has. Below 1320px it shrinks in step
   with the window, and every size written as calc(N * var(--u)) shrinks
   by the same ratio, so the menu and title keep their proportions.
   1320 = the full-size menu (8 items, about 1124px) plus room at the
   sides. If the logo comes back, it needs more room: raise 1320 to about
   1920 (what andylovestacos uses for its logo + menu).
   ===================================================================== */
:root { --u: min(1px, calc(100vw / 1320)); }

/* ---- Desktop and tablet (wider than 768px): scaled header ---- */
@media (min-width: 769px) {
    /* logo sizes (only matter if the logo switch is turned back on) */
    .logo {
        top: calc(4 * var(--u));
        left: calc(58 * var(--u));
        padding: 0;
    }
    .logo img {
        height: calc(180 * var(--u));
        padding: calc(11 * var(--u)) 0;
    }
    .navbar { margin-top: calc(140 * var(--u)); }
    .top .navbar .navbar__menu { gap: calc(30 * var(--u)); }
    .top .navbar .navbar__menu li { font-size: calc(21.75 * var(--u)); }
    .top .navbar .navbar__menu li a { padding: 0 calc(11.6 * var(--u)); }

    /* The pop-up mobile menu should always be a vertical list */
    .navbar_mobile_overlay .navbar__menu { display: block; }
}

/* ---- Tablet (769px to 1023px): switch to the Menu button,
        same as on phones ---- */
@media (min-width: 769px) and (max-width: 1023px) {
    .top .navbar .navbar__menu { display: none; }
    .navbar .navbar__toggle { display: block; }
    .top > div { display: flex; justify-content: flex-end; }
    .navbar { margin-top: calc(70 * var(--u)); }
    .navbar .navbar__toggle { height: auto; padding: 1rem; }
}

/* ---- Big page title over the hero image scales with the menu,
        so the two never run into each other ---- */
@media (min-width: 769px) {
    .hero__header { top: calc(37 * var(--u)); }
    .hero__header h1 { font-size: calc(65 * var(--u)); }
}
/* 769px to 899px: header sits over the hero image, same as desktop */
@media (min-width: 769px) and (max-width: 899px) {
    .container { padding-top: 0; }
}
/* Phones: the title box was as wide as the screen, but the hero image is
   30px narrower, so long titles got cut off at both edges. Match the box
   to the image; a title too long for one line now wraps instead. */
@media (max-width: 768px) {
    .hero__header { width: 100%; }
}

/* ---- Gallery page: photo grid ----
   Same grid as the andylovestacos galleries listing, but each card is
   just a photo (no link, no caption):
   - no zoom-and-tilt on hover, since there's nothing to click
   - cards are a fixed height, so photos are trimmed to fit; keep the
     upper-middle part (where faces usually are) instead of the centre */
.photo-grid .c-card:hover .c-card__image img { transform: none; }
.photo-grid .c-card__image img { object-position: 50% 30%; }

/* =====================================================================
   STICKY MENU BAR  (3.0)
   ---------------------------------------------------------------------
   scripts.min.js adds .is-stuck to the header as soon as the page is
   scrolled at all: the header then pins to the top as a white bar.
   The theme also adds .is-visible while the Menu button's list is open,
   so the header gets the same white bar then.
   ===================================================================== */
.top.is-stuck,
.top.is-visible {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    max-height: none;
    background: var(--white);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    opacity: 1;
    transform: none;
}
.top.is-stuck > div,
.top.is-visible > div { height: 100%; align-items: center; }
.top.is-stuck .navbar,
.top.is-visible .navbar { margin-top: 0; }

/* Desktop (1024px+): a slim bar that just fits the menu */
@media (min-width: 1024px) {
    .top.is-stuck,
    .top.is-visible { height: calc(70 * var(--u)); min-height: 3rem; }
}

/* Logo in the bar (only matters if the logo switch is turned back on) */
.top.is-stuck .logo,
.top.is-visible .logo {
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
}
.logo img { transition: height 0.25s ease, padding 0.25s ease; }
@media (min-width: 769px) {
    .top.is-stuck .logo img,
    .top.is-visible .logo img {
        height: calc(56 * var(--u));
        min-height: 2.25rem;
        padding: calc(4 * var(--u)) 0;
    }
}
@media (max-width: 768px) {
    /* the pinned bar spans the full screen, the normal header sits inside
       the page's 15px side margins: 30px keeps the Menu button in place
       (#js-top, because the theme sets this padding with that id) */
    #js-top.is-stuck,
    #js-top.is-visible { padding: 0 30px; }
    .top.is-stuck .logo,
    .top.is-visible .logo { left: 15px; }
    .top.is-stuck .logo img,
    .top.is-visible .logo img {
        height: calc(var(--header-height) - 1rem);
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .logo img { transition: none; }
}

/* ---- Homepage closing line: bigger, italic, framed by thin lines ----
   (same as andylovestacos) Each line does one job; delete any you don't like. */
.closing-line {
    font-size: 1.4em;
    font-style: italic;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    max-width: 750px;
    margin: 0 auto;
    padding: 1.5em 0;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}

/* ---- Booking page (same as andylovestacos) ----
   Buttons line up along the bottom of each box, whatever the text length */
.lux-booking .lux-pricing-table .lux-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lux-booking .lux-pricing-table .lux-plan > .luxury-btn {
    margin-top: auto;
    flex-shrink: 0;
    white-space: nowrap;
}
/* always some space above the button */
.lux-booking .lux-pricing-table .lux-plan > :nth-last-child(2) { margin-bottom: 1.5rem; }

/* ---- Contact form privacy notice (same as andylovestacos) ---- */
.form-privacy {
  max-width: 36rem;
  margin: 2rem auto 0;
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.75;
  text-align: center;
}
.form-privacy p { margin: 0 0 0.75rem; }

/* ---- Review form (same as andylovestacos): Month/Year side by side,
        dropdowns match the other fields, and the permission checkbox ---- */
.form-row { display: flex; gap: 16px; }
.form-row > .form-group { flex: 1; min-width: 0; }
.form-group select {
    width: 100%;
    max-width: none;
    padding: 12px 40px 12px 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: var(--font-base);
    background-color: #fff;
    background-position: right 14px center;
    transition: border .2s ease, box-shadow .2s ease;
}
.form-group select:focus {
    outline: 0;
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}
.form-group select:invalid { color: #aaa; }
.form-group select option { color: #333; }
.form-consent {
    margin: 8px 0 4px;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
}
.form-consent input[type=checkbox] + label {
    display: inline-flex;
    align-items: flex-start;
    font-variation-settings: normal;
}
.form-consent input[type=checkbox] + label::before { flex-shrink: 0; margin-top: 1px; }
.form-consent input[type=checkbox]:focus-visible + label::before {
    outline: 2px solid #111;
    outline-offset: 2px;
}
.form-consent label { letter-spacing: 0.05em; }

/* Stars: hide the theme's round radio-button circles drawn next to each
   star, and keep the five stars on one line on phones */
#review-stars { flex-wrap: nowrap; }
#review-stars label::before { display: none !important; }

/* Submit button text on one line */
#submit-btn { white-space: nowrap; }

/* Review page: keep the intro text the same width as the form, with
   breathing room at the sides on every screen size */
.card .subtitle {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.25rem;
    margin-bottom: 1.5rem;
}
.form-thanks { margin-top: 1.25rem; padding: 0 1.25rem; }