/* 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.
   Base: the andylovestacos custom.css (header with room for the logo),
   plus the andymarin.org additions and the homepage carousel at the end. */

/* ---- Phones (screens up to 768px wide) ---- */
@media (max-width: 768px) {

    /* Logo: move left/right. Less negative = further right.
       Was -50px; -37px lines the logo up with the left edge of the hero image. */
    :root { --logo-mobile-translate-x: -37px; }

    /* Big heading over the hero image: distance from the top of the image.
       Was about 52px. Smaller number = higher up. */
    .hero__header { top: 36px; }
}
.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; }

/* =====================================================================
   HEADER: logo + menu scale together, menu sticks on scroll  (3.0)
   ---------------------------------------------------------------------
   --u is one "design pixel". The header was designed for a 1920px-wide
   screen. Below 1920px, --u shrinks in step with the window, so every
   size written as calc(N * var(--u)) shrinks by the same ratio and the
   logo and menu keep their proportions. At 1920px and wider, --u = 1px
   and the header looks exactly as before.
   ===================================================================== */
:root { --u: min(1px, calc(100vw / 1920)); }

/* ---- Desktop and tablet (wider than 768px): scaled header ---- */
@media (min-width: 769px) {
    .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): menu text would get too small, so
        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; }
}

/* ---- Sticky menu ----
   scripts.min.js adds .is-stuck as soon as the page is scrolled at all.
   The theme also adds .is-visible while the phone Menu 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 .logo,
.top.is-visible .logo {
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
}
.top.is-stuck .navbar,
.top.is-visible .navbar { margin-top: 0; }
.logo img { transition: height 0.25s ease, padding 0.25s ease; }

@media (min-width: 769px) {
    .top.is-stuck,
    .top.is-visible { height: calc(104 * var(--u)); min-height: 3.25rem; }
    .top.is-stuck .logo img,
    .top.is-visible .logo img {
        height: calc(84 * var(--u));
        min-height: 2.5rem;
        padding: calc(6 * var(--u)) 0;
    }
}
@media (min-width: 769px) and (max-width: 1023px) {
    /* The Menu button's pop-up list starts at the theme's header height */
    .top.is-stuck,
    .top.is-visible { height: var(--header-height); }
}
@media (max-width: 768px) {
    .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; }
}

/* ---- Big page title over the hero image scales with the header,
        so it never runs into the logo or the menu ---- */
@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; }
}

/* ---- Homepage closing line: bigger, italic, framed by thin lines ----
   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 ---- */
/* 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; }
.luxury-btn--wide { width: auto; min-width: 135px; }

/* Find Your Photo checklist */
.lux-list {
    list-style: none;
    margin: 1rem 0 1.5rem;
    padding: 0;
    text-align: left;
}
.lux-list > li {
    list-style: none;
    padding: 0.2rem 0 0.2rem 1.4em;
    text-indent: -1.4em;
}
.lux-list > li::before {
    content: "✓";
    display: inline-block;
    width: 1.4em;
    text-indent: 0;
    opacity: 0.6;
}

/* Galleries page: where "Browse Galleries" lands, kept clear of the
   pinned menu bar */
.galleries-anchor { scroll-margin-top: max(3.25rem, calc(104 * var(--u))); }
@media (max-width: 1023px) {
    .galleries-anchor { scroll-margin-top: var(--header-height); }
}

/* ---- Review form: 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; }

/* ---- Homepage boxes with a button (Photography Services, Daily
        Galleries): the button sits centred in the space between the end
        of the text and the bottom of the box ---- */
.lux-plan--cta { display: flex; flex-direction: column; }
.lux-plan__cta {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5rem;
}
.lux-plan__cta .luxury-btn { white-space: nowrap; }

/* =====================================================================
   FROM ANDYMARIN.ORG
   ===================================================================== */

/* 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%; }
}

/* ---- Family Portraits gallery: photo grid ----
   Same grid as the surf 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%; }

/* =====================================================================
   NEW FOR ANDYMARINPHOTOGRAPHY.COM
   ===================================================================== */

/* ---- Logo spot ----
   site/media/website/logo-placeholder.svg is an empty image the same
   shape as the andylovestacos logo, so the header keeps the logo's space.
   When the real logo is ready: put it in site/media/website/ and change
   the src (and width/height) of the .logo <img> in partials/header.html. */

