/*
Theme Name: Neaptide
Theme URI: https://neaptide.app
Author: Bertie Allen
Author URI: https://neaptide.app
Description: The site for Neaptide, a nervous-system reset app for iPhone and Apple Watch. Dark, quiet, and built around two directions — settle when you're wired, surface when you're numb. The palette and the animated tide are ported directly from the app's own source, so the site and the product cannot drift apart.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: neaptide
Tags: one-column, custom-logo, custom-menu, block-patterns, translation-ready, dark-mode
*/

/* Neaptide — site styles.
   Palette values are lifted verbatim from Shared/Palette.swift and Shared/Mark.swift.
   Single committed dark theme, deliberately: the app's palette file forbids bright,
   saturated surfaces on the grounds that they raise arousal, and a light mode for the
   site would argue against the product. Every colour is painted explicitly so the page
   holds on any host ground. */

:root {
  /* Ground and neutrals — every neutral is biased teal, no pure grey anywhere. */
  --deepwater: #08161a;
  --trench: #050e11;
  --ink: #e7eeeb;
  --body: #b7c5c1;
  --quiet: #8c9e9a;
  --hairline: rgba(231, 238, 235, 0.13);

  /* Brand and the two directions. Undertow and lastlight appear nowhere except
     where the page is actually talking about settling or surfacing. */
  --neaptide: #2e6f6b;
  --undertow: #4a6fa5;
  --lastlight: #c58a56;
  --shallows: #a9e7ee;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--deepwater);
  color: var(--body);
  font-family: var(--sans);
  font-weight: 350;
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* ---- Type ---------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
}

h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}

p { margin: 0; max-width: var(--measure); }

a { color: var(--shallows); text-decoration-color: rgba(169, 231, 238, 0.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--shallows); }

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

.label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--quiet);
  margin: 0;
}

.lead { font-size: clamp(1.1rem, 2.1vw, 1.3rem); line-height: 1.62; color: var(--ink); font-weight: 300; }

/* The app's own vocabulary, quoted. Set apart from the site's voice on purpose —
   when you see this face you are reading words that appear on the screen. */
.said {
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--quiet);
  font-size: 0.95em;
}

/* ---- Layout -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { position: relative; }

.band { padding: clamp(4rem, 8vw, 6.5rem) 0; }

.stack { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.stack.tight { gap: 0.9rem; }

/* Statement bands run on a spine: the eyebrow sits out in the left margin, the
   prose in the main column. Keeps the wide viewport from reading as dead space
   without resorting to a centred column. */
.rail { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.rail-body { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.rail-body p { max-width: 36rem; }

@media (min-width: 880px) {
  .rail { grid-template-columns: 11rem 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 0; }
  .rail > .label { padding-top: 0.85rem; }
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

@media (min-width: 860px) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split.flip > .shot-holder { order: -1; }
}

/* ---- Header -------------------------------------------------------------- */

.site-head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  padding-bottom: 0.5rem;
}

.lockup { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.lockup .mark { width: 30px; }
.lockup span {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.head-note { font-size: 0.8rem; letter-spacing: 0.06em; color: var(--quiet); }

/* ---- The mark ------------------------------------------------------------ */

.mark { display: block; height: auto; }
.mark path { fill: none; stroke: currentColor; stroke-linejoin: round; stroke-linecap: round; }

/* ---- Hero ---------------------------------------------------------------- */

.hero { padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(4rem, 10vw, 7rem); }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 7vw, 4.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; }
}

.hero h1 { margin-bottom: 0.4rem; }

/* The hold demo — the app's actual opening gesture, on the page.
   Nothing is hidden behind it; completing it only adds a line. */
.demo { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }

.hold {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  position: relative;
  width: min(62vw, 290px);
  aspect-ratio: 1;
  border-radius: 50%;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  display: grid;
  place-items: center;
}

.hold-glow {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(46, 111, 107, 0.55), rgba(46, 111, 107, 0.14) 55%, transparent 72%);
  transition: transform 900ms ease, opacity 900ms ease;
}

.hold-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hold-ring circle { fill: none; stroke-width: 1.5; }
.hold-track { stroke: rgba(231, 238, 235, 0.16); }
.hold-fill { stroke: var(--shallows); stroke-linecap: round; transition: opacity 400ms ease; }

.hold-word {
  position: relative;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--quiet);
  transition: color 600ms ease;
}

.hold[data-state="held"] .hold-glow { transform: scale(1.06); }
.hold[data-state="done"] .hold-glow { transform: scale(1.12); opacity: 0.9; }
.hold[data-state="done"] .hold-word { color: var(--ink); }
/* The ring has done its job by now; let it settle back rather than sit there lit. */
.hold[data-state="done"] .hold-fill { opacity: 0.4; }
.hold[data-state="done"] { cursor: default; }

