/*
  Mature Westcountry Singles global stylesheet. Adapted from the Granny Dating AU Hubbi build (Aug 2026):
  light theme, 17px base for an older audience.
*/

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 17px; -webkit-text-size-adjust: 100%; }

:root {
  --hero-bg: #e3eaf2;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-alt: #f2ecec;
  --color-text: #21181f;
  --color-text-soft: #574a54;
  --color-primary: #14405e;
  --color-primary-dark: #0d2d43;
  --color-primary-light: #4d7ea3;
  --color-accent: #7a4a14;
  --color-accent-light: #f0b183;
  --color-border: #d3dce6;

  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 2.5rem;   --space-8: 3rem;     --space-9: 4rem;
  --space-10: 5rem;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --maxw: 1120px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.22;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin-top: var(--space-7); }
h3 { font-size: clamp(1.1rem, 2vw, 1.25rem); margin-top: var(--space-5); }

p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.35rem; }
li { margin-bottom: var(--space-2); }

a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-primary-dark); }

strong { font-weight: 700; }

/* ===== Layout ===== */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-5); }
.content-narrow { max-width: 720px; }
.prose > *:first-child { margin-top: 0; }
.content-section { padding: var(--space-7) 0; }
.muted { color: var(--color-text-soft); font-size: 0.95rem; }

/* ===== Header ===== */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}
/* The platform's nav is a sibling of the logo inside this row and arrives full-width,
   which wrapped the hamburger onto a second line and doubled the header height on a
   phone. Keep them on one row and let the nav take the slack. */
.site-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: nowrap;
}
.site-logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.site-logo img { max-height: 46px; width: auto; }
.site-header-row .hs-canvas-nav {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@media screen and (max-width: 47.99em) {
  /* Shorter band, larger mark. The source logo is served at height=104 so it has the
     resolution to go up. */
  .site-header { padding: var(--space-2) 0; }
  .site-logo img { max-height: 50px; }
}

/* ===== Breadcrumb ===== */
.breadcrumb { font-size: 0.9rem; padding: var(--space-4) 0 0; color: var(--color-text-soft); }
.breadcrumb a { color: var(--color-primary); }
.breadcrumb-separator { margin: 0 var(--space-2); color: var(--color-text-soft); }

/* ===== Hero ===== */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) 0 var(--space-7);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-bg)), var(--color-bg) 72%);
  border-bottom: 1px solid var(--color-border);
}
.page-hero h1 { max-width: 640px; margin-bottom: var(--space-4); }
.page-hero-lead {
  font-size: 1.1rem;
  color: var(--color-text-soft);
  max-width: 580px;
  margin: 0 0 var(--space-5);
  line-height: 1.6;
}
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ===== Hero photograph =====
   The brand's own long-standing hero: a couple on the left of the frame and a pale, empty
   right-hand side. On desktop the copy sits in that empty right half.

   On a phone that framing does not work. The full-width source puts the couple hard against
   the left edge with a third of the band empty, so the picture element serves a separate
   crop cut to the couple, and the band takes that crop's own aspect ratio.

   The order rules below are the important part. The join button has to be on the first
   phone screen, which is about 640px tall once Safari's chrome is taken off a 390x844
   handset. Leading with eyebrow, H1 and buttons and putting the supporting paragraph
   after them keeps the button visible without cutting a word of copy or touching the H1. */
.page-hero:has(.hero-img) {
  background: var(--hero-bg);
  border-bottom: 1px solid var(--color-border);
  min-height: 30rem;
  display: flex;
  align-items: center;
}
/* Desktop: the photograph keeps its own proportions in the left-hand half.
   inset:0 with width:100% stretches it across the whole band and crops the
   heads off the top, so width is auto and the frame is capped at 62%. */
.hero-img {
  position: absolute; top: 0; left: 0; bottom: 0; width: auto; height: 100%; max-width: 62%;
  object-fit: cover; object-position: left top;
  z-index: 0;
}
.page-hero:has(.hero-img) .container { display: flex; justify-content: flex-end; }
.page-hero:has(.hero-img) .hero-copy { width: 50%; max-width: 34rem; }
.page-hero:has(.hero-img) h1 { max-width: none; }
@media screen and (max-width: 47.99em) {
  .page-hero:has(.hero-img) { min-height: 0; display: block; padding-top: 0; padding-bottom: var(--space-6); }
  .hero-img {
    position: static; width: 100%; max-width: none; height: auto;
    aspect-ratio: 700 / 390;
    object-fit: cover; object-position: center;
    margin-bottom: var(--space-4);
  }
  .page-hero:has(.hero-img) h1 { font-size: 1.6rem; margin-bottom: var(--space-3); }
  .page-hero:has(.hero-img) .eyebrow { margin-bottom: var(--space-2); }
  .page-hero:has(.hero-img) .container { display: block; }
  .page-hero:has(.hero-img) .hero-copy {
    width: auto; max-width: none;
    display: flex; flex-direction: column;
  }
  .hero-copy .eyebrow         { order: 1; align-self: flex-start; }
  .hero-copy h1               { order: 2; }
  .hero-copy .hero-cta-row    { order: 3; margin-bottom: var(--space-5); }
  .hero-copy .page-hero-lead  { order: 4; margin-bottom: 0; }
}
.page-hero .container { position: relative; z-index: 2; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.7rem 1.5rem;
  border: 2px solid transparent;
  line-height: 1.3;
  cursor: pointer;
}
.btn-lg { padding: 0.9rem 1.9rem; font-size: 1.05rem; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; }
.btn-secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-primary-dark); }

