/*
Theme Name: Astra Child Traajet
Theme URI: https://traajet.fr
Description: Magazine éditorial mobilité urbaine — direction risograph/poster. Palette cobalt + brick sur papier crème, typo retro condensed, layout poster avec overprint blend.
Author: Yohann (traajet.fr)
Template: astra
Version: 1.0.3
Text Domain: astra-child-traajet
*/

/* ====================================================================
   DESIGN TOKENS — Risograph
   ==================================================================== */
:root {
  /* Encres (2 passes) */
  --cobalt: #2D44D5;
  --cobalt-soft: #4A5DE3;
  --brick: #C84329;
  --brick-soft: #DC5B3A;
  --paper: #F2EDDF;
  --paper-light: #FAF5E6;
  --ink: #1A1A1A;
  --ink-soft: #444444;
  --overprint: #3A1C5E;

  /* Grain papier — SVG noise inline */
  --paper-noise: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");

  /* Typo */
  --font-display: "Big Shoulders Display", "Bebas Neue", impact, sans-serif;
  --font-body: "Newsreader", "Source Serif 4", Georgia, serif;
  --font-mono: "Space Mono", "JetBrains Mono", "Courier New", monospace;

  /* Layout */
  --container-max: 1280px;
  --gutter: clamp(1rem, 3vw, 2.5rem);
}

/* ====================================================================
   HOME — masquer titre de page "Accueil" + container blanc Astra
   ==================================================================== */
body.home .entry-header,
body.home .ast-article-single > header,
body.home h1.entry-title,
body.page-id-4 .entry-header,
body.page-id-4 h1.entry-title {
  display: none !important;
}
body.home .ast-separate-container,
body.home .ast-article-single,
body.page-id-4 .ast-separate-container,
body.page-id-4 .ast-article-single {
  background: var(--paper) !important;
  border: none !important;
  padding: 0 !important;
}
body.home .site-content > .ast-container,
body.page-id-4 .site-content > .ast-container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* ====================================================================
   BASE
   ==================================================================== */
html { scroll-behavior: smooth; }

body.astra-child-traajet,
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
  position: relative;
}

/* Grain papier global */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: var(--paper-noise);
  opacity: 0.08;
  z-index: 9999;
  mix-blend-mode: multiply;
}

::selection {
  background: var(--cobalt);
  color: var(--paper);
}

/* ====================================================================
   TYPOGRAPHIE
   ==================================================================== */
h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-post-title,
.wp-block-site-title a {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--ink);
  text-transform: uppercase;
}

h1, .entry-title { font-size: clamp(2.5rem, 7vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h4 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--cobalt);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--cobalt);
  transition: color 0.18s, text-decoration-color 0.18s;
}
a:hover, a:focus {
  color: var(--brick);
  text-decoration-color: var(--brick);
}

strong, b { font-weight: 700; color: var(--ink); }

blockquote {
  border-left: 4px solid var(--cobalt);
  padding: 0.5rem 1.5rem;
  margin: 2rem 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--ink);
}

/* Kicker / catégorie label */
.kicker,
.cat-label,
.wp-block-post-terms,
.post-meta-category {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cobalt);
  text-decoration: none;
}
.kicker a, .wp-block-post-terms a { color: var(--cobalt); text-decoration: none; }
.kicker a:hover { color: var(--brick); }

/* ====================================================================
   HEADER & NAV
   ==================================================================== */
.site-header,
header.site-header {
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
  padding: 1.25rem 0;
  position: relative;
  z-index: 100;
}

.site-title a,
.ast-site-title-wrap .site-title a {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.05em;
  color: var(--ink) !important;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
}

.site-description {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

.main-header-menu a,
.main-navigation a,
nav#site-navigation a {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink) !important;
  text-decoration: none;
  padding: 0.5rem 0.75rem !important;
  position: relative;
}
.main-header-menu a:hover {
  color: var(--brick) !important;
}
.main-header-menu .current-menu-item > a,
.main-header-menu .current_page_item > a {
  color: var(--cobalt) !important;
  background: transparent !important;
}

/* ====================================================================
   HERO HOME — Wordmark XXL avec overprint
   ==================================================================== */
.traajet-hero {
  padding: clamp(3rem, 8vw, 7rem) var(--gutter);
  position: relative;
  background: var(--paper);
  overflow: hidden;
  text-align: left;
}

.traajet-hero__kicker {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--brick);
  margin-bottom: 2rem;
  display: inline-block;
}

.traajet-hero__wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 18vw, 16rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--cobalt);
  text-transform: uppercase;
  margin: 0;
  position: relative;
  display: inline-block;
}

/* Effet 2 passes risographe — version brick décalée */
.traajet-hero__wordmark::after {
  content: attr(data-overprint);
  position: absolute;
  top: 6px;
  left: 10px;
  color: var(--brick);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}

