/*
Theme Name: UI Pedia Child
Template: blocksy
Version: 1.0
Author: UI Pedia
Description: Theme enfant RANKOPRESS-generated child theme, generated by RANKOPRESS.
Text Domain: ee4-ui-pedia
*/

/* ===========================================================
   Variables CSS du Design System
   Valeurs initiales depuis Claude (Phase 2) — pilotables par
   l'utilisateur via Apparence > Personnaliser > Couleurs du site.
   Les sections Customizer reinjectent ces variables en CSS inline
   priorite 999 dans wp_head.
   =========================================================== */
:root {
  --ee4-primary:    #EB1100;
  --ee4-accent:     #0A0082;
  --ee4-text:       #252326;
  --ee4-text-soft:  #746B79;
  --ee4-bg:         #FFFFFF;
  --ee4-surface:    #F5F7F8;
  --ee4-line:       #CFCED0;
  --ee4-link-hover: #0A0082;
  --ee4-font-h:     "Press Start 2P", system-ui, -apple-system, sans-serif;
  --ee4-font-b:     "VT323", system-ui, -apple-system, sans-serif;
  --ee4-radius:     8px;
  --ee4-radius-lg:  14px;
  --ee4-container:  1200px;
  --ee4-shadow-sm:  0 1px 3px rgba(0,0,0,.06);
  --ee4-shadow-md:  0 6px 20px rgba(0,0,0,.08);
  --ee4-shadow-lg:  0 18px 48px rgba(0,0,0,.12);
}

/* Reset minimal + base typo */
body {
  background: var(--ee4-bg);
  color: var(--ee4-text);
  font-family: var(--ee4-font-b);
  margin: 0;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ee4-font-h);
  color: var(--ee4-primary);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

a { color: var(--ee4-accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--ee4-link-hover); }

img, video, iframe { max-width: 100%; height: auto; }

.ee4-container { max-width: var(--ee4-container); margin: 0 auto; padding: 0 1rem; }

/* ===========================================================
   Surcharges WordPress Gutenberg + comments + search
   =========================================================== */
.wp-block-image img { border-radius: var(--ee4-radius); }
.wp-block-quote {
  border-left: 4px solid var(--ee4-accent);
  padding: .5em 1em;
  background: var(--ee4-surface);
  margin: 1.5em 0;
}
.wp-block-button__link {
  background: var(--ee4-accent);
  color: #fff;
  padding: .75em 1.5em;
  border-radius: var(--ee4-radius);
  text-decoration: none;
  display: inline-block;
}
.wp-block-button__link:hover { opacity: .9; }

.pagination, .nav-links, .wp-block-query-pagination {
  display: flex; gap: .5rem; justify-content: center; margin: 2rem 0; flex-wrap: wrap;
}
.page-numbers, .wp-block-query-pagination a, .wp-block-query-pagination span {
  padding: .5em 1em; border: 1px solid var(--ee4-line);
  color: var(--ee4-text); text-decoration: none; border-radius: var(--ee4-radius);
}
.page-numbers.current {
  background: var(--ee4-accent); color: #fff; border-color: var(--ee4-accent);
}

.comment-list { list-style: none; padding: 0; }
.comment-list li {
  background: var(--ee4-surface); padding: 1em; margin: .5em 0;
  border-radius: var(--ee4-radius);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; padding: .75rem; border: 1px solid var(--ee4-line);
  background: var(--ee4-bg); color: var(--ee4-text); border-radius: var(--ee4-radius);
  font-family: var(--ee4-font-b); font-size: 1rem;
}
.comment-form .submit {
  background: var(--ee4-accent); color: #fff; border: 0;
  padding: .75em 1.5em; border-radius: var(--ee4-radius); cursor: pointer;
}

/* Anti-emoji WP */
img.emoji, img.wp-smiley { display: inline; border: 0; box-shadow: none; }

/* ===========================================================
   NOTE : le CSS COMPLET du theme (header, footer, hero, cards, etc.)
   est dans assets/css/style.css charge via wp_enqueue_style en
   priorite normale. Ce style.css ici reste minimaliste pour les
   surcharges WP de base et les variables CSS racine.
   =========================================================== */

/* RANKO-BURGER-SEED-V1 */
/* domain=ui-pedia.com family=chevron shape=decrescendo w1=18/w2=14/w3=10 */
html body button[class*="burger"] > span > span,
html body button[class*="burger"] > span:not([class*="bar"]):not([class*="line"]),
html body button[class*="burger"] [class*="bar"] > span,
html body button[class*="burger"] [class*="line"] > span {
  height: 3px !important;
  border-radius: 2px !important;
  background: #333 !important;
  display: block !important;
  margin: 0 !important;
  transition: transform 0.25s ease, opacity 0.2s ease, width 0.2s ease !important;
}
html body button[class*="burger"] > span > span:nth-child(1),
html body button[class*="burger"] [class*="bar"] > span:nth-child(1),
html body button[class*="burger"] [class*="line"] > span:nth-child(1) { width: 18px !important; }
html body button[class*="burger"] > span > span:nth-child(2),
html body button[class*="burger"] [class*="bar"] > span:nth-child(2),
html body button[class*="burger"] [class*="line"] > span:nth-child(2) { width: 14px !important; }
html body button[class*="burger"] > span > span:nth-child(3),
html body button[class*="burger"] [class*="bar"] > span:nth-child(3),
html body button[class*="burger"] [class*="line"] > span:nth-child(3) { width: 10px !important; }
html body button[class*="burger"][aria-expanded="true"] > span > span,
html body button[class*="burger"][aria-expanded="true"] [class*="bar"] > span,
html body button[class*="burger"][aria-expanded="true"] [class*="line"] > span { width: 18px !important; }
html body button[class*="burger"] > span:has(> span) {
  flex-direction: column !important;
  gap: 6px !important;
}
html body button[class*="burger"][aria-expanded="true"] > span > span:nth-child(1),
html body button[class*="burger"][aria-expanded="true"] [class*="bar"] > span:nth-child(1),
html body button[class*="burger"][aria-expanded="true"] [class*="line"] > span:nth-child(1) {
  transform: translateY(9.0px) rotate(45deg) !important;
}
html body button[class*="burger"][aria-expanded="true"] > span > span:nth-child(2),
html body button[class*="burger"][aria-expanded="true"] [class*="bar"] > span:nth-child(2),
html body button[class*="burger"][aria-expanded="true"] [class*="line"] > span:nth-child(2) { opacity: 0 !important; }
html body button[class*="burger"][aria-expanded="true"] > span > span:nth-child(3),
html body button[class*="burger"][aria-expanded="true"] [class*="bar"] > span:nth-child(3),
html body button[class*="burger"][aria-expanded="true"] [class*="line"] > span:nth-child(3) {
  transform: translateY(-9.0px) rotate(-45deg) !important;
}
/* family=chevron */
html body button[class*="burger"] > span:has(> span) {
  position: relative !important; width: 18px !important; height: 18px !important;
}
html body button[class*="burger"] > span > span:nth-child(1) {
  position: absolute !important; top: 25% !important; left: 30% !important;
  width: 50% !important; height: 3px !important;
  transform: rotate(45deg) !important; transform-origin: left center !important;
}
html body button[class*="burger"] > span > span:nth-child(3) {
  position: absolute !important; bottom: 25% !important; left: 30% !important;
  width: 50% !important; height: 3px !important;
  transform: rotate(-45deg) !important; transform-origin: left center !important;
}
html body button[class*="burger"] > span > span:nth-child(2) { display: none !important; }