/*
  Global stylesheet - single source of truth for the site.
  Kinky Singles UK (kinkysingles.co.uk), build 25 Aug 2026 for 28 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 Instant
       Quickies AU build (24 Aug 2026), which itself carried them forward
       from the BDSM Addicts build (20 Aug 2026), the most recent
       completed build of this type on this platform at the time this
       brand was built. Kept here rather than repeated inline per page
       because they are brand-agnostic platform defects, not brand
       decisions.

  74.5% of this brand's registrations are on mobile. Design and review
  mobile first, but desktop is 21.9% here, more than double Instant
  Quickies' share, so the desktop layout is not an afterthought.
*/

/* ===== 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. Discreet, adult, confident: a deep aubergine-charcoal rather
     than a neon-fetish black, a muted wine-red primary rather than hot
     pink or shock red, and a warm bronze accent rather than anything
     that reads as garish. Chosen to read as credible to a 36-year-old
     screening the site, not to shock a 20-year-old into clicking. No
     brand asset pack existed at build time (kinky-singles had no
     tokens.json), so this palette is proposed and should be checked
     against any brand asset delivered before deploy. */
  --color-bg: #1b1420;
  --color-surface: #241a29;
  --color-surface-soft: #2e2233;
  --color-text: #f2ecf0;
  --color-text-soft: #c6b7c2;
  --color-primary: #9c2b46;
  --color-primary-dark: #7a2036;
  --color-primary-light: #cc6f85;
  --color-accent: #c9a15a;
  --color-focus: #c9a15a;

  /* 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; 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
   negotiation wording appears (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);
}

/* Pricing table */
.price-table-wrap {
  overflow-x: auto;
  margin: var(--space-5) 0 var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  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: #fff;
  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;
}
.price-table .price-label {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* 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 10). 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 via Instant Quickies */
/* AU (24 Aug 2026) from the BDSM Addicts build (20 Aug 2026, five       */
/* correction passes). These are platform defects, not brand decisions, */
/* so they belong here rather than being rediscovered per brand. Colour */
/* values below are updated to this brand's own surface/text/accent     */
/* tokens rather than left as Instant Quickies' literal hex values.     */
/* ------------------------------------------------------------------ */

/* 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: #241a29 !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: #f2ecf0 !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: #cc6f85 !important;
}

/* Mobile drawer fix. Same root cause as above: the platform's mobile nav
   drawer also ships light regardless of theme. 74.5% 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: #241a29 !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: #f2ecf0 !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 Kinky Singles 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;
  }
}