/* ===== Cards and grids ===== */
.link-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .link-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .link-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.link-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  color: var(--color-text);
  text-decoration: none;
}
a.link-card:hover { border-color: var(--color-primary); }
.link-card h3 { margin: 0 0 var(--space-2); font-size: 1.05rem; }
.link-card p { margin: 0; color: var(--color-text-soft); font-size: 0.95rem; }

/* ===== Members block =====
   The platform fills this section when the page is built (data-members-styles="none"
   gives its classed markup with no styles of its own), so everything below is ours.
   Cards follow .link-card: white surface, hairline border, medium radius.
   Two across on a phone, four across from 900px: seven members and the join tile
   make two full rows on a desktop. */
.members-block .lp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 900px) { .members-block .lp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.members-block .mem-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.members-block .mem-card img,
.members-block .mem-card__initial {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}
.members-block .mem-card__initial {
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}
.members-block .mem-card .badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: 0.1rem var(--space-2);
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
}
.members-block .mem-card__name {
  margin: var(--space-2) 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.members-block .mem-card__where,
.members-block .mem-card__line {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-soft);
  overflow-wrap: anywhere;
}
.members-block .mem-card__line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.members-block .mem-card__cta {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.members-block .mem-card__cta:hover { color: var(--color-primary-dark); }
.members-block .mem-card--join {
  display: grid;
  place-items: center;
  min-height: 9rem;
  text-align: center;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}
.members-block .mem-card--join .mem-card__cta,
.members-block .mem-card--join a {
  justify-content: center;
  margin: 0;
  font-size: 1.05rem;
  text-decoration: none;
}
.members-block .lp-members__empty {
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-soft);
}

/* One block per county, each asking for one member, so every county shows. The
   blocks and their lists are display: contents, which lets all seven cards and the
   join tile (on the last block only) sit in one grid. */
.members-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (min-width: 900px) { .members-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.members-grid > .members-block,
.members-grid .members-block .lp-grid { display: contents; }
.members-grid .lp-members__empty { display: none; }
/* A county can come back empty on a build. The join tile then takes two columns,
   so seven tiles still close the grid without a hole. */
.members-grid:has(.lp-members__empty) .mem-card--join { grid-column: span 2; }
/* The join tile belongs to the women's block; order keeps it in the last cell, after the men's card. */
.members-grid .mem-card--join { order: 1; }

/* ===== CTA band ===== */
.cta-band {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}
.cta-band h2 { margin-top: 0; }
.cta-band p { max-width: 540px; margin: 0 auto var(--space-5); color: var(--color-text-soft); }

/* ===== FAQ ===== */
.faq-item { border-bottom: 1px solid var(--color-border); padding: var(--space-5) 0; }
.faq-item h3 { margin: 0 0 var(--space-2); font-size: 1.08rem; }
.faq-item p { margin: 0; color: var(--color-text-soft); }

/* ===== Notes and tables ===== */
.note {
  background: var(--color-surface-alt);
  border-left: 4px solid var(--color-primary);
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: var(--space-5) 0;
}
.note p:last-child { margin-bottom: 0; }
.table-wrap { overflow-x: auto; margin: var(--space-5) 0; }
table { border-collapse: collapse; width: 100%; min-width: 460px; background: var(--color-surface); }
caption { text-align: left; font-size: 0.9rem; color: var(--color-text-soft); padding-bottom: var(--space-2); }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
th { font-weight: 700; background: var(--color-surface-alt); }

/* On a phone the whole table has to fit. A price table whose "you are billed"
   column sits off the right edge behind a scrollbar is hiding the one number a
   reader came for. Drop the min-width and tighten the cells instead. */
@media screen and (max-width: 47.99em) {
  table { min-width: 0; font-size: 0.94rem; table-layout: fixed; }
  th, td { padding: var(--space-3) var(--space-2); }
  th:first-child, td:first-child { padding-left: var(--space-3); }
  td { white-space: nowrap; }
}

/* ===== Footer ===== */
.adults-note {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  padding: var(--space-5) var(--space-5) 0;
  margin: 0 auto;
  max-width: var(--maxw);
}
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-7);
  padding: var(--space-6) 0;
  font-size: 0.95rem;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); }
