/*
  Global stylesheet - single source of truth for the site.
  Instant Quickies AU (instantquickies.com.au), build 24 Aug 2026 for 26 Aug deploy.

  Structure:
    1) Reset and base
    2) Design tokens (:root)
    3) Layout primitives
    4) Components (site-wide reusable primitives only - page-specific
       styles live with their page builds, not here)
    5) Utilities
    6) Platform correction passes, carried forward from the BDSM Addicts
       build (20 Aug 2026), which is the most recent completed build of
       this type on this platform. Kept here rather than repeated inline
       per page because they are brand-agnostic platform defects, not
       brand decisions.

  89.3% of this brand's registrations are on mobile. Design and review
  mobile first.
*/

/* ===== 1) Reset and base ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

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

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 2) Design tokens ===== */
:root {
  /* Palette. Warm, adult, unhurried: a deep warm charcoal rather than a
     neon-hookup black, a muted terracotta primary rather than hot pink or
     red. Chosen to read as credible to a 35 to 55 year old, not to a
     browsing 20 year old. No brand asset pack existed at build time
     (instant-quickies-au had no tokens.json), so this palette is proposed
     and should be checked against any brand asset delivered before deploy. */
  --color-bg: #1a1613;
  --color-surface: #23201c;
  --color-surface-soft: #2d2925;
  --color-text: #f2ece4;
  --color-text-soft: #c4bab0;
  --color-primary: #c8703f;
  --color-primary-dark: #a25a30;
  --color-primary-light: #e3a578;
  --color-accent: #8fa89c;
  --color-focus: #8fa89c;

  /* Typography - system sans stack, no webfont payload */
  --font-heading: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);

  /* Motion */
  --transition-fast: 180ms ease;
  --transition-base: 260ms ease;

  /* Layout */
  --container-max: 72rem;
}

/* ===== 3) Layout primitives ===== */
.container {
  width: min(100% - 2rem, var(--container-max));
  margin-inline: auto;
}

.section {
  padding: var(--space-10) 0;
}

.grid {
  display: grid;
  gap: var(--space-4);
}

.grid-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

@media (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== 4) Components ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.site-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}

.site-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}
.site-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* CMS-rendered menus - `{{menu.navigation}}` and `{{menu.footer}}` expand to
   <ul class="canvas-navigation-menu"> / <ul class="canvas-footer-menu"> with
   <li><a> children. Style the generated classes directly. */

.canvas-navigation-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.canvas-navigation-menu > li {
  margin: 0;
}

.canvas-navigation-menu a {
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.95rem;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.canvas-navigation-menu a:hover,
.canvas-navigation-menu a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.canvas-footer-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.canvas-footer-menu > li {
  margin: 0;
}

.canvas-footer-menu a {
  color: var(--color-text-soft);
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.canvas-footer-menu a:hover,
.canvas-footer-menu a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

.breadcrumb a {
  color: var(--color-primary);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--color-text-soft);
  opacity: 0.6;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  min-height: 2.75rem;
  padding: 0.78rem 1.4rem;
  font-size: 0.98rem;
  line-height: 1;
  letter-spacing: 0.01em;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline-offset: 3px; }

.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
  box-shadow: none;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-surface-soft) 75%, #fff);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
}

.btn-ghost:hover {
  background: color-mix(in srgb, var(--color-surface-soft) 65%, transparent);
}

.btn-sm {
  min-height: 2.2rem;
  padding: 0.55rem 1rem;
  font-size: 0.87rem;
}

.btn-lg {
  min-height: 3rem;
  padding: 0.9rem 1.7rem;
  font-size: 1.04rem;
}

.btn-block { width: 100%; }

/* Card */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
  padding: var(--space-5);
}

.card-title {
  margin: 0 0 var(--space-2);
  font-size: 1.08rem;
}

.card-text {
  margin: 0;
  color: var(--color-text-soft);
}

/* Chip - pill-shaped tag */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.chip-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Prose - body copy blocks. Links inside prose need their own colour and
   underline because the base reset makes every link inherit body text
   colour, which makes an in-copy link invisible on a dark theme. This is
   the generalised, site-wide version of a fix BDSM Addicts had to apply
   per-component (`.guide-card-body a:not(.btn)`); promoted here so every
   page gets it for free rather than each build re-discovering it. */
.prose a:not(.btn),
.card-text a:not(.btn),
.site-footer a:not(.btn) {
  color: var(--color-primary-light);
  font-weight: 600;
  text-underline-offset: 3px;
}

.prose a:not(.btn):hover,
.card-text a:not(.btn):hover,
.site-footer a:not(.btn):hover {
  text-decoration: underline;
}

.prose h2 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: #fff;
}

.prose h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-size: 1.15rem;
  color: #fff;
}

.prose p, .prose ul, .prose ol {
  margin: 0 0 var(--space-4);
  color: var(--color-text-soft);
}

.prose li {
  margin-bottom: var(--space-2);
}

.prose strong {
  color: var(--color-text);
}

/* Illustrative-content flag, used wherever example profile text or example
   first messages appear (brand.md content policy point 4). Deliberately
   visible in the body, not a tooltip. */
.illustrative-flag {
  display: block;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-text-soft);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 var(--space-5);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

