/*
Theme Name:  Azul Child
Template:    cocoon-master
Version:     2.1.0
Description: AZUL（アズール）— 現実的スピリチュアルガイド カスタムデザイン子テーマ（一本化版）
Author:      AZUL
*/

/* ============================================================
   AZUL CHILD THEME — style.css（単一ファイル構成）
   スキンは使用せず、このファイルにすべてのカスタムCSSを集約しています。
   ============================================================
   INDEX
   01. Global Reset / Overflow Guard
   02. CSS Variables（デザイントークン）
   03. Base / Typography
   04. Header / Navigation
   05. Entry Cards（記事一覧）
   06. Sidebar / Widgets
   07. Footer
   08. Hero（トップページ）
   09. Topic Band（ヒーロー直下）
   10. Mobile Readability
   ============================================================ */


/* ============================================================
   01. GLOBAL RESET / OVERFLOW GUARD
   ============================================================ */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

#container, #content, #content-in, .wrap, .content-in,
.header-container, .header-container-in, .navi, .navi-in {
  max-width: 100%;
  box-sizing: border-box;
}


/* ============================================================
   02. CSS VARIABLES — Design Tokens
   ============================================================ */

:root {
  --azul-azure:        #2e4a6b;
  --azul-azure-light:  #4a7a9b;
  --azul-gold:         #c9ad7a;
  --azul-parchment:    #f5f1eb;
  --azul-ink:          #2a2620;
  --azul-slate:        #7d7870;
  --azul-ash:          #ddd6cc;

  --font-title:  'Cormorant Garamond', serif;
  --font-body:   'Shippori Mincho', serif;
  --font-accent: 'Cormorant Garamond', serif;
}


/* ============================================================
   03. BASE / TYPOGRAPHY
   ============================================================ */

body.body {
  font-family: var(--font-body), "Noto Sans JP", sans-serif;
  color: var(--azul-ink);
}

.article h2 {
  border-left: 3px solid var(--azul-gold);
  padding-left: 12px;
  background: none;
}

.article h3 {
  border-left: 2px solid var(--azul-azure-light);
  padding-left: 10px;
}


/* ============================================================
   04. HEADER / NAVIGATION
   ============================================================ */

.site-name-text {
  font-family: var(--font-title);
  letter-spacing: 0.12em;
  color: var(--azul-ink);
}

.navi {
  background: #fff;
  border-bottom: 1px solid var(--azul-ash);
}


/* ============================================================
   05. ENTRY CARDS（記事一覧）
   ============================================================ */

.entry-card-wrap {
  border-bottom: 1px solid var(--azul-ash);
}

.entry-card-title {
  font-weight: 500;
  color: var(--azul-ink);
}

.cat-label {
  background: rgba(42,38,32,0.75) !important;
}


/* ============================================================
   06. SIDEBAR / WIDGETS
   ============================================================ */

.widget-title {
  border-bottom: 2px solid var(--azul-gold);
  color: var(--azul-ink);
}


/* ============================================================
   07. FOOTER
   ============================================================ */

#footer {
  background: var(--azul-parchment);
  border-top: 1px solid var(--azul-ash);
}


/* ============================================================
   08. HERO — トップページ
   ============================================================ */

.azul-hero {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 56px 24px 40px;
  background: var(--azul-parchment);
  text-align: center;
}

.azul-hero__title {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--azul-ink);
  margin: 0 0 18px;
  max-width: 100%;
}

.azul-hero__rule {
  width: 56px;
  height: 1px;
  margin: 0 auto 20px;
  background: var(--azul-gold);
}

.azul-hero__sub {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--azul-azure-light);
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}

.azul-hero__tagline {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--azul-slate);
  letter-spacing: 0.06em;
  margin: 0 0 22px;
}

.azul-hero__copy {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 2.0;
  color: var(--azul-slate);
  max-width: 540px;
  margin: 0 auto;
  word-break: keep-all;
  overflow-wrap: normal;
}


/* ============================================================
   09. TOPIC BAND — ヒーロー直下・全幅帯
   ============================================================ */

.azul-topic-band {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--azul-ink);
  padding: 14px 20px;
  overflow: hidden;
}

.azul-topic-band__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.azul-topic-band__inner * {
  min-width: 0;
}

.azul-topic-band__label {
  font-family: var(--font-accent);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azul-gold);
  white-space: nowrap;
}

.azul-topic-band__month {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  color: #b8b2a8;
  white-space: nowrap;
}

.azul-topic-band__text {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(245,241,235,0.85);
  line-height: 1.8;
}

.azul-topic-band a {
  color: #8fc4e8 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(143,196,232,0.5) !important;
  font-weight: 500 !important;
}

.azul-topic-band a:hover,
.azul-topic-band a:active {
  color: #c9ad7a !important;
}


/* ============================================================
   10. MOBILE READABILITY
   ============================================================ */

@media screen and (max-width: 768px) {

  body, .body, .entry-content, .article {
    font-size: 16px !important;
    line-height: 2.0 !important;
  }

  .entry-content p, .article p {
    margin-bottom: 1.6em !important;
  }

  .entry-content h2, .article h2 {
    font-size: 1.15rem !important;
    line-height: 1.55 !important;
    padding: 12px 14px !important;
    margin: 1.8em 0 1em !important;
  }

  .entry-content h3, .article h3 {
    font-size: 1.02rem !important;
    line-height: 1.6 !important;
  }

  .entry-content { padding: 0 16px !important; }

  .azul-hero {
    padding: 36px 16px 28px;
  }

  .azul-hero__title {
    letter-spacing: 0.1em;
  }

  .azul-hero__copy {
    font-size: 0.82rem;
    line-height: 1.95;
    text-align: left;
  }

  .azul-topic-band {
    padding: 12px 16px;
  }

  .azul-topic-band__text {
    font-size: 0.8rem;
    line-height: 1.85;
  }
}

@media screen and (max-width: 375px) {
  body, .entry-content, .article {
    font-size: 15px !important;
  }
  .entry-content { padding: 0 12px !important; }
}


/* ============================================================
   11. 重複ナビゲーションの非表示（スマホ）
   トップページ上部にカテゴリー一覧が二重に表示されるのを防止
   ============================================================ */

@media screen and (max-width: 768px) {
  .home .wp-block-categories,
  .home .widget_categories,
  .home .wp-block-categories-list {
    display: none !important;
  }
}