.site-footer a { color: var(--color-primary); }
.footer-legal { font-size: 0.9rem; }

/* ===== Platform correction passes =====
   Carried forward from the Kinky Singles build (25 Aug 2026), which carried
   them from Instant Quickies AU (24 Aug) and BDSM Addicts (20 Aug). These are
   brand-agnostic platform defects, not brand decisions. */

/* The Canvas nav renders as a flat ul with no wrapping on narrow viewports. */
.hs-canvas-nav__menu { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; margin: 0; padding: 0; }
.hs-canvas-nav__link { text-decoration: none; font-weight: 600; color: var(--color-text); }
.hs-canvas-nav__link:hover { color: var(--color-primary); }

/* Platform injects its own paragraph margins inside injected blocks. */
.site-footer p { margin: var(--space-2) 0; }

/* ===== Additions for the October 2026 depth pass ===== */

/* Breadcrumb sits above the hero on inner pages. */
.breadcrumb { padding-bottom: var(--space-2); }
.breadcrumb [aria-current] { color: var(--color-text); }

/* Short reassurance line under the hero buttons. */
.hero-points { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: 0.95rem; color: var(--color-text-soft); }
.hero-points li { margin: 0; padding-left: 1.3rem; position: relative; }
.hero-points li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.7rem; height: 0.38rem; border-left: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: rotate(-45deg); }
@media screen and (max-width: 47.99em) { .hero-copy .hero-points { order: 5; } }

/* The direct answer that opens an article or a comparison. */
.answer {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5);
  margin: 0 0 var(--space-6);
  font-size: 1.05rem;
}
.answer p:last-child { margin-bottom: 0; }
.article-meta { font-size: 0.9rem; color: var(--color-text-soft); margin: 0 0 var(--space-5); }

/* Feature and fact lists set as cards. */
.feature-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin: var(--space-5) 0; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
.feature { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.feature h3 { margin: 0 0 var(--space-2); font-size: 1.05rem; }
.feature p { margin: 0; color: var(--color-text-soft); font-size: 0.97rem; }

/* Side-by-side comparison tables wrap their text rather than scrolling. */
.compare-table { min-width: 0; table-layout: fixed; }
.compare-table th:first-child, .compare-table td:first-child { width: 30%; }
.compare-table td, .compare-table th { white-space: normal; vertical-align: top; font-size: 0.95rem; }
@media screen and (max-width: 47.99em) { .compare-table td { white-space: normal; } .compare-table th, .compare-table td { font-size: 0.88rem; } }

/* Members on a location page: same card styling as the home page, one grid. */
.section-alt { background: var(--color-surface-alt); }
.place-list { columns: 2; column-gap: var(--space-6); padding-left: 1.1rem; }
@media (min-width: 640px) { .place-list { columns: 3; } }
nav.breadcrumb.container { padding: var(--space-4) var(--space-5) var(--space-2); }

/* === phone-fold-fix (8 Oct 2026; appended by hand, see alamex-overlay/build-standards/MOBILE-FIRST-SCREEN.md) ===
   Neil, 7 Oct 2026: "You tend to cut off the join button ... Cta should be above the fold", on every page. On phones
   only (below 48rem; desktop untouched) the hero join button must sit whole on the first screen, 16px clear of the
   cookie banner, at 375x560 as well as 390x640. Done by capping the phone photograph (lower on inner pages, which also
   carry the breadcrumb), trimming hero spacing, and putting the lead paragraph after the buttons on every hero, as the
   photograph heroes already did. No copy changes and the H1 is never hidden or shortened. */
@media screen and (max-width: 47.99em) {
  .page-hero .hero-img { max-height: 30svh; }
  .breadcrumb + .page-hero .hero-img { max-height: 17svh; margin-bottom: var(--space-3); }
  .breadcrumb { padding-block: var(--space-2); }
  .page-hero:not(:has(.hero-img)) { padding-top: var(--space-5); }
  .page-hero .hero-copy { display: flex; flex-direction: column; }
  :where(.page-hero .hero-copy > *) { order: 6; }
  .page-hero h1 { font-size: 1.6rem; line-height: 1.2; margin-bottom: var(--space-3); }
  .page-hero .eyebrow { margin-bottom: var(--space-2); }
}
/* === /phone-fold-fix === */