/* Site footer */
.site-footer {
  padding: var(--space-10) 0;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* Adults note - the 18+ line required in the footer of every page
   (brand.md content policy point 5, page-plan build requirement 9).
   Styled visibly, not hidden or tiny to the point of unreadability. */
.adults-note {
  font-size: 0.8rem;
  color: var(--color-text-soft);
  text-align: center;
  padding: var(--space-6) 0 var(--space-4);
  margin: 0;
}

/* ===== 5) Utilities ===== */
.text-center { text-align: center; }
.muted { color: var(--color-text-soft); }

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ------------------------------------------------------------------ */
/* 6) Platform correction passes, carried forward from BDSM Addicts    */
/* (built 20 Aug 2026, five correction passes, the most recent         */
/* completed build of this type). These are platform defects, not      */
/* brand decisions, so they belong here rather than being rediscovered */
/* per brand.                                                          */
/* ------------------------------------------------------------------ */

/* Dark submenu override. The platform ships nav dropdown panels LIGHT
   regardless of site theme. On a dark theme this makes the "More" style
   dropdown unreadable (white text on white, caught on BDSM Addicts'
   live site 20 Aug 2026). Force the panels onto the theme surface with
   explicit legible link colours. !important is deliberate: the platform
   styles load after ours. */
.hs-canvas-nav .hs-canvas-nav__submenu {
  background: #23201c !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55) !important;
}

.hs-canvas-nav .hs-canvas-nav__submenu .hs-canvas-nav__link {
  color: #f2ece4 !important;
}

.hs-canvas-nav .hs-canvas-nav__submenu .hs-canvas-nav__link:hover,
.hs-canvas-nav .hs-canvas-nav__submenu .hs-canvas-nav__link:focus {
  color: #e3a578 !important;
}

/* Mobile drawer fix. Same root cause as above: the platform's mobile nav
   drawer also ships light regardless of theme. 89.3% of this brand's
   registrations are mobile, so this is not a minor case. */
.hs-canvas-nav .hs-canvas-nav__menu--mobile,
.hs-canvas-nav__drawer,
.hs-canvas-nav__panel {
  background: #23201c !important;
}

.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__link,
.hs-canvas-nav__drawer .hs-canvas-nav__link,
.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__summary,
.hs-canvas-nav__drawer .hs-canvas-nav__summary {
  color: #f2ece4 !important;
}

/* Header logo sizing. The platform's inline width/height attributes on
   the logo <img> box it down to a fixed pixel size that reads as tiny
   once a real wordmark asset is dropped in (BDSM Addicts: Neil asked for
   it bigger, to match the members app's prominence, 20 Aug 2026).
   Override here so one asset deploy fixes every page. No logo asset
   existed for Instant Quickies at build time; this rule is ready for
   whatever asset lands before deploy. */
.site-logo img {
  width: 220px;
  height: auto;
  max-width: 60vw;
}

@media screen and (max-width: 47.99em) {
  .site-logo img {
    width: 180px;
  }
}

/* ===== Price tables =====
   Added 26 Aug 2026, when the June 2026 ratecard arrived and this brand's
   pricing page stopped being a placeholder.

   The mobile rule is not optional here. On Granny Dating the same table
   shipped with a 460px minimum inside a 339px content column, which put the
   "you are billed" figure, the one number a reader came for, off the right
   edge behind a scrollbar. 89.3% of this brand's registrations are on mobile,
   so the whole table has to fit the viewport. */
.price-table-wrap {
  overflow-x: auto;
  margin: var(--space-5) 0 var(--space-8);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
}
.price-table caption {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-soft);
  font-size: 0.85rem;
}
.price-table th,
.price-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  color: var(--color-text-soft);
}
.price-table th {
  color: var(--color-text);
  font-weight: 700;
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
}
.price-table td.price-figure {
  color: var(--color-text);
  font-weight: 600;
}
@media screen and (max-width: 47.99em) {
  .price-table { font-size: 0.94rem; table-layout: fixed; }
  .price-table th,
  .price-table td { padding: var(--space-3) var(--space-2); }
  .price-table th:first-child,
  .price-table td:first-child { padding-left: var(--space-3); }
  .price-table td { white-space: nowrap; }
}


/* ===== Hero image =====
   Added 26 Aug 2026. Build standard 1: the hero carries the brand's own image.
   This one is the brand's signup-flow asset, subject centred with grey either
   side, so the crop holds her centre and the scrim carries the text. Everything
   is guarded behind :has(.hero-img) so a hero without a picture is unaffected. */
.page-hero { position: relative; overflow: hidden; }
.page-hero:has(.hero-img) {
  background: #120e0c;
  min-height: 22rem;
  display: flex;
  align-items: center;
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  z-index: 0;
}
.page-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: none; }
.page-hero:has(.hero-img)::after {
  background:
    linear-gradient(to right, rgba(18,14,12,0.94) 0%, rgba(18,14,12,0.82) 38%, rgba(18,14,12,0.42) 66%, rgba(18,14,12,0.20) 100%),
    linear-gradient(to top, rgba(18,14,12,0.60) 0%, transparent 42%);
}
.page-hero:has(.hero-img) .container { position: relative; z-index: 2; }
.page-hero:has(.hero-img) h1 { color: #fff; max-width: 32rem; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.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.6);
}
.page-hero:has(.hero-img) .eyebrow { color: var(--color-primary-light); }

/* On a phone the whole width is the text column, so a left-to-right scrim does
   nothing. Flat wash instead, and hold the crop on the subject. */
@media screen and (max-width: 47.99em) {
  .page-hero:has(.hero-img) { min-height: 0; display: block; }
  .hero-img { object-position: 50% 26%; }
  .page-hero:has(.hero-img) h1,
  .page-hero:has(.hero-img) .page-hero-lead { max-width: none; }
  .page-hero:has(.hero-img)::after {
    background: linear-gradient(to bottom,
      rgba(18,14,12,0.55) 0%, rgba(18,14,12,0.70) 55%, rgba(18,14,12,0.88) 100%);
  }
}