/*
  Granny Dating Australia (grannydating.au)
  Global stylesheet, single source of truth for the site.
  Built 25 August 2026 for the 26 August deploy decision.

  Deliberate departure from the Kinky Singles and BDSM Addicts builds:
  this site is LIGHT, not dark, and the base type is 17px rather than 16px.
  Median registrant age on this brand is 56, and 61 on desktop. A dark
  theme at 16px is the wrong default for that audience, and the desktop
  share here (23.5%) is more than double a casual brand's, so desktop
  legibility is not a formality. Contrast targets AA at minimum
  throughout, and body text is AAA against the page background.

  Palette is drawn from the brand's own members-area header (#872cac),
  desaturated and darkened to a plum that reads adult without leering.
*/

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

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

:root {
  --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: #fbf8f6;
  --color-surface: #ffffff;
  --color-surface-alt: #f2ecec;
  --color-text: #21181f;
  --color-text-soft: #574a54;
  /* Indigo sampled from the brand's own hero photograph, whose collage background
     runs about #4c439c, then darkened to clear AA against white. The site and the
     established brand image now agree; before this they did not. */
  --color-primary: #453c92;
  --color-primary-dark: #302a6d;
  --color-primary-light: #7a70cc;
  --color-accent: #a8532b;
  --color-accent-light: #f0b183;
  --color-border: #ddd9ea;

  --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-3) 0; }
  .site-logo img { max-height: 56px; }
}

/* ===== 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 site ships with the brand's own established hero, `img/hero.jpg`, the same
   image the live site has run for years: a mature woman in lingerie against a purple
   photo montage, carrying the platform's own eye bar and starburst marks. It stays.
   The brand is a casual dating site for adults over 50 and the picture says so.

   The image is dark, so a hero carrying it inverts to light-on-dark while the rest of
   the page stays light. Everything below is guarded by :has(.hero-img), so a hero with
   no photograph still renders correctly on the light gradient. */
.page-hero:has(.hero-img) {
  background: #2b2560;
  border-bottom: none;
  min-height: 24rem;
  display: flex;
  align-items: center;
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 58% center;
  z-index: 0;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: none;
}
/* Text sits left, over the montage. The subject sits centre-right and stays visible. */
.page-hero:has(.hero-img)::after {
  background:
    linear-gradient(to right, rgba(20, 16, 52, 0.92) 0%, rgba(20, 16, 52, 0.78) 34%, rgba(20, 16, 52, 0.34) 62%, rgba(20, 16, 52, 0.14) 100%),
    linear-gradient(to top, rgba(20, 16, 52, 0.55) 0%, transparent 40%);
}
/* Keep the text column clear of the subject, who sits centre-right of the frame. */
.page-hero:has(.hero-img) h1 { color: #fff; max-width: 32rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.page-hero:has(.hero-img) .page-hero-lead {
  color: rgba(255, 255, 255, 0.94);
  max-width: 27rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.page-hero:has(.hero-img) .eyebrow { color: var(--color-accent-light); }
.page-hero:has(.hero-img) .btn-secondary { color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.page-hero:has(.hero-img) .btn-secondary:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.page-hero:has(.hero-img) .btn-primary { background: var(--color-accent); }
.page-hero:has(.hero-img) .btn-primary:hover { background: #8c4321; }

/* On a phone the whole width is the text column, so a left-to-right scrim does no work.
   Swap it for a flat wash, and let the crop centre on the subject. */
@media screen and (max-width: 47.99em) {
  .page-hero:has(.hero-img) { min-height: 0; display: block; }
  .hero-img { object-position: 56% center; }
  .page-hero:has(.hero-img) h1,
  .page-hero:has(.hero-img) .page-hero-lead { max-width: none; }
  /* Lighter than the desktop wash. The picture is the point on this brand, so the
     scrim only has to carry the text, and the text-shadow does part of that work. */
  .page-hero:has(.hero-img)::after {
    background: linear-gradient(to bottom,
      rgba(20, 16, 52, 0.52) 0%,
      rgba(20, 16, 52, 0.66) 55%,
      rgba(20, 16, 52, 0.84) 100%);
  }
}
.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; }

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