/*
Theme Name: Kul Youm
Theme URI: https://www.kulayaoum.com
Author: Kul Youm
Description: Thème sur-mesure pour كل يوم ("Chaque jour"). Concept "calendrier éphéméride" : véritable feuillet de calendrier à reliure spirale et bord déchiré, story du jour en photo pleine largeur, tampon-date sur chaque vignette, fil rythmé par jour (اليوم / أمس / dates précédentes) et mini calendrier du mois en barre latérale. Palette chaude terracotta/ambre évoquant le lever du jour. Conçu pour le RTL arabe.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kulyoum
Tags: news, calendar, daily, rtl, arabic
*/

/* =========================================================
   0. DESIGN TOKENS
   ========================================================= */
:root{
  --ky-amber:     #e8734a;
  --ky-amber-2:   #f3956d;
  --ky-charcoal:  #232323;
  --ky-cream:     #fdf8f3;
  --ky-mist:      #f5ece4;
  --ky-line:      #ecdfd2;
  --ky-ink:       #2b2b2b;
  --ky-text-soft: #7a6f63;

  --ky-font-display: 'Jomhuria', 'Georgia', serif;
  --ky-font-body:    'Vazirmatn', 'Inter', sans-serif;

  --ky-radius: 10px;
  --ky-shadow: 0 10px 26px rgba(35,35,35,.12);
}

