/**
 * The softer, rounder look.
 *
 * Cosmetics only. Nothing here moves an element, renames a class, changes a
 * word or touches a single line of app.js. It is corners, shadows and spacing,
 * which is why it can be switched off by deleting one <link> from index.html
 * and the app returns to exactly what it was.
 *
 * It deliberately overrides the note in brand.css that says never pill shaped.
 * That was the right call for an editorial brand; this is a booking app on a
 * phone, and Joy asked for the rounder consumer look on 6 August 2026.
 *
 * Loaded AFTER brand.css, so every rule here wins without !important.
 */

:root {
  /* brand.css says: change these two and the whole interface follows. */
  --radius: 20px;        /* cards, panels, photos, the big category tiles */
  --radius-sm: 999px;    /* buttons, inputs, chips: fully pill shaped */

  --radius-card: 24px;
  --radius-photo: 18px;
  --shadow-rest: 0 6px 22px rgba(14, 60, 62, 0.09);
  --shadow-lift: 0 16px 40px rgba(14, 60, 62, 0.16);
}

/* ---------- cards ---------- */

/* The kit's signature: no outline, a soft shadow instead, and the photograph
   floating inside the card rather than running to its edges. */
.card {
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-rest);
  padding: 10px;
  background: var(--white);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.card .photo {
  border-radius: var(--radius-photo);
  overflow: hidden;
}

/* The photo no longer touches the card edge, so the body needs less inset. */
.card .body { padding: 16px 14px 10px; }

/* Small things sitting on the photograph follow the same curve. */
.card .photo .flag,
.card .photo .itin-pill { border-radius: 999px; }

/* ---------- buttons, chips, inputs ---------- */

.btn { border-radius: 999px; padding: 16px 32px; }

/* Radius only. Widening the padding pushed "Day charters" and "Culture and
   food" onto two lines, which made the grid taller and untidier than before. */
.chip { border-radius: 999px; }

input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="number"], select {
  border-radius: 999px;
}

/* A pill on a multi-line box looks wrong, so the textarea keeps a soft corner. */
textarea { border-radius: 18px; }

.searchbar input { border-radius: 999px; padding-left: 44px; }

/* ---------- the logo, back on phones ---------- */

/**
 * index.html hides the logo below 700px, because the nav row alone already
 * fills a phone and the logo was squeezing "My bookings" off the edge. The
 * answer is not to shrink either one until both are unreadable: it is to give
 * them a row each. Logo on top, the things a guest taps underneath, full width.
 *
 * Height rather than width, because the 2026 mark is a wide lockup: 26px tall
 * puts the wordmark at a size that can actually be read, which is the whole
 * point of having it there.
 */
@media (max-width: 700px) {
  /* 8px rather than 10 above, below and between the two rows. Both rows now
     hold 44px pills, and at 10px the sticky header came to 118px, which is a
     seventh of the screen given over to itself on every scroll. */
  .appbar .wrap {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .brandmark { display: flex; order: 1; }
  .brandmark img { height: 26px; width: auto; }
  nav.top { order: 2; width: 100%; }
}

/* ---------- the header links, as pills ---------- */

/**
 * Excursions, Itinerary and My bookings were plain words in a row, which read
 * as a caption rather than as three places you can go. As pills they read as
 * buttons, they match the category chips further down the page, and each one
 * becomes a tap target with edges rather than a word to aim at.
 *
 * Quiet by default: a hairline and white, not solid teal. The header carries
 * these on every screen, and three filled teal buttons at the top of every
 * page would shout over the photograph. SOS keeps its red, and only loses its
 * square corner so the row is one family.
 */
nav.top a {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 8px 16px;
  background: var(--white);
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
nav.top a:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--pale-teal);
}
nav.top a.sos-link { border-radius: 999px; padding: 7px 15px; }

/* The way back to grenadaconcierge.com.
   Joy, 21 Oct 2026: "once you're directed into Book, the Main site pill should
   be teal so visitors can see it clearly to get back to the main site". So for
   the person it is meant for it is the one solid teal pill in the row, white
   type, darker teal on hover.
   Joy, 28 Oct 2026: "on the app itself it looks odd". Both are right, because
   they are about different people. It is now HIDDEN BY DEFAULT and shown only
   when the script in index.html finds that this visitor arrived from the
   website; see the comment there for who that is and why it is remembered.
   Hidden in CSS and revealed, never drawn and then taken away. */
