/*
 * Clockworks Digital brand foundation.
 *
 * VoxelSite's TailwindCompiler reads this file for --color-* custom properties
 * and registers each one as a Tailwind theme colour, so bg-ink, text-orange and
 * friends resolve. It then scans the pages and compiles the classes it finds
 * into assets/css/tailwind.css.
 *
 * That is why this file exists: it makes the site self-compiling. Before it,
 * the pages loaded a stylesheet built outside VoxelSite, so any Tailwind class
 * the client introduced through the editor had no CSS behind it and simply did
 * nothing.
 *
 * Everything here is either a token the compiler needs, or something Tailwind
 * cannot express: font faces, base element styles, and the two font utilities.
 */

/* -- Brand tokens --
   Taken from the live WordPress stylesheet, not chosen. #ff4918 is the link and
   accent orange, #ed1941 the pink the banner gradient runs from, #231f20 the
   near-black of the fixed footer. */
:root {
  --color-ink: #231f20;
  --color-orange: #ff4918;
  --color-orange-light: #ff7e00;
  --color-pink: #ed1941;
  --color-white: #ffffff;
  --color-black: #000000;

  /* Two greys, because one cannot pass AA on both backgrounds.
     The original used #808285 everywhere, which measures 4.23:1 on the ink
     footer and 3.85:1 on white. Both fail the 4.5:1 minimum, the first by only
     0.27. These are the nearest values that pass, and the shift is not visible
     side by side.
       --color-grey      on #231f20 = 4.70:1
       --color-grey-dark on #ffffff = 4.89:1 */
  --color-grey: #878a8d;
  --color-grey-dark: #6f7174;

  /* #ff4918 on white is 3.38:1, so the orange is darkened for the one place it
     carries small text on a light background: the required-fields note under
     the contact form. 4.50:1 exactly. Display orange is untouched. */
  --color-orange-on-light: #d93f12;

  --font-display: "Gobold", "Arial Narrow", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* ── Standard Tokens (auto-injected) ── */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --radius-default: 4px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* -- Brand typeface --
   Gobold carried over from the WordPress theme. Only woff and ttf ship: the
   original also served eot and svg, which exist for IE8 and ancient iOS Safari.
   Filenames are lowercase because VoxelSite lowercases on upload, and a
   capitalised reference 404s on a case-sensitive Linux host. */
@font-face {
  font-family: "Gobold";
  src: url("/assets/fonts/gobold.woff") format("woff"),
       url("/assets/fonts/gobold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GoboldBold";
  src: url("/assets/fonts/goboldbold.woff") format("woff"),
       url("/assets/fonts/goboldbold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* -- Font utilities --
   The compiler registers colours from this file but not font families, so
   these two are declared directly. They read the tokens above, keeping the
   font name in one place. */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

/* -- Utilities VoxelSite's compiler does not resolve --
   Reported by `POST /compile` as unresolved_classes. Declared here so the
   compile comes back clean and, more importantly, so these actually work.
   `group` is deliberately absent: it is a marker for group-hover and carries
   no styles of its own. */
.align-bottom { vertical-align: bottom; }
.align-top    { vertical-align: top; }

/* The hamburger is a two frame sprite slid on hover. Honour a reduced-motion
   preference by only animating when motion is safe. */
@media (prefers-reduced-motion: no-preference) {
  .motion-safe\:transition-\[margin-top\] {
    transition-property: margin-top;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  .motion-safe\:duration-200 { transition-duration: 200ms; }
}

/* -- Working around two VoxelSite compiler bugs --
 *
 * Both were found by diffing VoxelSite's compiled tailwind.css against a real
 * Tailwind build of the same markup. Neither announces itself: the page renders,
 * it just renders wrong.
 *
 * 1. Borders vanish. Real Tailwind emits
 *        .border-\[3px\]{border-style:var(--tw-border-style);border-width:3px}
 *    VoxelSite emits only the width. CSS defaults border-style to none, so a
 *    3px border draws nothing. Setting the style globally restores it; elements
 *    without a width still show no border, which is the Tailwind behaviour.
 *
 * 2. calc() loses its spaces. Real Tailwind emits calc(100vh - 100px);
 *    VoxelSite emits calc(100vh-100px), which is invalid CSS, so the whole
 *    declaration is dropped and the full height banner collapses. Rather than
 *    patch their compiler, which an update would overwrite, the one calc we
 *    need is declared here as a named utility.
 */
/* Both halves are required, and this is exactly what Tailwind's own preflight
   does. border-style alone makes every element inherit the browser's default
   border-width of medium, so the whole page gains outlines; border-width: 0
   resets that, leaving the utilities to set a width where one is wanted. */
*, ::before, ::after { border-width: 0; border-style: solid; }

/* Subtracts the fixed 100px footer, and below lg also the 65px mobile header,
   which the original calculation missed and which left the hero 65px too tall
   with the content sitting visibly low. */
.min-h-viewport-less-footer { min-height: calc(100vh - 100px - 65px); }
@media (min-width: 1024px) {
  .min-h-viewport-less-footer { min-height: calc(100vh - 100px); }
}

/* The two contact form columns: half the row minus half the 35px gutter.
   The class name is doubled deliberately. These elements also carry w-full for
   the stacked mobile layout, and tailwind.css loads after this file, so at equal
   specificity w-full would win at every width and the form would never go to two
   columns. Doubling the selector outranks it without resorting to !important. */
@media (min-width: 1024px) {
  .w-half-minus-gutter.w-half-minus-gutter { width: calc(50% - 18px); }
}

/* -- Base elements --
   The original declared font-family 'Roboto' for body copy but never loaded a
   Roboto face, so the live site has always rendered body text in the system
   sans. Matched on purpose: this is a faithful rebuild, and adding a webfont
   would change how the site looks. */
body {
  background-color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: #000;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: normal;
  line-height: 1.1;
  margin: 0 0 15px;
}

a {
  color: var(--color-orange);
  text-decoration: none;
  transition: all 200ms ease;
}

a:hover { color: var(--color-grey); }

html { scroll-behavior: smooth; }