.traajet-hero__tagline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin-top: 2rem;
  max-width: 22ch;
  color: var(--ink);
}

.traajet-hero__lede {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.55;
  max-width: 50ch;
  margin-top: 1.5rem;
  color: var(--ink-soft);
}

/* Halftone décoratif fond hero */
.traajet-hero::after {
  content: "";
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 280px;
  height: 280px;
  background-image: radial-gradient(var(--brick) 2px, transparent 2px);
  background-size: 10px 10px;
  opacity: 0.4;
  pointer-events: none;
  transform: rotate(-8deg);
}

/* ====================================================================
   GRILLE ARTICLES & CARDS
   ==================================================================== */
.traajet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 3rem var(--gutter);
  max-width: var(--container-max);
  margin: 0 auto;
}

.traajet-card,
.wp-block-post {
  background: var(--paper-light);
  border: 2.5px solid var(--ink);
  padding: 0;
  position: relative;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  overflow: hidden;
}

.traajet-card:hover,
.wp-block-post:hover {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0 var(--cobalt), 8px 8px 0 var(--brick);
}

.traajet-card__image,
.wp-block-post-featured-image {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-bottom: 2.5px solid var(--ink);
  position: relative;
}
.traajet-card__image img,
.wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) contrast(1.15) sepia(0.15);
  mix-blend-mode: multiply;
  transition: filter 0.25s;
}
.traajet-card:hover .traajet-card__image img,
.wp-block-post:hover .wp-block-post-featured-image img {
  filter: grayscale(0) contrast(1.05);
}

.traajet-card__body {
  padding: 1.5rem 1.5rem 1.75rem;
}

.traajet-card__title,
.wp-block-post-title {
  font-size: 1.5rem;
  line-height: 1;
  margin: 0.5rem 0 0.75rem;
}
.traajet-card__title a,
.wp-block-post-title a {
  color: var(--ink) !important;
  text-decoration: none;
}
.traajet-card__title a:hover,
.wp-block-post-title a:hover {
  color: var(--brick) !important;
}

.traajet-card__excerpt,
.wp-block-post-excerpt {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

.traajet-card__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.75rem;
  display: flex;
  gap: 1rem;
}

/* ====================================================================
   SECTIONS À APLATS — Featured / About / CTA
   ==================================================================== */
.traajet-section-cobalt {
  background: var(--cobalt);
  color: var(--paper);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
  position: relative;
}
.traajet-section-cobalt h1,
.traajet-section-cobalt h2,
.traajet-section-cobalt h3 { color: var(--paper); }
.traajet-section-cobalt a { color: var(--paper); text-decoration-color: var(--brick); }
.traajet-section-cobalt a:hover { color: var(--brick); }
.traajet-section-cobalt .kicker { color: var(--brick); }

.traajet-section-brick {
  background: var(--brick);
  color: var(--paper);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
}
.traajet-section-brick h1,
.traajet-section-brick h2 { color: var(--paper); }
.traajet-section-brick a { color: var(--paper); }

/* Halftone overlay */
.halftone-cobalt {
  background-image: radial-gradient(var(--cobalt) 1.5px, transparent 1.5px);
  background-size: 8px 8px;
}
.halftone-brick {
  background-image: radial-gradient(var(--brick) 1.5px, transparent 1.5px);
  background-size: 8px 8px;
}

/* ====================================================================
   ARTICLE SINGLE
   ==================================================================== */
.single-post .entry-header,
.single article > header {
  padding: 3rem var(--gutter) 2rem;
  max-width: 880px;
  margin: 0 auto;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 3rem;
}

.single-post .entry-title,
.single article .entry-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.95;
  margin: 1rem 0 1.5rem;
}

.single-post .post-meta,
.single article .post-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cobalt);
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.single-post .entry-content,
.single article .entry-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  font-size: 1.1rem;
  line-height: 1.7;
}

.single-post .entry-content h2,
.single article .entry-content h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin: 2.5rem 0 1rem;
  border-top: 3px solid var(--ink);
  padding-top: 2rem;
}

.single-post .entry-content h3,
.single article .entry-content h3 {
  font-size: 1.5rem;
  margin: 2rem 0 0.75rem;
  color: var(--cobalt);
}

.single-post .entry-content img,
.single article .entry-content img {
  border: 2.5px solid var(--ink);
  filter: grayscale(0.7) contrast(1.1);
}

/* ====================================================================
   ARCHIVES (catégorie) — Astra-specific selectors
   ==================================================================== */