nav.top a.site-link { display: none; }
html.came-from-site nav.top a.site-link { display: inline-block; }
nav.top a.site-link {
  border-color: var(--teal);
  background: var(--teal);
  color: var(--white);
}
nav.top a.site-link:hover {
  border-color: var(--teal-dark);
  background: var(--teal-dark);
  color: var(--white);
}
/* Below 700px the row is three equal pills, so Main site takes its own slim
   full-width row underneath them. It used to be hidden here, which is exactly
   where people were getting stuck. */
@media (max-width: 700px) {
  nav.top { flex-wrap: wrap !important; row-gap: 8px !important; }
  nav.top a.site-link {
    order: 9;
    flex: 0 0 100% !important;
    padding: 8px 6px !important;
  }
}

@media (max-width: 700px) {
  /* The language picker sits on the logo row, so the pills have the full width
     to themselves. It is built as a bare <select> in app.js, which meant a
     square-cornered grey box sitting above a row of round-cornered pills: the
     one thing in the header that belonged to nothing.

     It is now a pill of exactly the same size, in exactly the same column, as
     SOS below it. One third of the row wide, matching the thirds the pills are
     divided into, and pushed right by the auto margin so the two line up in a
     column. The border and the radius move to this wrapper and the select
     inside it goes transparent, which keeps the native dropdown (and its
     chevron, and the phone's own language list) rather than rebuilding one. */
  .lang-pick-wrap {
    order: 1;
    margin-left: auto;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: calc((100% - 16px) / 3);
    min-height: 44px;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--white);
  }
  #lang-pick {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    /* 42, not 44: the wrapper's own 1px border top and bottom makes up the
       difference, so the pill measures the same 44px as SOS beneath it. */
    height: 42px;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    color: var(--ink) !important;
    text-align: center;
    text-align-last: center;
  }

  /* Three pills, each taking exactly one third of the row.
     Neither of the obvious answers worked. space-between pushed Itinerary and
     SOS to the two edges and left a hole in the middle; space-evenly padded
     both ends instead, so the row started inside the margin and nothing lined
     up with the logo above it. Equal thirds fix both at once: the row spans
     the same margins as the logo, the gaps between the pills are identical by
     construction, and three different word lengths stop looking like three
     different buttons. */
  nav.top {
    flex-wrap: nowrap;
    justify-content: space-between;
    column-gap: 8px !important;
    row-gap: 0;
  }

  /* brand.css squeezes these to padding 6px 1px with !important below 430px,
     to force five items onto one line. There are three now and the picker has
     moved, so the squeeze is no longer needed and it is what stopped these
     reading as buttons. Overridden rather than deleted, because that rule
     still applies to anyone running without this stylesheet. */
  /* flex: 1 1 0 with a zero basis, so the widths come from the row rather than
     from the words: "My bookings" is nearly twice "SOS" and would otherwise
     take nearly twice the space. min-width: 0 lets a narrow phone shrink them
     rather than overflow, and the side padding is small because the width is
     no longer doing the work. */
  nav.top a,
  nav.top a.sos-link {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 10px 6px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
}

/* The narrowest phones still sold, 320px wide. A third of that row leaves 83px
   inside a pill and "My bookings" needs 92px at 13px, so it broke its own
   border. One point of type buys back the nine pixels. */
@media (max-width: 359px) {
  nav.top a,
  nav.top a.sos-link {
    padding: 10px 2px !important;
    font-size: 12px !important;
  }
  /* The pills lose 2px of height with the smaller type, so the picker above
     them loses the same 2px and the two stay identical. */
  .lang-pick-wrap { min-height: 42px; }
  #lang-pick { height: 40px; font-size: 12px !important; }
}

/* ---------- the landing hero ---------- */

/**
 * On a phone the hero was a short landscape band with the words in black
 * underneath it, because index.html refuses to crop the photograph. That is
 * why the landing page felt flat next to the cards: it was the one screen
 * with no depth on it at all.
 *
 * This fills the whole screen with the photograph and floats the words on it,
 * which is what a guest opening a Caribbean travel app expects to see. The
 * aerial of Levera and Sugar Loaf crops to portrait well, the horizon sits
 * high and the interest is in the lower two thirds.
 */
