/*
Theme Name: Aurum Noir
Theme URI: https://example.com/aurum-noir
Author: Your Name
Author URI: https://example.com
Description: A premium dark charcoal theme with polished chrome finishes in both brand colors — a gold chrome for accents (titles, buttons, rules) and a gunmetal chrome built from #2f3031 for structural surfaces (trim bar, card edges, code blocks, comment panels). Built around #2f3031 and #d8a83c using banded metallic gradients and a racing specular glint, for a true chrome look rather than flat color fills.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: aurum-noir
Tags: dark, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   0. DESIGN TOKENS
   ========================================================= */
:root {
  /* Core brief colors */
  --charcoal: #2f3031;
  --gold: #d8a83c;

  /* Derived depth + shine ramp (built from the two brand colors) */
  --charcoal-deep: #1c1d1e;
  --charcoal-soft: #45474a;
  --charcoal-line: #55585c;

  --gold-light: #f0d896;   /* mid highlight */
  --gold-pale:  #fffdf5;   /* hottest point — near-white chrome glint */
  --gold-deep:  #a97a1f;   /* mid shadow */
  --gold-bronze:#7a5715;   /* deep metal shadow */
  --gold-black: #14100a;   /* near-black reflection band, gives chrome its contrast */

  --ink: #f5f3ee;          /* body text on dark */
  --ink-muted: #c9c6c0;

  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 3px;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --content-width: 760px;

  /* CHROME. Real chrome isn't one soft gold gradient — it's alternating
     bright/dark bands, because polished metal mirrors whatever is around
     it (dark ground, bright sky, dark ground again). This gradient repeats
     that dark/light/dark rhythm using our gold hue instead of neutral grey,
     so it still reads as "gold" but behaves like polished metal. */
  --foil: linear-gradient(
    100deg,
    var(--gold-black)  0%,
    var(--gold-bronze) 8%,
    var(--gold)         16%,
    var(--gold-pale)    24%,
    var(--gold)         30%,
    var(--gold-black)   38%,
    var(--gold-bronze)  46%,
    var(--gold-light)   54%,
    var(--gold-pale)    60%,
    var(--gold-light)   66%,
    var(--gold-black)   74%,
    var(--gold-deep)    82%,
    var(--gold-pale)    90%,
    var(--gold)         96%,
    var(--gold-black)   100%
  );

  /* A tighter, brighter strip used for hard metal edges (borders, rules,
     button faces) where the chrome band needs to read at small sizes. */
  --foil-hard: linear-gradient(
    100deg,
    var(--gold-black) 0%,
    var(--gold-deep) 15%,
    var(--gold-pale) 30%,
    var(--gold) 42%,
    var(--gold-black) 55%,
    var(--gold-light) 70%,
    var(--gold-pale) 78%,
    var(--gold-deep) 90%,
    var(--gold-black) 100%
  );

  /* GUNMETAL CHROME — same banded logic as --foil, but built from the
     charcoal brand color instead of gold: dark charcoal, a cool near-
     white highlight, and a near-black shadow band, so panels read as
     brushed steel rather than flat charcoal paint. */
  --charcoal-black: #0a0a0b;
  --charcoal-hi:     #d9dadb;

  --gunmetal: linear-gradient(
    100deg,
    var(--charcoal-black) 0%,
    var(--charcoal-deep)  10%,
    var(--charcoal-soft)  20%,
    var(--charcoal-hi)    28%,
    var(--charcoal-soft)  34%,
    var(--charcoal)       42%,
    var(--charcoal-black) 50%,
    var(--charcoal)       58%,
    var(--charcoal-line)  66%,
    var(--charcoal-hi)    72%,
    var(--charcoal-line)  78%,
    var(--charcoal)       86%,
    var(--charcoal-black) 100%
  );
}

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--charcoal-deep);
  background-image:
    radial-gradient(ellipse at top, rgba(216,168,60,0.06), transparent 60%),
    linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal-deep) 420px);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--gold-light);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover, a:focus-visible { color: var(--gold-pale); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--ink);
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1.3em; }

blockquote {
  margin: 1.75em 0;
  padding: 0.25em 0 0.25em 1.4em;
  border-left: 3px solid var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-muted);
}

hr {
  border: none;
  height: 2px;
  margin: 2.5em 0;
  background: var(--foil-hard);
  background-size: 300% 100%;
  animation: chrome-sweep 8s linear infinite;
  mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
}

::selection { background: var(--gold); color: var(--charcoal-deep); }

