/* Site-wide reusable component and layout styles (nav, buttons, cards, footer, etc.) */

/* ---- Buttons ("Button Large" text style, pill shape) ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--space-2xl);
  border-radius: var(--space-full);
  border: none;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 27px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* Never wider than whatever column the button sits in — a long label (e.g.
   Claims' "24/7 Emergency Claim Numbers") is otherwise held on one line by
   white-space: nowrap and pushes the page into horizontal scroll on the
   narrowest phones. Below 768px the label is allowed to wrap onto a second
   line instead, with the pill growing to fit (see the media query at the
   end of this block). Desktop keeps the exact 48px single-line pill. */
.btn {
  max-width: 100%;
}

.btn-primary {
  background: var(--colour-cta-orange);
  color: var(--colour-white);
}

/* Hover/focus states for every .btn variant live together in
   css/motion.css, so the whole family stays consistent. */
.btn-secondary {
  background: var(--colour-white);
  color: var(--colour-brand-teal);
}

/* New variant for the Featured stories CTA ("Visit the Boating hub") and
   the site footer's policy pills — .btn-primary/.btn-secondary above are
   untouched. */
.btn-teal {
  background: var(--colour-brand-teal);
  color: var(--colour-white);
}

/* New variant for the Global CTA's "Get in touch with a specialist" —
   Figma uses --colour-orange (#F58634) here, a distinct token from
   --colour-cta-orange (#F57E25) used by .btn-primary. */
.btn-orange {
  background: var(--colour-orange);
  color: var(--colour-white);
}

/* New variant for secondary CTAs on dark/photographic hero backgrounds
   (first used by the Insurance page hero's "Read more") — transparent
   fill, white-70% border, white text. Distinct from .btn-secondary (solid
   white fill, teal text), which is for CTAs on light backgrounds. */
.btn-outline {
  background: transparent;
  border: 1px solid var(--colour-white-70);
  color: var(--colour-white);
}

/* New variant for secondary CTAs on light backgrounds where a solid
   .btn-secondary (white fill) would disappear — teal border/text over a
   white fill, e.g. a stepped form's "Back" action (css/form.css). */
.btn-outline-teal {
  background: var(--colour-white);
  color: var(--colour-brand-teal);
  border: 1px solid var(--colour-brand-teal);
}

/* Mobile: the pill grows to fit a wrapped label rather than holding one
   line at any cost. Desktop's fixed 48px single-line pill is untouched. */
@media (max-width: 767px) {
  .btn {
    height: auto;
    min-height: 48px;
    padding: var(--space-m) var(--space-xl); /* 12px 20px */
    white-space: normal;
    text-align: center;
  }
}

/* ---- Notice bar ----
   Full-bleed global announcement strip, sits in normal document flow above
   the header/hero. Static text only — no dismiss control, no JS. */
.notice-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 21; /* above .site-header's 20, so it always stays the topmost fixed layer */
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--colour-orange);
}

.notice-bar__text {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--colour-charcoal);
  text-align: center;
}

/* Fixed positioning takes .notice-bar out of normal flow, so the page's
   in-flow content (starting with .hero) would otherwise ride back up
   under it. body:has() reserves exactly the bar's own height, and only
   when the bar is actually present in the page — no JS, and pages without
   a notice bar are completely unaffected. */
body:has(.notice-bar) {
  padding-top: 48px;
}

@media (max-width: 767px) {
  /* Height stays the fixed 48px .site-header's own top offset is measured
     against (see css/header.css) — the text is clipped to one line with an
     ellipsis on the narrowest phones rather than wrapping and silently
     invalidating that offset. */
  .notice-bar {
    padding: 0 var(--space-l);
  }

  .notice-bar__text {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
  }
}

/* ---- Eyebrow ----
   Small pill label shown above a section heading (Self Service,
   Testimonials, Featured Stories). One shared implementation instead of
   three identical copies — sections only override `background` where
   their own section background requires the opposite contrast (see
   css/home.css); white here is the majority case. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: var(--space-2xs) var(--space-m); /* 4px 12px */
  background: var(--colour-white);
  border-radius: var(--space-s); /* 8px */
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  line-height: 19.5px;
  letter-spacing: 0.42px;
  color: var(--colour-body-grey);
  white-space: nowrap;
}

/* ---- Product selector ----
   The "Find the right cover" card + grid of product tiles. Generic/reusable
   naming since this card is likely to appear on more than one page — the
   positioning that overlaps it with the homepage hero/wave lives separately
   in css/home.css. Data (name/icon/href) and rendering are in
   js/product-selector.js. */

/* Side gutter for the section that holds the panel — without it the card
   (which is capped at the site's 1280px measure) runs edge-to-edge against
   the viewport at every width below 1280px, so its rounded corners/border
   read as cut off. No effect at desktop, where the viewport is wider than
   the panel's own cap. */
.product-selector {
  padding-inline: var(--page-gutter);
}

.product-selector__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xl);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px var(--space-2xl);
  box-sizing: border-box;
  background: var(--colour-grey-101);
  border: 1px solid var(--colour-light-grey);
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.product-selector__heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  /* Fluid 24px (mobile) → 36px (desktop) — same clamp() technique as the
     Home page section headings (css/home.css). */
  font-size: clamp(24px, 18.74px + 1.348vw, 36px);
  line-height: clamp(30px, 23.42px + 1.685vw, 45px);
  text-align: center;
}

.product-selector__heading-dark {
  color: var(--colour-header-grey);
}

.product-selector__heading-accent {
  color: var(--colour-brand-teal);
}

.product-selector__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-l);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.product-selector__item {
  width: 233px;
}

.product-selector__link {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  width: 100%;
  padding: var(--space-m) var(--space-xl) var(--space-m) var(--space-m);
  box-sizing: border-box;
  background: var(--colour-white);
  border-radius: 4px;
  text-decoration: none;
}

/* colour-grey-200 rather than the panel's own grey-101 — hovering a tile
   needs to read as darker than the card behind it, not disappear into it. */
.product-selector__link:hover,
.product-selector__link:focus-visible {
  background: var(--colour-grey-200);
}

.product-selector__link:focus-visible {
  outline: 2px solid var(--colour-brand-teal);
  outline-offset: 2px;
}

.product-selector__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--space-s);
  background: rgba(0, 0, 0, 0.02);
}

.product-selector__text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 0%;
  min-width: 0;
  gap: var(--space-s);
}

.product-selector__name {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  color: var(--colour-header-grey);
  white-space: nowrap;
}

.product-selector__chevron {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .product-selector__panel {
    gap: var(--space-2xl);
    padding: var(--space-2xl) var(--space-l);
    border-radius: var(--space-s);
  }

  /* Two tiles per row rather than the desktop wrap-to-233px flow, so ten
     products settle into a tidy grid instead of an uneven ragged wrap at
     narrow widths. minmax(0, 1fr) rather than a bare 1fr: a 1fr track's
     implicit min-width is `auto` (its content's own min-content width),
     which pinned the panel to ~391px and pushed every phone narrower than
     that into horizontal scroll. */
  .product-selector__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-s);
  }

  .product-selector__item {
    width: 100%;
  }

  .product-selector__link {
    padding: var(--space-s) var(--space-m);
  }

  .product-selector__name {
    font-size: 15px;
    white-space: normal;
  }
}

/* Below ~375px two tiles per row no longer fit: the icon (48px) + a
   product name's own longest word + the chevron need more than half a
   320px viewport, and the chevron was being pushed past the panel edge.
   One tile per row from there down. */
@media (max-width: 374px) {
  .product-selector__grid {
    grid-template-columns: 1fr;
  }
}