.cat-politique       { --cat-color:#8a3b2e; }
.cat-economie        { --cat-color:#2f6b52; }
.cat-sante           { --cat-color:#b5443f; }
.cat-arts            { --cat-color:#6a4c93; }
.cat-sciences        { --cat-color:#2f5f7a; }
.cat-technologie     { --cat-color:#3a5a8a; }
.cat-societe         { --cat-color:#a3752e; }
.cat-droits-humains  { --cat-color:#7a2f4a; }
.cat-culture         { --cat-color:#b58b2e; }
.cat-defaut          { --cat-color: var(--ky-amber); }

/* =========================================================
   1. BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; color:var(--ky-ink);
  font-family:var(--ky-font-body); font-size:16px; line-height:1.65;
  background-color:var(--ky-cream);
  background-image:radial-gradient(rgba(35,35,35,.05) 1px, transparent 1px);
  background-size:15px 15px;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-weight:700; line-height:1.3; margin:0 0 .4em; color:var(--ky-charcoal); }
.container{ max-width:1180px; margin:0 auto; padding:0 20px; }

/* =========================================================
   2. FEUILLET DE CALENDRIER (élément signature du thème)
   Reliure à spirale + bord déchiré (clip-path en dents de scie)
   ========================================================= */
.ky-cal-block{
  background:#fff; position:relative; text-align:center;
  box-shadow:var(--ky-shadow);
  padding-top:4px;
  clip-path:polygon(
    0% 0%, 100% 0%, 100% 86%,
    92% 100%, 84% 86%, 76% 100%, 68% 86%, 60% 100%, 52% 86%,
    44% 100%, 36% 86%, 28% 100%, 20% 86%, 12% 100%, 4% 86%, 0% 100%
  );
}
.ky-cal-block::before, .ky-cal-block::after{
  content:""; position:absolute; top:4px; width:10px; height:10px; border-radius:50%;
  background:var(--ky-cream); border:2px solid var(--ky-line); z-index:2;
}
.ky-cal-block::before{ inset-inline-start:12px; }
.ky-cal-block::after{ inset-inline-end:12px; }
.ky-cal-block .month{ display:block; background:var(--ky-amber); color:#fff; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:7px 0 5px; }
.ky-cal-block .day-num{ display:block; font-family:var(--ky-font-display); font-size:50px; line-height:1; color:var(--ky-charcoal); padding:6px 0 4px; }
.ky-cal-block .weekday{ display:block; font-size:12px; font-weight:700; color:var(--ky-text-soft); padding-bottom:14px; text-transform:uppercase; }
.ky-cal-block.large{ padding-top:6px; }
.ky-cal-block.large .day-num{ font-size:72px; }
.ky-cal-block.large .month{ font-size:14px; padding:9px 0 6px; }
.ky-cal-block.large .weekday{ padding-bottom:18px; }
.ky-cal-block.small{ width:64px; }
.ky-cal-block.small .day-num{ font-size:30px; padding:4px 0 2px; }
.ky-cal-block.small .weekday{ padding-bottom:10px; }

/* Petit tampon-date (posé sur une photo) : même esprit, format compact */
.ky-stamp-date{
  display:inline-block; background:#fff; border-radius:7px; overflow:hidden; text-align:center;
  box-shadow:0 6px 14px rgba(0,0,0,.3); min-width:46px;
}
.ky-stamp-date .m{ display:block; background:var(--ky-amber); color:#fff; font-size:9px; font-weight:800; text-transform:uppercase; padding:2px 0; }
.ky-stamp-date .d{ display:block; font-family:var(--ky-font-display); font-size:24px; line-height:1.15; color:var(--ky-charcoal); padding:1px 4px 2px; }

/* =========================================================
   3. HEADER
   ========================================================= */
.ky-topbar{ background:var(--ky-charcoal); color:rgba(255,255,255,.65); font-size:12.5px; }
.ky-topbar .container{ display:flex; justify-content:space-between; align-items:center; height:32px; }

.ky-header{ padding:26px 0 22px; }
.ky-header .container{ display:flex; align-items:center; gap:24px; }
.ky-header .ky-cal-block{ flex:0 0 auto; width:96px; }
.ky-header .site-title{ font-size:32px; font-weight:800; margin:0; color:var(--ky-charcoal); }
.ky-header .site-title span{ color:var(--ky-amber); }
.ky-header .site-tagline{ font-size:14px; color:var(--ky-text-soft); margin-top:4px; }

.ky-nav{ background:var(--ky-charcoal); }
.ky-nav .container{ display:flex; justify-content:center; }
.ky-nav ul{ list-style:none; display:flex; flex-wrap:wrap; gap:2px; margin:0; padding:0; }
.ky-nav a{ display:block; padding:13px 16px; color:#fff; font-weight:700; font-size:14px; }
.ky-nav a:hover, .ky-nav .current a{ background:var(--ky-amber); }
.ky-menu-toggle{ display:none; }

/* =========================================================
   4. STORY DU JOUR (hero) — feuillet grand format, photo pleine largeur,
   reliure à spirale en tête, tampon-date incrusté sur l'image.
   ========================================================= */
.ky-main{ padding:30px 0 54px; }

.ky-hero-sheet{
  position:relative; border-radius:16px; overflow:hidden; background:var(--ky-charcoal);
  box-shadow:var(--ky-shadow); margin-bottom:36px;
}
.ky-hero-sheet .rings{ position:absolute; top:12px; inset-inline:0; display:flex; justify-content:center; gap:20px; z-index:3; }
.ky-hero-sheet .rings span{ width:13px; height:13px; border-radius:50%; background:var(--ky-cream); border:3px solid rgba(0,0,0,.5); }
.ky-hero-sheet .photo{ display:block; aspect-ratio:16/7; background:var(--cat-color, var(--ky-amber)); position:relative; }
.ky-hero-sheet .photo img{ width:100%; height:100%; object-fit:cover; }
.ky-hero-sheet .photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,8,6,.88) 0%, rgba(10,8,6,.35) 45%, rgba(10,8,6,0) 72%);
}
.ky-hero-sheet .stamp{ position:absolute; bottom:24px; inset-inline-start:26px; inset-inline-end:26px; z-index:2; display:flex; align-items:flex-end; gap:16px; }
.ky-hero-sheet .stamp .ky-stamp-date{ flex:0 0 auto; }
.ky-hero-sheet .stamp .tag{ display:block; color:var(--ky-amber-2); text-transform:uppercase; font-size:12px; font-weight:800; margin-bottom:6px; }
.ky-hero-sheet .stamp h2{ color:#fff; font-size:25px; margin:0; max-width:680px; }
.ky-hero-sheet .stamp h2 a{ color:#fff; }

/* =========================================================
   5. FIL RYTHMÉ PAR JOUR
   ========================================================= */
.ky-columns{ display:grid; grid-template-columns:2.2fr .85fr; gap:30px; align-items:start; }

.ky-day-section{ margin-bottom:38px; }
.ky-day-head{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.ky-day-head .ky-cal-block{ flex:0 0 auto; }
.ky-day-head h2{ font-size:20px; margin:0; }
.ky-day-head .count{ font-size:13px; color:var(--ky-text-soft); white-space:nowrap; }
.ky-day-head::after{ content:""; flex:1; height:0; border-top:2px dashed var(--ky-line); align-self:center; }

.ky-day-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.ky-card{ background:#fff; border-radius:var(--ky-radius); overflow:hidden; box-shadow:var(--ky-shadow); border:1px solid var(--ky-line); transition:transform .15s ease; }
.ky-card:hover{ transform:translateY(-3px); }
.ky-card .thumb{ position:relative; display:block; aspect-ratio:16/10; background:var(--cat-color, var(--ky-amber)); }
.ky-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.ky-card .thumb .ky-stamp-date{ position:absolute; top:10px; inset-inline-start:10px; }
.ky-card .body{ padding:14px 16px 18px; }
.ky-card .tag{ display:inline-block; font-size:11px; font-weight:800; text-transform:uppercase; color:var(--cat-color, var(--ky-amber)); margin-bottom:8px; }
.ky-card h3{ font-size:16.5px; margin:0 0 6px; }
.ky-card .excerpt{ font-size:14px; color:var(--ky-text-soft); margin-top:6px; }

.ky-pagination{ display:flex; gap:8px; justify-content:center; margin-top:10px; }
.ky-pagination a, .ky-pagination span{ padding:8px 14px; border:1px solid var(--ky-line); border-radius:4px; background:#fff; font-weight:700; font-size:14px; }
.ky-pagination .current{ background:var(--ky-amber); color:#fff; border-color:var(--ky-amber); }

/* =========================================================
   6. BARRE LATÉRALE
   ========================================================= */
.ky-widget{ background:#fff; border:1px solid var(--ky-line); border-radius:var(--ky-radius); padding:18px; margin-bottom:20px; }
.ky-widget h4{ font-size:14px; text-transform:uppercase; border-bottom:2px solid var(--ky-amber); padding-bottom:8px; margin-bottom:14px; }

/* Mini calendrier du mois */
.ky-mini-cal .mc-head{ text-align:center; font-weight:800; font-size:14px; margin-bottom:12px; color:var(--ky-charcoal); }
.ky-mini-cal .mc-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; margin-bottom:4px; }
.ky-mini-cal .mc-weekdays span{ font-size:11px; font-weight:800; color:var(--ky-text-soft); }
.ky-mini-cal .mc-grid span{ font-size:12.5px; padding:6px 0; border-radius:6px; color:var(--ky-ink); }
.ky-mini-cal .mc-grid span.empty{ visibility:hidden; }
.ky-mini-cal .mc-grid span.today{ background:var(--ky-amber); color:#fff; font-weight:800; }

.ky-trend{ display:flex; gap:10px; padding:9px 0; border-bottom:1px dashed var(--ky-line); }
.ky-trend:last-child{ border-bottom:none; }
.ky-trend .num{ font-family:var(--ky-font-display); font-size:24px; color:var(--ky-amber); width:26px; flex:0 0 auto; }
.ky-trend h5{ font-size:13px; margin:0; font-weight:700; }
.ky-newsletter{ background:var(--ky-charcoal); color:#fff; }
.ky-newsletter h4{ color:#fff; border-color:var(--ky-amber); }
.ky-newsletter input{ width:100%; padding:9px; border:none; border-radius:4px; margin-bottom:8px; box-sizing:border-box; }
.ky-newsletter button{ width:100%; padding:9px; border:none; border-radius:4px; background:var(--ky-amber); color:#fff; font-weight:700; cursor:pointer; }
.ky-ad-slot{ background:var(--ky-mist); border:1px dashed var(--ky-line); text-align:center; padding:30px 10px; color:var(--ky-text-soft); font-size:13px; border-radius:var(--ky-radius); }

/* =========================================================
   7. PAGE ARTICLE
   ========================================================= */
.ky-article{ max-width:800px; margin:0 auto; }

.ky-article-hero{ position:relative; margin-bottom:22px; border-radius:var(--ky-radius); overflow:hidden; box-shadow:var(--ky-shadow); }
.ky-article-hero .featured-img{ aspect-ratio:16/9; }
.ky-article-hero .ky-stamp-date{ position:absolute; bottom:-1px; inset-inline-start:20px; transform:translateY(40%); }

.ky-article-head-noimg{ display:flex; gap:18px; align-items:center; margin-bottom:18px; }

.ky-article .tag{ display:inline-block; font-size:12px; font-weight:800; text-transform:uppercase; color:var(--cat-color, var(--ky-amber)); margin-bottom:8px; }
.ky-article h1{ font-size:30px; margin:0; }
.ky-article .meta{ color:var(--ky-text-soft); font-size:13.5px; margin:18px 0 20px; padding-bottom:16px; border-bottom:1px solid var(--ky-line); }
.ky-article .entry-content{ font-size:17.5px; line-height:1.85; }
.ky-article .entry-content p{ margin:0 0 1.3em; }
.ky-article .entry-content blockquote{ border-inline-start:4px solid var(--ky-amber); margin:1.6em 0; padding:.4em 1.4em; font-style:italic; color:var(--ky-charcoal); font-size:18px; }
.ky-share{ display:flex; gap:10px; margin:28px 0; }
.ky-share a{ padding:8px 16px; border-radius:20px; background:var(--ky-mist); font-weight:700; font-size:13px; }

/* =========================================================
   8. FOOTER
   ========================================================= */
.ky-footer{ background:var(--ky-charcoal); color:rgba(255,255,255,.75); margin-top:30px; }
.ky-footer .container{ padding:40px 20px 18px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:26px; }
.ky-footer h4{ color:#fff; font-size:13.5px; text-transform:uppercase; margin-bottom:12px; }
.ky-footer ul{ list-style:none; margin:0; padding:0; }
.ky-footer li{ margin-bottom:8px; }
.ky-footer a:hover{ color:var(--ky-amber-2); }
.ky-footer-bottom{ text-align:center; padding:14px; font-size:12.5px; color:rgba(255,255,255,.5); border-top:1px solid rgba(255,255,255,.12); }
.ky-footer .nmg-badge{ margin-top:14px; display:flex; align-items:center; gap:8px; }
.ky-footer .nmg-label{ font-size:11px; letter-spacing:.03em; opacity:.55; white-space:nowrap; }
.ky-footer .nmg-badge img{ height:20px; width:auto; display:block; opacity:.85; transition:opacity .2s ease; }
.ky-footer .nmg-badge img:hover{ opacity:1; }

/* =========================================================
   9. RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .ky-columns{ grid-template-columns:1fr; }
  .ky-day-grid{ grid-template-columns:1fr; }
  .ky-footer .container{ grid-template-columns:1fr 1fr; }
  .ky-hero-sheet .stamp h2{ font-size:20px; }
}
@media (max-width:600px){
  .ky-header .container{ gap:14px; }
  .ky-header .site-title{ font-size:24px; }
  .ky-nav ul{ display:none; }
  .ky-nav.open ul{ display:flex; flex-direction:column; }
  .ky-menu-toggle{ display:block; width:100%; padding:12px; color:#fff; background:none; border:none; font-weight:700; }
  .ky-footer .container{ grid-template-columns:1fr; }
  .ky-hero-sheet .stamp{ flex-direction:column; align-items:flex-start; gap:10px; }
}