.demo-note {
  min-height: 3.5rem;
  max-width: 22rem;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--quiet);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 800ms ease, transform 800ms ease;
}
.demo-note.shown { opacity: 1; transform: none; }

/* ---- Tides --------------------------------------------------------------- */

/* Full-bleed water lines. The path maths is ported from Shared/TideShape.swift —
   two summed sines at incommensurate rates, so the surface never visibly repeats. */
.tide {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}
.tide svg { display: block; width: 100%; height: 100%; }

.tide-bed { position: absolute; inset: 0; overflow: hidden; }

section > .wrap { position: relative; z-index: 1; }

/* ---- Screenshots --------------------------------------------------------- */

.shot-holder { display: flex; justify-content: center; }

.shot {
  display: block;
  width: 100%;
  max-width: 244px;
  height: auto;
  /* Matches the 12.4%-of-width corner used on the store frames. */
  border-radius: 12.4% / 5.71%;
  border: 1px solid rgba(231, 238, 235, 0.14);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(231, 238, 235, 0.04) inset;
  background: var(--trench);
}

.shot-pair { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; }
.shot-pair .shot { max-width: 210px; }

figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
figcaption { font-size: 0.82rem; color: var(--quiet); text-align: center; max-width: 22rem; }

/* ---- Directions ---------------------------------------------------------- */

.directions { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 900px) { .directions { grid-template-columns: 1fr 1fr; } }

.direction {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  align-items: flex-start;
  min-height: 30rem;
}

/* Everything except the water, which stays behind it. */
.direction > *:not(.tide) { position: relative; z-index: 1; }

/* The tint is a surface colour, exactly as in the app: it belongs to the water and
   the controls, not to running text. Type takes a lifted version of it so the cue
   survives without dropping small copy to 3.6:1 on this ground. */
.direction .label { color: var(--lift); opacity: 1; }
.direction h2 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); color: var(--lift); }
.direction p { font-size: 1rem; color: var(--body); }

.settle {
  color: var(--undertow);
  --lift: #8fa8ce;
  --edge: rgba(74, 111, 165, 0.55);
  border-right: 1px solid var(--hairline);
}
.surface {
  color: var(--lastlight);
  --lift: #dcae82;
  --edge: rgba(197, 138, 86, 0.55);
}

@media (max-width: 899px) {
  .settle { border-right: 0; border-bottom: 1px solid var(--hairline); }
}

.direction .terms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}
.direction .terms li {
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.7rem;
  color: var(--body);
  border: 1px solid var(--edge);
  border-radius: 999px;
}

.direction .shot { max-width: 190px; align-self: center; }

/* The two words that stay on screen the whole session. */
.controls { display: flex; align-items: center; gap: 0.9rem; font-size: 0.85rem; }
.pill {
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  background: currentColor;
  color: var(--deepwater);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.pill.ghost { background: none; color: inherit; border: 1px solid currentColor; opacity: 0.6; font-weight: 400; }

/* ---- Lists --------------------------------------------------------------- */

.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; max-width: var(--measure); }
.plain li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: baseline; }
.plain li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--neaptide);
  transform: translateY(-2px);
}

.nots { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; max-width: 30rem; }
.nots li {
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: var(--quiet);
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  text-decoration: line-through;
  text-decoration-color: rgba(197, 138, 86, 0.55);
}

/* ---- Note / disclaimer --------------------------------------------------- */

.note {
  border-left: 2px solid var(--lastlight);
  padding-left: 1.25rem;
  max-width: var(--measure);
  color: var(--quiet);
  font-size: 0.95rem;
}

/* ---- Price / store ------------------------------------------------------- */

.store {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  background: rgba(231, 238, 235, 0.03);
}
.store b { font-weight: 500; }
.store small { color: var(--quiet); font-size: 0.8rem; letter-spacing: 0.05em; }

/* Narrow screens stack the two halves rather than letting both wrap into columns. */
@media (max-width: 520px) {
  .store { flex-direction: column; align-items: flex-start; gap: 0.1rem; border-radius: 1.1rem; }
}

.price-figure {
  font-family: var(--serif);
  font-size: clamp(3rem, 9vw, 5rem);
  line-height: 1;
  color: var(--ink);
  font-weight: 300;
}

/* ---- Footer -------------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--hairline);
  background: var(--trench);
  padding: clamp(3rem, 7vw, 4.5rem) 0 3rem;
  font-size: 0.9rem;
}

.foot-grid { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; align-items: flex-start; }
.foot-links { display: flex; flex-direction: column; gap: 0.5rem; }
.foot-fine { color: var(--quiet); font-size: 0.85rem; max-width: 30rem; }
.foot-fine strong { color: var(--body); font-weight: 500; }

/* ---- Policy page --------------------------------------------------------- */

