/* ============================================================================
   Shabang — shared theme and interactive styles.

   The four custom properties below are the whole theme. They mirror what the
   source design's renderVals() computed for darkMode = true, accent = #FF3E00.
   Flipping the site back to the light treatment means changing --bg, --fg and
   --line here and nothing else.

   Layout, spacing and type stay as inline styles on the elements, matching the
   source design one-to-one. This file carries only what an inline style cannot
   express: the theme, keyframes, and every :hover / :focus state. A property
   that changes on hover must live here rather than inline, because an inline
   declaration outranks any stylesheet rule.
   ========================================================================== */

:root {
  --accent: #FF3E00;
  --bg: #16130E;
  --fg: #F3EEE3;
  --line: rgba(243, 238, 227, .22);
}

html { scroll-behavior: smooth }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Space Grotesk', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none }
a:hover { color: var(--accent) }

::selection { background: var(--accent); color: #F3EEE3 }

input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px }

a:focus-visible,
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px }

@keyframes marquee { to { transform: translateX(-50%) } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes rise { from { opacity: 0; transform: translateY(46px) } to { opacity: 1; transform: none } }

/* --------------------------------------------------------------------------
   Buttons and hoverable surfaces.

   Each class owns the properties its :hover changes (background, color,
   border) so the hover rule can win; everything else stays inline.
   -------------------------------------------------------------------------- */

.btn-accent,
.btn-accent-ondark,
.btn-outline,
.btn-outline-ondark,
.btn-solid-dark,
.work-cta,
.post-cta,
.svc-row,
.post-row,
.adm-ghost,
.adm-save,
.adm-del,
.adm-reset {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}

/* Solid accent pill on the page background. */
.btn-accent { background: var(--accent); color: #F3EEE3; border: 0 }
.btn-accent:hover { background: var(--fg); color: var(--bg) }

/* Solid accent pill sitting on a hardcoded #16130E section. */
.btn-accent-ondark { background: var(--accent); color: #F3EEE3; border: 0 }
.btn-accent-ondark:hover { background: #F3EEE3; color: #16130E }

/* Outline pill on the page background. */
.btn-outline { background: transparent; color: inherit; border: 1.5px solid currentColor }
.btn-outline:hover { background: var(--fg); color: var(--bg); border-color: var(--fg) }

/* Outline pill on a hardcoded dark surface (contact section, package cards). */
.btn-outline-ondark { background: transparent; color: inherit; border: 1.5px solid rgba(243, 238, 227, .5) }
.btn-outline-ondark:hover { background: #F3EEE3; color: #16130E; border-color: #F3EEE3 }

/* Solid dark pill on the accent package card. */
.btn-solid-dark { background: #16130E; color: #F3EEE3; border: 0 }
.btn-solid-dark:hover { background: #F3EEE3; color: #16130E }

/* "Your brand here" panel in the work grid. */
.work-cta { background: var(--accent); color: #F3EEE3 }
.work-cta:hover { background: #16130E; color: #F3EEE3 }

/* End-of-post call to action. */
.post-cta { background: var(--accent); color: #F3EEE3 }
.post-cta:hover { background: var(--fg); color: var(--bg) }

/* Services accordion row. A real <button> for keyboard access, reset to look
   exactly like the source design's clickable <div>. */
.svc-row {
  width: 100%;
  margin: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}
.svc-row:hover { background: rgba(243, 238, 227, .07) }

/* Blog index row. Keeps its inline color:inherit, so only the tint changes. */
.post-row:hover { background: rgba(128, 128, 128, .08) }

/* --------------------------------------------------------------------------
   Admin portal controls.
   -------------------------------------------------------------------------- */

.adm-ghost { background: none; border: 1.5px solid var(--line); color: inherit }
.adm-ghost:hover { border-color: var(--accent); color: var(--accent) }

.adm-save { background: var(--accent); border: 0; color: #F3EEE3 }
.adm-save:hover { background: var(--fg); color: var(--bg) }

/* The destructive colour is held literally rather than as var(--accent). It
   happens to match the accent today, but it should stay a danger signal if the
   brand colour is ever moved to one of the design's other options. */
.adm-del { background: none; border: 0; color: inherit; opacity: .5 }
.adm-del:hover { opacity: 1; color: #FF3E00 }

.adm-reset { background: none; border: 0; color: inherit; opacity: .45 }
.adm-reset:hover { opacity: .9 }

/* Inline confirmation state, standing in for window.confirm(). */
.adm-confirm { color: #FF3E00; opacity: 1 }

/* --------------------------------------------------------------------------
   Motion preferences. The marquee and the spinning asterisk loop forever, so
   they are silenced for anyone who has asked the OS for reduced motion.
   -------------------------------------------------------------------------- */

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

/* The hidden attribute must always win, even over inline display values
   (the admin login gate uses display:flex inline). */
[hidden] { display: none !important; }