/* Focus visibility (accessibility floor) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   2. SIGNATURE ELEMENT — the gold "foil shine"
   Used for: site title, links-on-hover underline, buttons.
   A diagonal gradient band sweeps across the surface, like
   light catching brushed gold foil.
   ========================================================= */
.shine-text {
  background: var(--foil);
  background-size: 400% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* text-shadow does not follow background-clip, so use a fixed dark
     stroke instead to keep the letterforms crisp against any band */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.5));
  animation: chrome-sweep 7s linear infinite;
}

@keyframes chrome-sweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

.shine-surface {
  position: relative;
  background: var(--foil);
  background-size: 400% 100%;
  background-position: 0% 50%;
  overflow: hidden;
  transition: background-position 0.6s ease;
}
.shine-surface:hover,
.shine-surface:focus-visible {
  background-position: 100% 50%;
}

/* A hard, bright glint that races across chrome surfaces on hover —
   the specific cue that reads as "polished metal" rather than "gold
   gradient". Layered on top of the banded --foil background. */
.shine-glint {
  position: relative;
  overflow: hidden;
}
.shine-glint::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 35%;
  height: 200%;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(8deg);
  pointer-events: none;
  transition: left 0.55s ease;
}
.shine-glint:hover::after,
.shine-glint:focus-visible::after {
  left: 130%;
}

/* =========================================================
   3. LAYOUT
   ========================================================= */
.site {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.site::before {
  content: "";
  display: block;
  height: 7px;
  background: var(--gunmetal);
  background-size: 300% 100%;
  animation: chrome-sweep 9s linear infinite;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.5);
}

.site-header {
  padding: 2.2rem var(--gutter) 1.6rem;
  text-align: center;
  border-bottom: 1px solid var(--charcoal-line);
  position: relative;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 160px;
  height: 3px;
  background: var(--foil-hard);
  background-size: 300% 100%;
  box-shadow: 0 0 10px rgba(216,168,60,0.4);
  animation: chrome-sweep 6s linear infinite;
}

.site-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.04em;
}
.site-title a { text-decoration: none; }

.site-description {
  margin-top: 0.4rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.main-navigation {
  margin-top: 1.4rem;
}
.main-navigation ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  margin: 0;
  padding: 0;
}
.main-navigation a {
  display: inline-block;
  padding: 0.3rem 0.1rem;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.main-navigation a:hover,
.main-navigation a:focus-visible {
  color: var(--gold-light);
  border-color: var(--gold);
}
.main-navigation .current-menu-item > a { color: var(--gold); }

.menu-toggle { display: none; }

.content-area {
  padding: 3rem var(--gutter);
  max-width: var(--content-width);
  margin: 0 auto;
}

.site-main { min-width: 0; }

/* =========================================================
   4. POST CARDS / ARCHIVE
   ========================================================= */
.post-card {
  position: relative;
  padding: 2rem 0 2rem 1.7rem;
  margin-bottom: 2rem;
}
.post-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gunmetal);
  background-size: 300% 100%;
  transition: background-image 0.3s ease;
}
.post-card:hover::before {
  background: var(--foil-hard);
  background-size: 300% 100%;
  animation: chrome-sweep 4s linear infinite;
}
.post-card:not(:last-child) { border-bottom: 1px solid var(--charcoal-line); }

.post-card .entry-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
  display: block;
}

.entry-title {
  margin-bottom: 0.4rem;
}
.entry-title a { color: var(--ink); }
.entry-title a:hover { color: var(--gold-light); }

.entry-meta {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-bottom: 0.9rem;
}
.entry-meta a { color: var(--ink-muted); }
.entry-meta a:hover { color: var(--gold-light); }

.entry-thumb {
  margin: 0 0 1.2rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--gunmetal);
  background-size: 300% 100%;
  padding: 2px;
}
.entry-thumb img { border-radius: 1px; }

.entry-summary { color: var(--ink-muted); }

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.read-more::after { content: "\2192"; transition: transform 0.2s ease; }
.read-more:hover::after { transform: translateX(4px); }

/* =========================================================
   5. SINGLE POST / PAGE
   ========================================================= */
.entry-header { margin-bottom: 2rem; text-align: center; }
.entry-header .entry-title { font-size: clamp(1.9rem, 4vw, 2.6rem); }

.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content a { border-bottom: 1px solid var(--gold-deep); }
.entry-content a:hover { border-color: var(--gold-light); }

.entry-content pre, .entry-content code {
  background: var(--gunmetal);
  background-size: 300% 100%;
  border: 1px solid var(--charcoal-black);
  border-radius: var(--radius);
  color: var(--gold-light);
  font-size: 0.88em;
}
.entry-content pre {
  padding: 1em 1.2em;
  overflow-x: auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
}
.entry-content code { padding: 0.15em 0.4em; }