/* ---- Homepage hero carousel ----
   Several <img> inside <figure class="hero__image hero-carousel">.
   The first one sets the size; the others sit on top of it. The script
   at the end of pages/index.html moves .is-active along.
   The look: the next photo fades in over the current one (no dip to
   white in between) while slowly settling from a slight zoom to still.
   Hairlines at the bottom show which photo is on. */
.hero-carousel {
    --carousel-fade: 2.2s;          /* must match FADE in index.html */
    overflow: hidden;
    isolation: isolate;             /* keeps the photos under the page title */
}
.hero-carousel > img {
    opacity: 0;
    z-index: 0;
    transform: scale(1.06);
    /* leaving: fade handled by the photo on top; reset zoom once hidden */
    transition: opacity var(--carousel-fade) cubic-bezier(.45, 0, .2, 1),
                transform 0s linear var(--carousel-fade);
    will-change: opacity, transform;
}
.hero-carousel > img:first-child { position: relative; }
.hero-carousel > img:not(:first-child) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-carousel > img.is-prev { opacity: 1; z-index: 1; transform: scale(1); transition: none; }
.hero-carousel > img.is-active,
.hero-carousel > img.is-active.is-loaded {
    opacity: 1;
    z-index: 2;
    transform: scale(1);
    /* arriving: fade in, and settle from 1.06 to 1 over its whole turn */
    transition: opacity var(--carousel-fade) cubic-bezier(.45, 0, .2, 1),
                transform 8s cubic-bezier(.2, .6, .3, 1);
}
/* the very first photo on page load: no zoom, just there */
.hero-carousel:not(.is-running) > img.is-active { transition: none; }
.hero-carousel::after { z-index: 3; }   /* the theme's light overlay stays on top */

