/* ==================================================================
   Sweet Cake Studio — site.css
   ------------------------------------------------------------------
   One stylesheet for the whole site. No preprocessor, no build step,
   no external fonts (the server's CSP allows 'self' only).

   Sections
     1. Tokens        colours, sizes; dark is the default, light adapts
     2. Base          reset, body, links, focus
     3. Layout        page width, header, footer
     4. Brand         logo lockup, top navigation, language switch
     5. Hero          the slogan and its underline glow
     6. Sections      section spacing and the small uppercase headings
     7. Cards         the card grid (services now, working reference later)
     8. Prose         running text, legal key-value list
     9. Contact form
    10. Responsive    phone widths
   ================================================================== */


/* ------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */

:root {
  /* surfaces and text (dark theme, the default) */
  --bg:    #070b12;
  --bg-2:  #0b1220;
  --line:  #16243a;
  --text:  #d8e4f0;
  --muted: #7f95ab;

  /* accents: cyan for links and the slogan, amber only for focus */
  --cyan:      #38c8ff;
  --cyan-glow: rgba(31, 168, 232, 0.35);
  --amber:     #ffb347;

  /* measures */
  --max:    1040px;
  --gutter: 16px;
  --radius: 14px;
}

/* light theme: only when the visitor prefers it and nothing forces dark */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:        #f6f8fb;
    --bg-2:      #ffffff;
    --line:      #dbe3ee;
    --text:      #101826;
    --muted:     #5b6b7f;
    --cyan:      #0a84c2;
    --cyan-glow: rgba(10, 132, 194, 0.22);
    --amber:     #b86a00;
  }
}


/* ------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------ */

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark light;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

a:hover,
a:focus-visible {
  border-bottom-color: currentColor;
}

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


/* ------------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------------ */

/* the page column: every block sits inside a .wrap */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

header.site {
  padding: 40px 0 8px;
}

/* subpages (legal) have no hero, so the content starts with some air */
main.page {
  padding-top: 40px;
}

footer.site {
  margin-top: 40px;
  padding: 26px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
}

footer.site .wrap {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

footer.site a {
  color: inherit;
}


/* ------------------------------------------------------------------
   4. Brand
   ------------------------------------------------------------------ */

/* header row: logo lockup left, navigation right */
.brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

/* logo lockup: the mark (assets/img/logo.svg) + the wordmark SweetCake.Studio */
.brand .logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  border: 0;
}

.brand .word {
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: -0.01em;
}

.brand .word b {
  font-weight: 600;
}

.brand .word i {
  font-style: normal;
  color: var(--cyan);
}

nav.top {
  margin-left: auto;
  display: flex;
  gap: 18px;
  font-size: 0.95rem;
}

/* language switch: a small bordered chip at the end of the navigation */
nav.top .lang {
  align-self: center;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
}

nav.top .lang:hover,
nav.top .lang:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan);
}


/* ------------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------------
   The slogan is the hero. It stays on one line on desktop (owner,
   2026-09-28) and may wrap on phones. The cyan underline is a
   pseudo-element bar, and the glow belongs to the bar: it spreads
   sideways and downwards only, never into the letters above it.      */

/* .hero sits on the same element as .wrap, so it must restate the gutter */
.hero {
  padding: 64px var(--gutter) 40px;
}

.hero h1 {
  margin: 0 0 20px;
  max-width: 25ch;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

.hero h1 em {
  display: inline-block;
  position: relative;
  padding-bottom: 0.12em;
  font-style: normal;
}

.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--cyan);
  box-shadow: 0 6px 22px 2px var(--cyan-glow);
  /* clip everything above the bar's top edge; leave room below and beside it */
  clip-path: inset(0 -40px -40px -40px);
}

.hero p {
  margin: 0;
  max-width: 62ch;
  font-size: 1.15rem;
  color: var(--text);
}


/* ------------------------------------------------------------------
   6. Sections
   ------------------------------------------------------------------ */

section {
  padding: 36px 0;
}

/* section titles: small, spaced, uppercase, muted */
h2 {
  margin: 0 0 22px;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ------------------------------------------------------------------
   7. Cards
   ------------------------------------------------------------------
   One grid, two uses: the services (live) and the working reference
   of projects (phase 2, prepared in later/site/ — the icon slot, the
   "where to find" links and the dashed "coming" card belong to those). */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 250px;
  padding: 22px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.card:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan-glow), 0 18px 40px -22px var(--cyan-glow);
}

.card h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

/* project cards (phase 2): icon slot, links row, the dashed "coming" card */
.card .icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
}

.card .icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.card .find {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: auto;
  font-size: 0.95rem;
}

.card.soon {
  border-style: dashed;
  color: var(--muted);
}

/* the empty neon hexagon drawn for the "coming" card */
.hex {
  position: relative;
  width: 56px;
  height: 64px;
}

.hex::before,
.hex::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.hex::before {
  inset: 0;
  background: var(--cyan);
  opacity: 0.9;
}

.hex::after {
  inset: 3px;
  background: var(--bg-2);
}

/* service cards: no icon, wider minimum (3 + 2 on desktop), the "shape"
   line (duration, pricing model) pinned to the bottom in cyan */
.cards.svc {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: 22px 0 26px;
}

.card.svc {
  min-height: 0;
}

.card.svc h3 {
  font-size: 1.1rem;
  line-height: 1.3;
}

.card .shape {
  margin-top: auto;
  color: var(--cyan);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}


/* ------------------------------------------------------------------
   8. Prose
   ------------------------------------------------------------------ */

/* running text keeps a readable measure */
.prose {
  max-width: 66ch;
}

.prose h1 {
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 400;
}

.prose h2 {
  margin-top: 32px;
}

.prose ul {
  padding-left: 1.2em;
}

/* the sentence that opens a section, and the muted one that closes it */
.prose .lead {
  margin: 0;
  font-size: 1.08rem;
}

.prose .how {
  margin: 0;
  color: var(--muted);
}

/* key-value list on the legal page: term left, value right */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  font-size: 0.98rem;
}

.kv dt {
  color: var(--muted);
}

.kv dd {
  margin: 0;
}


/* ------------------------------------------------------------------
   9. Contact form
   ------------------------------------------------------------------ */

form.contact {
  display: grid;
  gap: 14px;
  max-width: 560px;
}

form.contact label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.95rem;
}

form.contact input,
form.contact textarea {
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

form.contact textarea {
  min-height: 140px;
  resize: vertical;
}

form.contact button {
  padding: 11px 18px;
  font: inherit;
  color: var(--cyan);
  background: transparent;
  border: 1px solid var(--cyan);
  border-radius: 10px;
  cursor: pointer;
}

/* the form ships disabled until its endpoint exists (docs/cross-repo.md) */
form.contact button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.note {
  color: var(--muted);
  font-size: 0.92rem;
}


/* ------------------------------------------------------------------
   10. Responsive
   ------------------------------------------------------------------ */

@media (max-width: 720px) {
  .hero {
    padding: 44px var(--gutter) 28px;
  }

  /* the wrapped slogan's bar runs edge to edge: keep its glow off the gutters */
  .hero h1 em::after {
    clip-path: inset(0 0 -40px 0);
  }

  nav.top {
    margin-left: 0;
  }
}