/*
Theme Name: Bear Safety Hokkaido Child
Theme URI: https://bearsafetyhokkaido.site
Description: Cocoon child theme for Bear Safety Hokkaido. Trailhead-signage design language: forest green header, rust-orange accent, mono-spaced facts and dates.
Author: Bear Safety Hokkaido
Template: cocoon-master
Version: 1.0.0
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --bsh-paper: #eef0e6;
  --bsh-paper-raised: #e4e8db;
  --bsh-ink: #1c221d;
  --bsh-ink-soft: #454e46;
  --bsh-forest: #26402f;
  --bsh-forest-soft: #33503c;
  --bsh-forest-ink: #eef0e6;
  --bsh-rust: #b5592e;
  --bsh-rust-dark: #954a25;
  --bsh-rust-ink: #fff7f0;
  --bsh-stone: #7c8477;
  --bsh-stone-line: #cbd0c1;
  --bsh-caution-bg: #f4e6c4;
  --bsh-caution-ink: #6b4a12;
  --bsh-caution-line: #d6a73b;

  --bsh-font-display: 'Big Shoulders Display', 'Hiragino Sans', sans-serif;
  --bsh-font-body: 'Karla', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --bsh-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  background: var(--bsh-paper);
  color: var(--bsh-ink);
  font-family: var(--bsh-font-body);
}

a {
  color: var(--bsh-rust);
}
a:hover {
  color: var(--bsh-rust-dark);
}

h1, h2, h3, h4,
.entry-title,
.entry-card-title,
.widget-title,
.box-title,
.article-title {
  font-family: var(--bsh-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--bsh-ink);
}

/* ==========================================================================
   Header / logo
   ========================================================================== */
#header.header {
  background: var(--bsh-forest);
  border-bottom: 3px solid var(--bsh-rust);
}

#header .logo.logo-header .site-name-text,
#header .tagline {
  color: var(--bsh-forest-ink);
}

#header .logo.logo-header {
  font-family: var(--bsh-font-display);
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
#navi.navi {
  background: var(--bsh-forest-soft);
}

#navi a {
  font-family: var(--bsh-font-mono);
  font-size: 0.85em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bsh-forest-ink);
}

#navi a:hover {
  background: var(--bsh-rust);
  color: var(--bsh-rust-ink);
}

/* ==========================================================================
   Entry cards (home / archive)
   ========================================================================== */
.entry-card,
.a-card {
  background: var(--bsh-paper-raised);
  border: 1px solid var(--bsh-stone-line);
  border-radius: 0;
  box-shadow: none;
}

.entry-card .cat-label {
  background: var(--bsh-rust);
  color: var(--bsh-rust-ink);
  font-family: var(--bsh-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 0;
}

.entry-card-title,
.entry-card-meta,
.post-date,
.entry-category,
.entry-card-snippet {
  font-family: var(--bsh-font-mono);
}

.entry-card-title {
  font-family: var(--bsh-font-display);
}

.entry-card-meta,
.post-date,
.entry-category {
  color: var(--bsh-stone);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Single article
   ========================================================================== */
.article {
  background: var(--bsh-paper-raised);
  border: 1px solid var(--bsh-stone-line);
  border-radius: 0;
  box-shadow: none;
}

.entry-title {
  border-bottom: 3px solid var(--bsh-ink);
  padding-bottom: 0.4em;
}

.entry-content h2 {
  border-left: 6px solid var(--bsh-rust);
  padding-left: 0.5em;
  text-transform: none;
  letter-spacing: normal;
}

.entry-content h3 {
  color: var(--bsh-forest);
  text-transform: none;
  letter-spacing: normal;
}

.entry-content blockquote,
.wp-block-quote {
  border-left: 4px solid var(--bsh-rust);
  background: var(--bsh-paper);
  font-family: var(--bsh-font-body);
}

.entry-content code,
.entry-content pre {
  font-family: var(--bsh-font-mono);
  background: var(--bsh-paper);
}

/* ==========================================================================
   Sidebar / widgets
   ========================================================================== */
.widget-title,
.box-title {
  border-bottom: 2px solid var(--bsh-ink);
  padding-bottom: 0.3em;
  font-size: 0.95em;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Buttons / inputs
   ========================================================================== */
.wp-element-button,
.wp-block-search__button,
input[type="submit"],
.sk-btn,
.read-more a {
  background: var(--bsh-rust) !important;
  color: var(--bsh-rust-ink) !important;
  border-radius: 0 !important;
  font-family: var(--bsh-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wp-element-button:hover,
.wp-block-search__button:hover,
input[type="submit"]:hover {
  background: var(--bsh-rust-dark) !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */
#footer.footer {
  background: var(--bsh-forest);
  color: var(--bsh-forest-ink);
}

#footer .site-name-text,
#footer a,
#footer .copyright {
  color: var(--bsh-forest-ink);
}

#footer .navi-footer a:hover {
  color: var(--bsh-rust);
}

/* ==========================================================================
   Content helpers for article drafts
   (paste these classes directly into a post's HTML/Custom HTML block)
   ========================================================================== */

/* Safety disclaimer box — use for the required seasonal/accuracy caveat */
.bsh-caution {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  background: var(--bsh-caution-bg);
  border: 1px solid var(--bsh-caution-line);
  color: var(--bsh-caution-ink);
  padding: 1.2em 1.4em;
  margin: 1.5em 0;
}
.bsh-caution strong {
  display: block;
  font-family: var(--bsh-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85em;
  margin-bottom: 0.4em;
}

/* Fact strip — for quick rental fee / distance / date callouts */
.bsh-fact {
  display: inline-block;
  font-family: var(--bsh-font-mono);
  background: var(--bsh-paper-raised);
  border: 1px solid var(--bsh-stone-line);
  padding: 0.5em 0.8em;
  margin: 0.2em 0.4em 0.2em 0;
  font-size: 0.9em;
}
.bsh-fact b {
  color: var(--bsh-rust);
}

/* ==========================================================================
   Dark mode
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bsh-paper: #161c17;
    --bsh-paper-raised: #1e261f;
    --bsh-ink: #e9ece4;
    --bsh-ink-soft: #aab3a3;
    --bsh-forest: #0f1a13;
    --bsh-forest-soft: #16241a;
    --bsh-forest-ink: #e9ece4;
    --bsh-rust: #d97a4a;
    --bsh-rust-dark: #c2653a;
    --bsh-rust-ink: #201007;
    --bsh-stone: #8b9382;
    --bsh-stone-line: #33402f;
    --bsh-caution-bg: #2b230f;
    --bsh-caution-ink: #e8c988;
    --bsh-caution-line: #6b5322;
  }

  h1, h2, h3, h4,
  .entry-title,
  .entry-card-title,
  .widget-title,
  .box-title,
  .article-title {
    color: var(--bsh-ink);
  }
}