/* /css/global.css */

/* =========================
   Theme + Tokens
   ========================= */
:root {
  --cream: #FDFCF8;
  --coffee-dark: #2D1B08;

  /* Typography roles */
  --font-editorial: "EB Garamond", Garamond, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, Helvetica, Arial, sans-serif;

  /* Accents */
  --accent-orange: #FF6B35;   /* keep brand orange for non-hover uses */
  --accent-yellow: #FFB30F;
  --hover-accent: #37664a;    /* new: hover accent (cards, hover shadows) */

  /* Fixed nav offset (prevents content sliding under fixed header) */
  --nav-offset: 132px;
}

/* Mobile header is shorter */
@media (max-width: 767px) {
  :root { --nav-offset: 112px; }
}

/* =========================
   Base
   ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background-color: #ffffff;
  color: var(--coffee-dark);

  font-family: var(--font-editorial);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0.01em;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  margin: 0;
  overflow-x: hidden;
}

/* IMPORTANT: prevents pages from loading under fixed nav */
.page-main {
  padding-top: var(--nav-offset);
}

/* Optional utility container used across pages */
.container-custom {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* =========================
   UI Typography Overrides (non-serif)
   Nav, footer, cards, buttons, filters, forms
   ========================= */
.site-nav,
.site-nav *,

.site-footer,
.site-footer *,

button,
.btn,
.brew-hero__cta,
.cd-btn,

.content-card,
.content-card *,

.method-card,
.method-card *,

.brew-card,
.brew-card *,

.cd-card,
.cd-card *,

.cd-filters,
.cd-filters *,

.nav-dd,
.nav-dd *,

input,
select,
textarea,
label {
  font-family: var(--font-ui);
}

/* =========================
   Global Visual Layers
   ========================= */

/* Background Canvas */
canvas#shader-canvas {
  display: none;
}

/* Noise Overlay */
.noise-overlay {
  display: none;
}

/* =========================
   Typography Polish (modern editorial feel)
   ========================= */

/* Reading width control */
p, li {
  max-width: 68ch;
}

/* Headings: tighter + confident */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Paragraph rhythm */
p {
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Big headlines */
.fluid-text {
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-weight: 800;
}

/* If you use page titles / article headings, keep them editorial */
.brew-article h1,
.brew-article h2,
.brew-article h3,
.page-title {
  font-family: var(--font-editorial);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Reduce excessive tracking on uppercase UI bits (without changing transforms here) */
.site-nav__links,
.site-footer,
.page-title,
.cd-filtersLabel,
.cd-sortLabel,
.cd-groupTitle,
.cd-brand,
.cd-btn,
.btn {
  letter-spacing: 0.05em !important;
}

/* Buttons: readable + crisp */
button,
.btn,
.brew-hero__cta,
.cd-btn {
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* =========================
   Cards
   ========================= */
.brew-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 2px solid var(--coffee-dark);
  box-shadow: 8px 8px 0px var(--coffee-dark);
  scroll-margin-top: 100px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

/* Hover accent changed to green without breaking brand orange elsewhere */
.brew-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0px var(--hover-accent);
}

/* =========================
   Logos + Misc
   ========================= */
.logo-hero {
  height: clamp(140px, 20vw, 320px);
  width: auto;
  margin-bottom: 2rem;
  object-fit: contain;
}

.device-preview {
  height: 120px;
  width: auto;
  object-fit: contain;
  margin-bottom: 1.5rem;
}

/* Cookie banner (class toggled by JS) */
#cookie-consent.show {
  transform: translateY(0);
  opacity: 1;
}

/* Simple animation utility */
.step-content {
  transition: opacity 0.3s ease;
}

.animate-slideUp {
  animation: slideUp 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* End of /css/global.css */