body.archive .ast-archive-description,
body.archive section.ast-archive-description {
  background: var(--ink) !important;
  color: var(--paper);
  padding: clamp(3rem, 7vw, 5rem) var(--gutter);
  text-align: left;
  margin: 0 0 3rem !important;
  position: relative;
  overflow: hidden;
  border: none;
}
body.archive .ast-archive-title,
body.archive h1.page-title {
  color: var(--paper) !important;
  font-size: clamp(3rem, 8vw, 6rem) !important;
  line-height: 0.9;
  margin: 0;
  text-transform: uppercase;
}
body.archive .ast-archive-description p {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--paper);
  opacity: 0.85;
  margin-top: 1rem;
  max-width: 60ch;
  position: relative;
  z-index: 2;
}
body.archive .ast-archive-description::after {
  content: "";
  position: absolute;
  top: 0;
  right: -80px;
  width: 320px;
  height: 100%;
  background-image: radial-gradient(var(--brick) 2px, transparent 2px);
  background-size: 12px 12px;
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}

/* Astra page-builder containers in archives — neutralize white box */
body.archive .ast-separate-container .ast-article-single,
body.archive .ast-separate-container .ast-article-post {
  background: transparent !important;
}
body.archive .ast-separate-container {
  background: var(--paper);
}

/* Posts list inside archive */
body.archive .blog-layout-1 .post,
body.archive article.post {
  background: var(--paper-light) !important;
  border: 2.5px solid var(--ink);
  padding: 2rem !important;
  margin-bottom: 2rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
body.archive article.post:hover {
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0 var(--cobalt), 8px 8px 0 var(--brick);
}

/* Single article wrapper — Astra-specific */
body.single .ast-separate-container .ast-article-single,
body.single .ast-article-single {
  background: var(--paper-light) !important;
  border: 2.5px solid var(--ink);
}

/* ====================================================================
   FORMS — Inputs, search, submit
   ==================================================================== */
input[type="submit"],
button[type="submit"],
.search-form button,
.search-submit,
.wp-block-search__button {
  background: var(--ink) !important;
  color: var(--paper) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 0 !important;
  padding: 0.75rem 1.5rem !important;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: none !important;
}
input[type="submit"]:hover,
button[type="submit"]:hover,
.wp-block-search__button:hover {
  background: var(--brick) !important;
  border-color: var(--brick) !important;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--cobalt) !important;
}

input[type="search"],
input[type="text"],
input[type="email"],
textarea,
.wp-block-search__input {
  border: 2.5px solid var(--ink) !important;
  border-radius: 0 !important;
  background: var(--paper-light) !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--ink);
}
input:focus, textarea:focus {
  outline: none;
  background: var(--paper) !important;
  box-shadow: 4px 4px 0 var(--cobalt);
}

/* ====================================================================
   FOOTER
   ==================================================================== */
.site-footer,
footer.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 4rem var(--gutter) 2rem;
  margin-top: 6rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.site-footer a { color: var(--paper); text-decoration-color: var(--brick); }
.site-footer a:hover { color: var(--brick); }

.site-footer .footer-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 8vw, 6rem);
  letter-spacing: -0.05em;
  color: var(--cobalt);
  line-height: 1;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* ====================================================================
   BLOCKS GUTENBERG — ajustements
   ==================================================================== */
.wp-block-button__link {
  background: var(--ink) !important;
  color: var(--paper) !important;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 0 !important;
  padding: 1rem 2rem !important;
  border: 2.5px solid var(--ink);
  transition: all 0.18s;
}
.wp-block-button__link:hover {
  background: var(--brick) !important;
  color: var(--paper) !important;
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--cobalt), 6px 6px 0 var(--ink);
}

.wp-block-button.is-style-cobalt .wp-block-button__link {
  background: var(--cobalt) !important;
  border-color: var(--cobalt);
}

.wp-block-pullquote {
  border-top: 4px solid var(--brick);
  border-bottom: 4px solid var(--brick);
  padding: 2.5rem 1rem;
  margin: 3rem 0;
  background: var(--paper-light);
}
.wp-block-pullquote p {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.05;
  color: var(--ink);
  text-transform: uppercase;
}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width: 768px) {
  body { font-size: 17px; }
  .traajet-grid { grid-template-columns: 1fr; padding: 2rem 1rem; }
  .traajet-hero { padding: 3rem 1rem; }
  .traajet-card:hover { transform: none; box-shadow: none; }
}

/* ====================================================================
   ANIMATIONS (réveil de page)
   ==================================================================== */
@keyframes traajet-ink {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.traajet-hero__kicker { animation: traajet-ink 0.6s ease-out 0.1s both; }
.traajet-hero__wordmark { animation: traajet-ink 0.7s ease-out 0.25s both; }
.traajet-hero__tagline { animation: traajet-ink 0.7s ease-out 0.4s both; }
.traajet-hero__lede { animation: traajet-ink 0.7s ease-out 0.55s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}