.entry-footer {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--charcoal-line);
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.entry-footer a { color: var(--gold); }

/* =========================================================
   6. BUTTONS / FORMS — the "shiny" call to action
   ========================================================= */
button,
input[type="submit"],
.wp-block-button__link,
.btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-deep);
  border: 1px solid var(--gold-black);
  border-radius: var(--radius);
  padding: 0.75em 1.6em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  /* vertical bevel: bright top edge, dark mid band, bright bottom edge —
     this is what actually sells "chrome" rather than "gold paint" */
  background:
    linear-gradient(
      180deg,
      var(--gold-pale) 0%,
      var(--gold-light) 10%,
      var(--gold) 26%,
      var(--gold-deep) 46%,
      var(--gold-black) 54%,
      var(--gold-deep) 62%,
      var(--gold) 78%,
      var(--gold-light) 92%,
      var(--gold-pale) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 2px 0 var(--gold-black),
    0 6px 16px rgba(0,0,0,0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.2s ease;
}
button::after,
input[type="submit"]::after,
.wp-block-button__link::after,
.btn::after {
  /* the racing glint — the specular highlight that makes a surface
     read as polished metal instead of a flat gradient */
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  width: 30%;
  height: 220%;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.95) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(10deg);
  pointer-events: none;
  transition: left 0.5s ease;
}
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 3px 0 var(--gold-black),
    0 10px 22px rgba(0,0,0,0.45);
}
button:hover::after,
input[type="submit"]:hover::after,
.wp-block-button__link:hover::after,
.btn:hover::after {
  left: 130%;
}
button:active,
input[type="submit"]:active,
.btn:active {
  transform: translateY(1px);
  filter: brightness(0.96);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 1px 0 var(--gold-black),
    0 4px 10px rgba(0,0,0,0.35);
}

input, textarea, select {
  width: 100%;
  padding: 0.7em 0.9em;
  margin-bottom: 1em;
  background: var(--charcoal-soft);
  border: 1px solid var(--charcoal-line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--gold);
}

/* =========================================================
   7. WIDGETS / SIDEBAR
   ========================================================= */
.widget-area { margin-top: 3rem; }
.widget {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--charcoal-line);
}
.widget-title {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1em;
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 0.35em 0; border-bottom: 1px dashed var(--charcoal-line); }

/* =========================================================
   8. COMMENTS
   ========================================================= */
.comments-area { margin-top: 3rem; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-body {
  padding: 1.4rem;
  margin-bottom: 1.2rem;
  background: var(--gunmetal);
  background-size: 300% 100%;
  border: 1px solid var(--charcoal-black);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.5);
}
.comment-metadata { font-size: 0.8rem; color: var(--ink-muted); }
.comment-reply-link { color: var(--gold); font-size: 0.8rem; }

/* =========================================================
   9. FOOTER
   ========================================================= */
.site-footer {
  margin-top: 3rem;
  padding: 2.5rem var(--gutter) 3rem;
  text-align: center;
  border-top: 1px solid var(--charcoal-line);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.25));
}
.site-footer p {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.site-footer .shine-text { font-family: var(--font-body); font-weight: 700; }

.footer-menu {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0;
  margin: 0 0 1rem;
  flex-wrap: wrap;
}
.footer-menu a { font-size: 0.8rem; color: var(--ink-muted); }
.footer-menu a:hover { color: var(--gold-light); }

/* =========================================================
   10. UTILITIES / ALIGNMENT (Gutenberg support)
   ========================================================= */
.alignwide { max-width: 1000px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; width: 100%; }
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px;
  overflow: hidden;
}

/* =========================================================
   11. RESPONSIVE
   ========================================================= */
@media (max-width: 700px) {
  .main-navigation ul { gap: 0.5rem 1rem; }
  .content-area { padding: 2rem var(--gutter); }

  .menu-toggle {
    display: inline-block;
    color: var(--ink);
    border: 1px solid var(--charcoal-black);
    margin-bottom: 0.8rem;
    background: var(--gunmetal);
    background-size: 300% 100%;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.25),
      inset 0 -1px 0 rgba(0,0,0,0.6),
      0 2px 6px rgba(0,0,0,0.4);
  }
  .menu-toggle:hover {
    background-position: 100% 50%;
  }
  .main-navigation ul {
    display: none;
    flex-direction: column;
    gap: 0.6rem;
  }
  .main-navigation.is-open ul { display: flex; }
}