/*
Theme Name: The Daily Clarion — Health
Theme URI: https://thedailyclarion.com
Author: Angelina
Description: Медицинский информационный блог "The Daily Clarion — Health". Светлая/тёмная тема, переключатель языка RU/EN, карточная лента статей.
Version: 1.0
Requires PHP: 7.4
Text Domain: clarion-health
*/

/* ==========================================================================
   1. ПЕРЕМЕННЫЕ (СВЕТЛАЯ ТЕМА ПО УМОЛЧАНИЮ)
   ========================================================================== */
:root{
  --clr-primary:      #0e93a0;   /* бирюзово-голубой, основной */
  --clr-primary-dark: #076a75;
  --clr-primary-light:#5fd4de;
  --clr-accent:       #0a4a52;
  --clr-bg:           #f5fbfc;
  --clr-surface:      #ffffff;
  --clr-surface-2:    #eaf6f7;
  --clr-text:         #123338;
  --clr-text-muted:   #4d6a6e;
  --clr-border:       #d3ecee;
  --clr-shadow:       0 10px 30px rgba(14,147,160,.12);
  --clr-wave:         #bdeef2;
  --radius: 18px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;
}

html[data-theme="dark"]{
  --clr-primary:      #2fd0d9;
  --clr-primary-dark: #17a6ae;
  --clr-primary-light:#8ff2f6;
  --clr-accent:       #9df3f7;
  --clr-bg:           #071b1e;
  --clr-surface:      #0e2b2f;
  --clr-surface-2:    #113338;
  --clr-text:         #eaf9fa;
  --clr-text-muted:   #a9cfd2;
  --clr-border:       #16474d;
  --clr-shadow:       0 10px 30px rgba(0,0,0,.45);
  --clr-wave:         #103b40;
}

/* ==========================================================================
   2. БАЗА
   ========================================================================== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--clr-bg);
  color:var(--clr-text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  transition:background .3s ease,color .3s ease;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--clr-accent);
  line-height:1.15;
  margin:0 0 .5em;
}
a{ color:var(--clr-primary-dark); }
html[data-theme="dark"] a{ color:var(--clr-primary); }
img{ max-width:100%; display:block; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
.btn{
  display:inline-block;
  background:var(--clr-primary);
  color:#fff !important;
  padding:12px 26px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.btn:hover{ background:var(--clr-primary-dark); transform:translateY(-2px); }

/* ==========================================================================
   3. ШАПКА / HEADER
   ========================================================================== */
.site-header{
  position:relative;
  background:var(--clr-surface);
  border-bottom:1px solid var(--clr-border);
}
.header-wave{
  height:14px;
  background:repeating-radial-gradient(circle at 20px 0, var(--clr-wave) 0 10px, transparent 11px 20px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; max-width:1180px; margin:0 auto; flex-wrap:wrap; gap:16px;
}
.site-logo{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.site-logo .badge{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(160deg,var(--clr-primary-light),var(--clr-primary));
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--clr-shadow);
}
.site-logo .badge svg{ width:30px;height:30px; }
.site-logo .name{ font-family:var(--font-display); font-weight:700; color:var(--clr-accent); font-size:1.15rem; line-height:1.1; }
.site-logo .name span{ display:block; font-family:var(--font-body); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--clr-text-muted); font-weight:600; }

.main-nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
.main-nav a{
  text-decoration:none; color:var(--clr-text); font-weight:600; letter-spacing:.02em;
  padding:6px 2px; border-bottom:2px solid transparent; transition:border-color .2s, color .2s;
}
.main-nav a:hover, .main-nav .current-menu-item a{ color:var(--clr-primary-dark); border-color:var(--clr-primary); }

.header-tools{ display:flex; align-items:center; gap:10px; }

.theme-toggle{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--clr-border);
  background:var(--clr-surface-2); cursor:pointer; display:flex;align-items:center;justify-content:center;
  color:var(--clr-primary-dark);
}
.theme-toggle svg{ width:20px;height:20px; }
.theme-toggle .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:flex; }

.lang-switch{ position:relative; }
.lang-switch button{
  display:flex; align-items:center; gap:6px;
  background:var(--clr-surface-2); border:1px solid var(--clr-border); border-radius:999px;
  padding:8px 14px; font-weight:700; color:var(--clr-text); cursor:pointer;
}
.lang-switch .dropdown{
  position:absolute; right:0; top:calc(100% + 8px); background:var(--clr-surface);
  border:1px solid var(--clr-border); border-radius:12px; box-shadow:var(--clr-shadow);
  min-width:130px; display:none; overflow:hidden; z-index:50;
}
.lang-switch.open .dropdown{ display:block; }
.lang-switch .dropdown button{
  width:100%; text-align:left; border-radius:0; border:none; background:none; padding:10px 14px;
}
.lang-switch .dropdown button:hover{ background:var(--clr-surface-2); }