.hero-carousel__bars {
    position: absolute;
    left: 50%;
    bottom: 1.75rem;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 10px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, .35));
}
.hero-carousel__bars span {
    position: relative;
    width: 34px;
    height: 1px;
    background: rgba(255, 255, 255, .45);
    overflow: hidden;
}
.hero-carousel__bars span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
}
.hero-carousel__bars span.is-active::after {
    animation: carousel-bar var(--carousel-seconds, 6s) linear forwards;
}
@keyframes carousel-bar { to { transform: scaleX(1); } }
@media (max-width: 768px) {
    .hero-carousel__bars { bottom: 1rem; gap: 8px; }
    .hero-carousel__bars span { width: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-carousel > img,
    .hero-carousel > img.is-active { transform: none; }
    .hero-carousel > img.is-active { transition: opacity 1.5s ease; }
    .hero-carousel__bars span.is-active::after { animation: none; transform: scaleX(1); }
}

/* ---- Homepage: welcome box spans the full width above the two
        section boxes ---- */
.lux-plan--welcome { margin-bottom: var(--spacing-lg); }

/* ---- Booking page: a heading above each group of cards ---- */
.lux-group-title { margin: 3rem 0 1.5rem; }
.lux-group-title:first-of-type { margin-top: 1rem; }

/* ---- Language flags (top right) ----
   The build puts <nav class="lang-switch"> at the start of the header,
   with one link per language to the same page in that language.
   The current language is in colour with a fine line under it; the others
   are quiet grey until you point at them. On wide screens the flags stay
   at the top of the page and step aside in the pinned menu bar (the menu
   needs the full width there); on tablets and phones they sit next to the
   Menu button, always visible. */
.lang-switch {
    position: absolute;
    top: max(14px, calc(30 * var(--u)));
    right: max(16px, calc(48 * var(--u)));
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
}
.lang-switch a {
    display: block;
    line-height: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid transparent;
    opacity: .55;
    filter: grayscale(1);
    transition: opacity .3s ease, filter .3s ease, border-color .3s ease;
}
.lang-switch a:hover,
.lang-switch a:focus-visible,
.lang-switch a.is-current {
    opacity: 1;
    filter: none;
}
.lang-switch a.is-current { border-bottom-color: var(--dark); }
.lang-switch a:focus-visible { outline: 1px solid var(--dark); outline-offset: 3px; }
.lang-switch svg {
    display: block;
    width: 24px;
    height: 16px;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.lang-switch { transition: opacity .3s ease, visibility .3s; }
@media (min-width: 1024px) {
    html:not(.menu-compact) .top.is-stuck .lang-switch {
        opacity: 0;
        visibility: hidden;
    }
}
@media (max-width: 1023px) {
    .lang-switch {
        top: calc(var(--header-height) / 2);
        transform: translateY(-50%);
        right: 70px;
        gap: 10px;
    }
    .top.is-stuck .lang-switch,
    .top.is-visible .lang-switch { right: 70px; }
    .lang-switch svg { width: 21px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .lang-switch a { transition: none; }
}

/* ---- Menu that doesn't fit (longer German/Spanish words) ----
   The script at the end of partials/footer.html adds one of these to
   <html> on screens 1024px and wider, only when the menu is too wide:
   .menu-tight    letters closer together
   .menu-compact  the Menu button, same as on tablets */
@media (min-width: 1024px) {
    html.menu-tight .top .navbar .navbar__menu { gap: calc(16 * var(--u)); }
    html.menu-tight .top .navbar .navbar__menu li { letter-spacing: .07em; }

    html.menu-compact .top .navbar .navbar__menu { display: none; }
    html.menu-compact .navbar .navbar__toggle { display: block; height: auto; padding: 1rem; }
    html.menu-compact .top > div { display: flex; justify-content: flex-end; }
    html.menu-compact .navbar { margin-top: calc(70 * var(--u)); }
    html.menu-compact .top.is-stuck,
    html.menu-compact .top.is-visible { height: var(--header-height); }
    html.menu-compact .top.is-stuck .navbar,
    html.menu-compact .top.is-visible .navbar { margin-top: 0; }
    html.menu-compact .lang-switch {
        top: calc(var(--header-height) / 2);
        transform: translateY(-50%);
        right: 70px;
    }
    html.menu-compact .navbar_mobile_overlay .navbar__menu { display: block; }
}

/* ---- Wide boxes on desktop, normal boxes on phones ----
   .lux-plan--wide  a box inside a row of boxes that takes the whole row
                    (Find Your Photo, in partials/cards-surf.html)
   .lux-plan--why   the "Why Get ..." box above the booking boxes on the
                    Surf Photography and Family Portraits pages
   On phones the boxes are one column anyway, so these look like any other. */
.lux-pricing-table > .lux-plan--wide { grid-column: 1 / -1; }
.lux-plan--wide > p { max-width: 46rem; margin-left: auto; margin-right: auto; }
.lux-plan--why { margin-bottom: var(--spacing-lg); }
@media (max-width: 768px) {
    .lux-plan--why { margin-bottom: var(--spacing-md); }
}

/* ---- Two boxes that join into one wide box on desktop ----
   Put "lux-merge" on a .lux-pricing-table row (Wall Art page). From 769px
   up the row is drawn as one box: one border, one shadow, one lift on
   hover, the boxes inside stacked without their own frames. On phones
   nothing changes: they are separate boxes, like everywhere else. */
@media (min-width: 769px) {
    .lux-merge {
        grid-template-columns: 1fr;
        gap: 0;
        background: #fff;
        border: 1px solid var(--color-shadow-medium);
        box-shadow: 0 var(--spacing-md) var(--spacing-xxl) var(--color-shadow-light);
        transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    }
    .lux-merge:hover {
        transform: translateY(-6px);
        border-color: rgba(0, 0, 0, .2);
        box-shadow: 0 var(--spacing-lg) var(--spacing-xxl) var(--color-shadow-medium);
    }
    .lux-merge > .lux-plan,
    .lux-merge > .lux-plan:hover {
        border: 0;
        box-shadow: none;
        transform: none;
        background: transparent;
    }
    .lux-merge > .lux-plan:first-child { padding-bottom: 0; }
    .lux-merge > .lux-plan + .lux-plan { padding-top: var(--spacing-sm); }
    .lux-merge > .lux-plan > p { max-width: 46rem; margin-left: auto; margin-right: auto; }
    /* the blank spacer lines inside the boxes: not needed once joined */
    .lux-merge > .lux-plan:first-child > p:last-child,
    .lux-merge > .lux-plan + .lux-plan > p + p { display: none; }
    .lux-merge > .lux-plan:first-child > p { margin-bottom: 0; }
    .lux-merge .lux-cta { margin-top: var(--spacing-lg) !important; }  /* beats the inline 10px */
}
@media (prefers-reduced-motion: reduce) {
    .lux-merge, .lux-merge:hover { transition: none; transform: none; }
}