/*
 * Cosmo site-wide chrome: design tokens, shared primitives (container, eyebrow,
 * buttons) and the header + footer styles. Loaded on EVERY page so the Cosmo
 * header/nav/footer render consistently across the HybridMag blog templates.
 *
 * Only :root tokens and .cn-* classes live here — no bare tag selectors — so
 * this file cannot restyle HybridMag's blog / archive / single content.
 */

:root{
  --cn-green:        #2f7a08;
  --cn-green-deep:    #22590a;
  --cn-lime:          #8fc31f;
  --cn-tint:          #f2f7e8;
  --cn-tint-deep:     #e6efd6;
  --cn-wood:          #a56a3a;
  --cn-wood-light:    #d9b78f;
  --cn-ink:           #2c2a26;
  --cn-ink-soft:      #6b6459;
  --cn-white:         #ffffff;
  --cn-line:          #e2ded3;
  --cn-alert:         #a51218;

  --cn-font-display: "Zen Old Mincho", "Noto Serif JP", serif;
  --cn-font-body: "Noto Sans JP", -apple-system, sans-serif;

  --cn-radius: 10px;
  --cn-radius-lg: 20px;
  --cn-shadow: 0 16px 34px -18px rgba(34,30,20,0.45);
  --cn-container: 1180px;
}

/* Shared primitives */
.cn-container{ max-width: var(--cn-container); margin:0 auto; padding: 0 24px; }

.cn-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--cn-font-body);
  font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  color: var(--cn-green);
}
.cn-eyebrow::before{ content:""; width:24px; height:1px; background: var(--cn-lime); display:inline-block; }

/*
 * Buttons: clear (white) fill, green outline, black text. `.cn-btn` (0,1,0)
 * beats HybridMag's `a { color: … }` (0,0,1), so button text never inherits
 * the theme link color.
 */
.cn-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 30px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; cursor:pointer;
  border: 2px solid var(--cn-green);
  background: var(--cn-white);
  color: var(--cn-ink);
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.cn-btn:hover{
  background: var(--cn-green);
  color: var(--cn-white);
  border-color: var(--cn-green);
  transform: translateY(-2px);
}

/* =========================================================
   HEADER
   ========================================================= */
.cn-topbar{ background: var(--cn-ink); color: var(--cn-tint); font-size:.8rem; }
.cn-topbar .cn-container{ display:flex; justify-content:space-between; align-items:center; padding-top:7px; padding-bottom:7px; gap:16px; flex-wrap:wrap; }
.cn-topbar a{ color: var(--cn-tint); }

.cn-header{ background: var(--cn-white); border-bottom: 1px solid var(--cn-line); position: sticky; top:0; z-index: 40; }
.cn-header-inner{ display:flex; align-items:center; gap:28px; padding: 14px 0; }
.cn-logo{ display:inline-block; }
/* Cap the logo height regardless of source (fallback img, or the_custom_logo's
   .custom-logo img). The .site-logo wrapper in header.php also lets HybridMag's
   own inline logo sizing apply as a backstop if this file is cached. */
.cn-logo img,
.cn-header .custom-logo,
.cn-header .site-logo img{ max-height:58px !important; width:auto !important; }
.cn-logo-text{ font-family: var(--cn-font-display); font-weight:700; font-size:1.3rem; color: var(--cn-green); }

.cn-header-actions{ display:flex; align-items:center; gap:20px; margin-left:auto; text-align:right; }
.cn-phone{ font-family: var(--cn-font-display); font-size:1.35rem; color: var(--cn-green-deep); font-weight:700; }
.cn-phone-label{ font-size:.72rem; color: var(--cn-ink-soft); display:block; }
.cn-header-cta{ display:none; }
@media (min-width: 700px){ .cn-header-cta{ display:inline-flex; } }

.cn-nav{ background: var(--cn-green); }
.cn-nav .cn-container{ display:flex; align-items:center; gap: 4px; }
.cn-nav ul{ display:flex; flex-wrap:wrap; margin:0; padding:0; list-style:none; }
.cn-nav a{
  display:block; padding: 14px 16px; color: #fff; font-weight:600; font-size:.88rem;
  letter-spacing:.02em;
}
.cn-nav a:hover, .cn-nav .current-menu-item > a{ color: var(--cn-lime); }
.cn-menu-toggle{ display:none; background:none; border:none; color:#fff; font-size:1.5rem; padding: 8px 0; cursor:pointer; }

@media (max-width: 880px){
  .cn-menu-toggle{ display:block; }
  .cn-nav ul{ display:none; flex-direction:column; width:100%; }
  .cn-nav.is-open ul{ display:flex; }
  .cn-nav .cn-container{ flex-direction:column; align-items:flex-start; }
}

/* Service area band (footer top) */
.cn-area{ background: var(--cn-green-deep); color:#fff; text-align:center; padding: 46px 0; }
.cn-area h2{ color:#fff; font-family: var(--cn-font-display); margin: 0 0 .4em; }
.cn-area p{ color: #d8ecc4; margin:0; }

/* =========================================================
   FOOTER
   ========================================================= */
.cn-footer{ background: var(--cn-ink); color: #cfc9bc; padding-top: 56px; }
.cn-footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.cn-footer h4{ color:#fff; font-size:1rem; margin-bottom: 1em; font-family: var(--cn-font-display); }
.cn-footer p{ margin: 0 0 1em; }
.cn-footer ul{ margin:0; padding:0; list-style:none; }
.cn-footer ul li{ margin-bottom: .65em; }
.cn-footer a{ color: #cfc9bc; }
.cn-footer a:hover{ color: var(--cn-lime); }
/* Footer logo: force to a white silhouette so it reads on the dark footer,
   whether it's our fallback image or an uploaded custom logo. */
.cn-footer-logo{ margin-bottom:14px; }
.cn-footer-logo img{ max-height:48px !important; width:auto !important; filter: brightness(0) invert(1); }
.cn-footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0; font-size:.8rem; text-align:center; }
@media (max-width: 880px){ .cn-footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .cn-footer-grid{ grid-template-columns: 1fr; } }