/* скрытие/показ по языку */
[data-lang-el]{ display:none; }
html[data-lang="ru"] [data-lang-el="ru"]{ display:block; }
html[data-lang="en"] [data-lang-el="en"]{ display:block; }
nav[data-lang-el]{ display:none; }
html[data-lang="ru"] nav[data-lang-el="ru"]{ display:block; }
html[data-lang="en"] nav[data-lang-el="en"]{ display:block; }
span[data-lang-el],strong[data-lang-el]{ display:none; }
html[data-lang="ru"] span[data-lang-el="ru"],html[data-lang="ru"] strong[data-lang-el="ru"]{ display:inline; }
html[data-lang="en"] span[data-lang-el="en"],html[data-lang="en"] strong[data-lang-el="en"]{ display:inline; }

/* ==========================================================================
   4. HERO (главная)
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg,var(--clr-accent),var(--clr-primary-dark));
  color:#fff; padding:90px 24px 130px;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:70px;
  background:var(--clr-bg);
  clip-path:polygon(0 100%,100% 40%,100% 100%);
}
.hero-inner{ max-width:1180px; margin:0 auto; position:relative; z-index:2; }
.hero-pill{
  display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35); padding:10px 20px; border-radius:999px; font-weight:700; margin-bottom:26px;
}
.hero h1{ color:#fff; font-size:2.6rem; max-width:680px; }
.hero p{ max-width:560px; color:rgba(255,255,255,.85); font-size:1.1rem; }

/* ==========================================================================
   5. КАРТОЧКИ СТАТЕЙ
   ========================================================================== */
.cards-section{ padding:60px 24px 90px; }
.cards-section h2{ text-align:center; font-size:1.9rem; margin-bottom:36px; }
.cards-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:920px){ .cards-grid{ grid-template-columns:1fr; } .hero h1{ font-size:2rem; } }

.card{
  background:var(--clr-surface); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--clr-shadow); display:flex; flex-direction:column;
  border:1px solid var(--clr-border);
}
.card-media{ aspect-ratio:16/10; overflow:hidden; background:var(--clr-surface-2); }
.card-media img{ width:100%; height:100%; object-fit:cover; }
.card-body{ padding:24px 24px 28px; display:flex; flex-direction:column; gap:14px; flex:1; }
.card-body h3{ font-size:1.25rem; margin:0; }
.card-body h3 a{ color:var(--clr-accent); text-decoration:none; }
.card-body p{ color:var(--clr-text-muted); margin:0; flex:1; }
.card-body .btn{ align-self:flex-start; padding:10px 20px; font-size:.9rem; }

/* ==========================================================================
   6. СТРАНИЦЫ / СТАТЬИ
   ========================================================================== */
.page-header-strip{
  background:linear-gradient(120deg,var(--clr-accent),var(--clr-primary-dark)); color:#fff;
  padding:70px 24px 90px; position:relative;
}
.page-header-strip::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:50px; background:var(--clr-bg);
  clip-path:polygon(0 100%,100% 45%,100% 100%);
}
.breadcrumb-pill{
  display:inline-flex; gap:10px; align-items:center; background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.35); padding:10px 20px; border-radius:999px; font-weight:700;
}
.content-area{ max-width:820px; margin:0 auto; padding:50px 24px 90px; }
.entry-content p{ margin:0 0 1.2em; }
.entry-meta{ color:var(--clr-text-muted); font-size:.9rem; margin-bottom:24px; }

.about-block{ display:flex; gap:28px; align-items:flex-start; margin-top:30px; flex-wrap:wrap; }
.about-block img{ width:170px; border-radius:50%; box-shadow:var(--clr-shadow); }
.about-block .txt{ flex:1; min-width:260px; }

/* ==========================================================================
   7. ФОРМА КОНТАКТОВ
   ========================================================================== */
.contact-form{ display:grid; gap:20px; max-width:640px; }
.contact-form label{ font-weight:700; margin-bottom:6px; display:block; color:var(--clr-accent); }
.contact-form input, .contact-form textarea{
  width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--clr-border);
  background:var(--clr-surface); color:var(--clr-text); font-family:var(--font-body); font-size:1rem;
}
.contact-form textarea{ min-height:140px; resize:vertical; }
.form-notice{ padding:14px 18px; border-radius:12px; margin-bottom:20px; font-weight:600; }
.form-notice.success{ background:#d7f7ef; color:#0a6b4f; }
.form-notice.error{ background:#fde2e1; color:#9b2226; }

/* ==========================================================================
   8. ФУТЕР
   ========================================================================== */
.site-footer{ background:var(--clr-surface-2); border-top:1px solid var(--clr-border); padding:50px 24px 30px; margin-top:60px; }
.footer-inner{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer-col h4{ margin-bottom:14px; font-size:1rem; }
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin-bottom:8px; }
.footer-col a{ text-decoration:none; color:var(--clr-text-muted); }
.footer-bottom{ text-align:center; color:var(--clr-text-muted); font-size:.85rem; margin-top:36px; }