/* Bytewerk — base styles, hover states, and page theming.
   Layout-specific styling lives inline in index.html to mirror the source design;
   this file covers what plain inline styles can't express: :hover, CSS variables,
   the scroll-reveal animation, and small tweaks. */

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: 'EB Garamond', Georgia, serif;
  background-color: var(--bw-bg, #211002);
  color: #211002;
  transition: background-color 320ms ease;
}

* {
  box-sizing: border-box;
}

a {
  color: #6B0406;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: #211002;
}

::selection {
  background: #FFEED0;
  color: #211002;
}

@keyframes bwRise {
  from { opacity: 0; transform: translateY(0.4em); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; }
}

:root {
  --bw-bg: #FFF8EB;
  --bw-header-bg: #FFF8EB;
  --bw-header-border: #D8CBB8;
  --bw-nav-color: #795F5A;
  --bw-nav-hover: #211002;
  --bw-nav-cta-color: #6B0406;
  --bw-nav-cta-border: #6B0406;
  --bw-nav-cta-hover-bg: #211002;
  --bw-nav-cta-hover-border: #211002;
  --bw-logo-color: #211002;
  --bw-main-gap: 0px;
  --bw-main-pad: 0px;
  --bw-page-max: none;
  --bw-page-pad-x: clamp(20px, 6vw, 120px);
  --bw-folio-display: none;
}

header {
  background: var(--bw-header-bg);
  border-bottom: 1px solid var(--bw-header-border);
  transition: background 320ms ease, border-color 320ms ease;
}

header .bw-logo-mark {
  color: var(--bw-logo-color);
  transition: color 320ms ease;
}

main {
  gap: var(--bw-main-gap) !important;
  padding: var(--bw-main-pad) !important;
  transition: gap 320ms ease, padding 320ms ease;
}

[data-page] {
  max-width: var(--bw-page-max) !important;
  padding-left: var(--bw-page-pad-x) !important;
  padding-right: var(--bw-page-pad-x) !important;
  transition: padding 320ms ease, max-width 320ms ease;
}

.folio-gutter,
.folio-mark {
  display: var(--bw-folio-display);
}

footer {
  background: #211002;
  border-top-color: var(--bw-header-border);
  transition: border-color 320ms ease;
}

body {
  min-height: 100vh;
}

/* ---------- Interactive hover states ---------- */

.nav-link {
  color: var(--bw-nav-color);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 250ms ease, border-color 250ms ease;
}

.nav-link:hover {
  color: var(--bw-nav-hover);
  border-bottom-color: #6B0406;
}

.nav-cta {
  color: var(--bw-nav-cta-color);
  border-color: var(--bw-nav-cta-border) !important;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.nav-cta:hover {
  background: var(--bw-nav-cta-hover-bg);
  border-color: var(--bw-nav-cta-hover-border) !important;
}

.btn-primary {
  transition: background 220ms ease, transform 220ms ease;
}

.btn-primary:hover {
  background: #211002;
  transform: translateY(-2px);
}

.btn-secondary {
  transition: background 220ms ease;
}

.btn-secondary:hover {
  background: #FFEED0;
}

.btn-tel {
  transition: background 220ms ease;
}

.btn-tel:hover {
  background: #FFF8EB;
}

.card-hover {
  transition: background 420ms ease;
}

.card-hover:hover {
  background: #FFEED0;
}

/* ---------- Scroll reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 950ms cubic-bezier(.22,.7,.25,1), transform 950ms cubic-bezier(.22,.7,.25,1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.js-no-motion [data-reveal],
.js-reduced-motion [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}