@media (max-width: 1000px) {
  .hero {
    position: relative;
    color: var(--white);
    /* Three quarters, not the whole screen. A full-height box is far narrower
       than the photograph's composition, so it could only ever show about half
       of it and the sweep of Levera beach fell outside the frame. At 75% the
       whole picture fits, and the section beneath peeks in at the bottom,
       which tells a guest there is more below without a prompt. */
    min-height: 75vh;
    min-height: 75svh;   /* ignores the phone's address bar, no jump on scroll */
    display: flex;
    /* Top, not bottom. Measured on the photograph: the deep water in the top
       third runs at luminance 92 to 103, which carries white type on its own.
       Below that it brightens past 120 and needs help. Putting the words where
       the picture is already dark means no wash over it at all. */
    /* Top, because this photograph carries the type there. Measured at Joy's
       412px phone, the sky under the headline varies by 27 against 50 to 55
       anywhere on the beach shots. Variation, not brightness, is what makes
       white letters break up. */
    align-items: flex-start;
    overflow: hidden;
  }

  /* <picture> is only a wrapper; it must not create a line box of its own or
     it adds a stray gap above the photograph. */
  .hero picture { display: contents; }

  /* The photograph becomes the background rather than a block in the flow. */
  .hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Centred, because this photograph is composed on a diagonal: the beach
       runs corner to corner and any offset cuts one end of it off. The old
       58% 46% was tuned for the Sugar Loaf picture, where the subject sat off
       to one side. Change this only after looking at the crop, not by eye in
       a narrow pane. */
    object-position: 50% 50%;
  }

  /* White on pale turquoise is close to unreadable, and the water in the lower
     half of this photograph is very pale indeed. The foot of the gradient is
     therefore heavy: it is carrying the headline, the paragraph and the
     eyebrow, not just softening the edge. */
  .hero::before {
    display: block;
    /* One flat veil across the whole frame, not a gradient. A gradient dims
       one part of a picture and leaves the rest, which is what read as
       ruining it: the sea went muddy at the bottom and stayed vivid at the
       top. An even veil takes every tone down by the same amount, so the
       relationship between the colours is untouched and it still reads as
       the same bright photograph, just half a stop darker. */
    display: block;
    background: rgba(6, 26, 45, 0.30);
  }

  /* All the text together, sitting low. The last paragraph carries a default
     bottom margin that stacks on top of the padding, so the block was floating
     higher than it looked like it should. Zero it and the padding alone sets
     the gap, which is the only way this stays predictable. */
  .hero .wrap {
    background: none;
    padding-top: var(--space-4);
    padding-bottom: var(--space-3);
  }
  .hero .wrap > p:last-child { margin-bottom: 0; }
  .hero .eyebrow { margin-bottom: 6px; display: block; }
  .hero h1 { margin: 0 0 14px; }

  /* A little lift under the type as well, for the palest frames. */
  .hero h1, .hero p, .hero .eyebrow { text-shadow: 0 1px 12px rgba(6, 26, 45, 0.45); }

  .hero .wrap {
    position: relative;
    z-index: 1;
    padding-top: var(--space-4);
    padding-bottom: var(--space-5);
  }

  /* Room under the words for the Fund line, so on a short phone the hero
     grows to hold it rather than the line sitting on top of the button. */
  .hero.has-giving .wrap { padding-bottom: calc(var(--space-5) + 72px); }

  .hero h1 { color: var(--white); }
  .hero p { color: rgba(255, 255, 255, 0.94); }
  .hero .eyebrow { color: rgba(255, 255, 255, 0.92); }
}

/* The hero call to action, at every width, because the hero sits on the
   photograph on desktop as well. A white plate with teal type reads off the
   water; solid teal sank into it.
   Smaller than the standard button: at full size it was wider than the
   paragraph above it and pulled the eye away from the picture. The type goes
   up one step in weight to hold its own at the reduced size, and the shadow
   comes off, which it had inherited from the paragraph it sits inside and
   which was blurring the teal. */
.hero .btn {
  background: var(--white);
  color: var(--teal);
  padding: 12px 26px;
  font-size: 14.5px;
  font-weight: 700;
  text-shadow: none;
}
.hero .btn:hover { background: var(--pale-teal); color: var(--teal-dark); }

/* ---------- the gap under "See the year in Grenada" ---------- */

/**
 * Three separate pieces of space were stacking under that button: the
 * paragraph's own bottom margin, the section's 36px of padding, and the next
 * section's 36px on top. Close to 90px of empty white between a button and
 * the next heading, which on a phone reads as the page having ended.
 *
 * The paragraph margin is zeroed where it is written, in app.js. This closes
 * the section's own padding so the break is one comfortable step rather than
 * three. The hairline above still marks where the section changes, so nothing
 * is lost by taking the air out.
 */
.whats-on { padding-bottom: 12px; }

/* ---------- panels ---------- */

/* Anything else that reads as a surface picks up the same softer corner
   through --radius above. This is only for the shadow, which the tokens
   cannot carry on their own. */
.on-mist { border-radius: var(--radius-card); }