/* padding-block only — a shorthand here would cancel the gutter .wrap sets. */
.policy { padding-block: clamp(3rem, 8vw, 5rem) clamp(4rem, 9vw, 6rem); }
.policy .doc { max-width: 40rem; display: flex; flex-direction: column; gap: 2.25rem; }
.policy h2 { font-size: clamp(1.35rem, 2.6vw, 1.6rem); }
.policy section { display: flex; flex-direction: column; gap: 0.8rem; }
.policy p { max-width: 40rem; }
.policy dl { margin: 0; display: grid; gap: 0.75rem; }
.policy dt { color: var(--ink); font-weight: 500; font-size: 0.95rem; }
.policy dd { margin: 0 0 0.4rem; color: var(--body); }
.updated { font-size: 0.85rem; color: var(--quiet); letter-spacing: 0.04em; }

/* ==========================================================================
   WordPress
   Everything below this line exists because WordPress emits it — core classes,
   editor output, and the admin bar. Nothing above needed to know about any of it.
   ========================================================================== */

/* ---- Accessibility ------------------------------------------------------- */

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.skip-link:focus {
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--trench);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 6px;
}

/* ---- Menus --------------------------------------------------------------- */

.head-menu,
.foot-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.head-menu a,
.foot-links a {
  font-size: 0.9rem;
  color: var(--body);
  text-decoration: none;
}
.head-menu a:hover,
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.foot-links ul { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

.custom-logo { max-width: 160px; height: auto; }

/* ---- Document pages ------------------------------------------------------ */

.page-head { gap: 0.6rem; }
.page-head h1 { font-size: clamp(2rem, 5vw, 3rem); }

.entry-content { display: flex; flex-direction: column; gap: 1.4rem; }
.entry-content > * { margin: 0; }
.entry-content h2 { font-size: clamp(1.35rem, 2.6vw, 1.6rem); margin-top: 1rem; }
.entry-content h3 { margin-top: 0.5rem; }
.entry-content ul,
.entry-content ol { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.entry-content li::marker { color: var(--neaptide); }

.entry-content blockquote {
  border-left: 2px solid var(--neaptide);
  padding-left: 1.25rem;
  color: var(--quiet);
  font-style: normal;
}

.entry-content code,
.entry-content kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: rgba(231, 238, 235, 0.06);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.entry-content pre {
  background: var(--trench);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 1rem 1.15rem;
  overflow-x: auto;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.entry-content th,
.entry-content td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--hairline);
}
.entry-content th { color: var(--ink); font-weight: 500; }

.entry-content hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  width: 100%;
}

.entry-image img { border-radius: 10px; max-width: 100%; height: auto; }

.entry { display: flex; flex-direction: column; gap: 0.5rem; }
.entry h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.entry h2 a { color: var(--ink); text-decoration: none; }
.entry h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.entry-meta { font-size: 0.82rem; color: var(--quiet); letter-spacing: 0.04em; }

/* Required by WordPress even when unused visually. */
.sticky { position: relative; }
.bypostauthor > .comment-body { border-left: 2px solid var(--neaptide); padding-left: 1rem; }

/* ---- Alignment and captions ---------------------------------------------- */

.alignleft { float: left; margin: 0.3rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.3rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }

.alignwide { width: min(100%, 56rem); margin-inline: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-block-image figcaption {
  font-size: 0.82rem;
  color: var(--quiet);
  text-align: center;
  margin-top: 0.6rem;
}

.wp-block-image img { max-width: 100%; height: auto; border-radius: 10px; }

/* ---- Navigation and pagination ------------------------------------------- */

.post-nav,
.pagination,
.page-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.9rem;
}

.nav-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.pagination .current { color: var(--ink); }

/* ---- Forms --------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: rgba(231, 238, 235, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  width: 100%;
  max-width: 26rem;
}

input::placeholder,
textarea::placeholder { color: var(--quiet); }

button,
input[type="submit"],
.wp-block-button__link {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--deepwater);
  background: var(--shallows);
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 1.3rem;
  cursor: pointer;
}
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover { background: #c4eff4; }

.search-form { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* ---- Comments ------------------------------------------------------------ */

.comments { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 2rem; border-top: 1px solid var(--hairline); }
.comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.comment-list ol { list-style: none; padding-left: 1.5rem; }
.comment-body { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.95rem; }
.comment-meta { font-size: 0.82rem; color: var(--quiet); }
.comment-form { display: flex; flex-direction: column; gap: 0.9rem; }
.comment-form label { font-size: 0.85rem; color: var(--quiet); display: block; margin-bottom: 0.3rem; }
.comment-form .submit { align-self: flex-start; }

/* ---- Admin bar ----------------------------------------------------------- */

.admin-bar .skip-link:focus { top: 2.5rem; }

/* ---- Front-page spacing owned by the template ---------------------------- */

.rail-lead { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.controls-note { padding-top: clamp(2.5rem, 6vw, 4rem); }
.foot-note { margin-top: 2.5rem; }