/* ═══════════════════════════════════════════════════════════════════════════
   REDESIGN — Warm Cedar colours + photo-led presentation
   Loaded after style.css. Same content, new look.
   The colours reuse style.css's variable names (--navy = main dark
   colour, --green = accent for buttons) so every existing page picks them up.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Colours: Warm Cedar (approved Nov 2026) ── */
:root {               /* Warm Cedar (refined current browns) */
  --navy:       #4e3d30;
  --navy-dark:  #33271f;
  --navy-mid:   #7f5638;
  --green:      #a3402a;
  --green-dark: #80301e;
  --ice:        #f6efe8;
  --snow:       #fbf8f4;
  --text:       #2e2621;
  --text-muted: #6e6158;
  --border:     #e6dbd0;
  --tint:       51, 39, 31;
  --accent-rgb: 163, 64, 42;
}
:root {
  --shadow:    0 2px 18px rgba(var(--tint), .10);
  --shadow-lg: 0 14px 40px rgba(var(--tint), .18);
  --radius:    10px;
}

body { color: var(--text); }

/* Fix leftover green shadows from the old theme */
.btn-primary, .btn-submit { box-shadow: 0 4px 14px rgba(var(--accent-rgb), .35); }
.btn-primary:hover, .btn-submit:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(var(--accent-rgb), .45); }

/* ── Navigation ── */
#main-nav {
  background: var(--navy);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 18px rgba(0,0,0,.18);
}
.nav-logo img { height: 50px; width: 50px; }
.nav-club-name { font-size: 1.02rem; letter-spacing: .01em; }
.nav-menu a, .nav-dropdown-label { font-size: .93rem; }
.nav-menu a.nav-register { box-shadow: 0 2px 10px rgba(var(--accent-rgb), .45); }
.dropdown { padding: .35rem 0; border-radius: 0 0 var(--radius) var(--radius); }

/* Mobile: line Trails / Programs up with the other menu items */
@media (max-width: 768px) {
  .nav-dropdown-label {
    width: 100%;
    text-align: left;
    padding: .75rem 1.5rem;
    border-radius: 0;
    font-size: .93rem;
  }
  .nav-dropdown-label::after { content: ' ▾'; opacity: .6; }
}

/* ── Homepage hero ── */
.hero {
  min-height: min(82vh, 760px);
  background: var(--navy-dark);
}
.hero picture { position: absolute; inset: 0; }
.hero-img {
  opacity: 1;
  object-position: center 55%;
}
.hero::after {                          /* legibility gradient, tinted with the palette */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 52%, rgba(var(--tint), .38) 0%, rgba(var(--tint), 0) 100%),
    linear-gradient(to bottom, rgba(var(--tint), .35) 0%, rgba(var(--tint), 0) 30%, rgba(var(--tint), 0) 65%, rgba(var(--tint), .55) 100%);
}
.hero-content { z-index: 2; padding: 2.5rem 1.5rem 3rem; }
.hero-logo { filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); padding: 0; margin-bottom: 1.1rem; }
.hero-logo img { height: clamp(120px, 20vw, 210px); width: auto; }
.hero-club-name {
  font-size: clamp(.8rem, 1.8vw, 1rem);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  opacity: .95;
}
.hero-content h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  letter-spacing: -.01em;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hero-content p { text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }
.hero .btn-primary { background: var(--green); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.hero .btn-primary:hover { background: var(--green-dark); }
.hero .btn-outline { margin-left: 0; backdrop-filter: blur(4px); background: rgba(255,255,255,.08); }
.hero-base { display: none; }

/* ── Homepage sections ── */
.page-home .site-main { background: var(--snow); }
.home-sections { padding: 4rem 1.5rem 3.5rem; }
.section-label {
  display: flex; align-items: center; gap: .75rem;
  color: var(--green);
  letter-spacing: .14em;
}
.section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.news-list { gap: 1.1rem; }
.news-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid transparent;
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  box-shadow: 0 1px 2px rgba(var(--tint), .04);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.news-card:hover { box-shadow: var(--shadow); border-left-color: var(--green); transform: translateY(-2px); }
.news-card .card-date {
  font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy-mid);
}
.news-card h3 { font-size: 1.22rem; }
.news-card:first-child { padding: 1.9rem 2rem; border-left-color: var(--green); }
.news-card:first-child h3 { font-size: 1.5rem; }

.sidebar-card {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(var(--tint), .04);
}
.sidebar-card:first-child {
  background: var(--navy);
  border-color: var(--navy);
  color: rgba(255,255,255,.85);
}
.sidebar-card:first-child h4 { color: var(--white); border-bottom-color: rgba(255,255,255,.25); }
.sidebar-card:first-child ul a { color: rgba(255,255,255,.9); }
.sidebar-card:first-child ul a::before { content: '→ '; opacity: .55; }
.sidebar-card:first-child ul a:hover { color: var(--white); }
.sidebar-card h4 { border-bottom: 2px solid var(--green); }
.sidebar { position: sticky; top: 96px; align-self: start; }

/* Homepage photo band */
.photo-band {
  background: var(--white);
  padding: 3.5rem 1.5rem 1rem;
}
.photo-band-inner { max-width: var(--max-w); margin: 0 auto; }
.photo-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
  gap: .75rem;
  height: 360px;
}
.photo-grid figure { margin: 0; overflow: hidden; border-radius: var(--radius); position: relative; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.photo-grid figure:hover img { transform: scale(1.04); }

/* ── Interior page banner (the existing title strip, now over a photo) ── */
.page-hero.page-banner {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  padding: 0;
  text-align: left;
  background-color: var(--navy);
  background-image:
    linear-gradient(to top, rgba(var(--tint), .80) 0%, rgba(var(--tint), .30) 55%, rgba(var(--tint), .05) 100%),
    var(--banner);
  background-size: cover;
  background-position: center var(--banner-y, 50%);
}
.page-banner .container {
  width: 100%;
  max-width: var(--content-w);
  padding: 4rem 1.5rem 2.1rem;
}
.banner-kicker {
  font-family: 'Raleway', sans-serif;
  font-size: .76rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.88) !important;
  margin: 0 0 .45rem !important;
}
.banner-kicker::before { content: ''; display: inline-block; width: 22px; height: 2px; background: var(--green); vertical-align: middle; margin-right: .6rem; }
.page-banner h1 {
  color: var(--white);
  font-size: clamp(1.85rem, 4.6vw, 3rem);
  font-weight: 800;
  text-shadow: 0 2px 14px rgba(0,0,0,.3);
}
.page-banner p { color: rgba(255,255,255,.9); font-size: 1.08rem; text-shadow: 0 1px 8px rgba(0,0,0,.35); }

/* ── Content pages ── */
.content-wrap { padding-top: 3rem; }
.content-wrap h2 { font-size: 1.7rem; }
.content-wrap h3, .content-wrap h4 { color: var(--navy); }
.content-wrap h4.wp-block-heading,
.content-wrap h4 {
  font-size: 1.3rem;
  margin-top: 2.2rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--border);
}
.content-wrap > p:first-child { font-size: 1.08rem; }
.content-wrap blockquote {
  background: var(--ice);
  border-left-color: var(--green);
  color: var(--navy);
}
.callout {
  background: var(--ice);
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
}
.content-wrap figure img, .winners-photo img { box-shadow: var(--shadow); }

/* Membership prices */
.price-card {
  background: var(--white);
  border-top: 4px solid var(--green);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.25rem;
  transition: transform .2s, box-shadow .2s;
}
.price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.price-card .label { text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; color: var(--navy-mid); }
.price-card .price { font-size: 2.4rem; color: var(--navy); }

/* Cards used on About page */
.history-link-card { background: var(--white) !important; box-shadow: var(--shadow); border-top: 4px solid var(--green) !important; }

/* Loppet cards, Nordic Pulse header */
.loppet-card-label, .nordic-pulse-header { background: var(--navy); }

/* ── Footer with treeline ── */
footer {
  position: relative;
  background: var(--navy-dark);
  margin-top: 70px;
}
footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -54px;
  height: 56px;
  background: var(--navy-dark);
  -webkit-mask: url("../media/site/treeline.svg") bottom left / auto 56px repeat-x;
          mask: url("../media/site/treeline.svg") bottom left / auto 56px repeat-x;
}
.page-home footer { margin-top: 70px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .sidebar { position: static; }
  .photo-grid { grid-template-columns: 1fr 1fr; height: auto; }
  .photo-grid figure { height: 220px; }
}
@media (max-width: 700px) {
  .hero { min-height: 640px; }
  .hero-img { object-position: center 70%; }
  .page-hero.page-banner { min-height: 210px; }
  .page-banner .container { padding: 3rem 1.25rem 1.5rem; }
  .news-card:first-child { padding: 1.5rem 1.4rem; }
  .news-card:first-child h3 { font-size: 1.3rem; }
}
@media (max-width: 480px) {
  .photo-grid figure { height: 170px; }
  .hero-actions .btn { width: 100%; max-width: 280px; }
}

.footer-mark { width: 58px; height: 58px; margin-bottom: .9rem; }

/* Banner photos (one class per photo; paths are relative to this stylesheet) */
.banner-cabin      { --banner: url("../media/site/banner-cabin.jpg");      --banner-y: 45%; }
.banner-sunny-ski  { --banner: url("../media/site/banner-sunny-ski.jpg");  --banner-y: 60%; }
.banner-more-trail { --banner: url("../media/site/banner-more-trail.jpg"); --banner-y: 55%; }
.banner-grooming   { --banner: url("../media/site/banner-grooming.jpg");   --banner-y: 80%; }
.banner-classic    { --banner: url("../media/site/banner-classic.jpg");    --banner-y: 55%; }
.banner-deer       { --banner: url("../media/site/banner-deer.jpg");       --banner-y: 35%; }

/* ── Contact page: email link instead of a form ── */
.contact-email { font-size: 1.35rem; font-weight: 700; margin: .2rem 0 1rem; word-break: break-word; }
.contact-email a { color: var(--green); }
.contact-note { color: var(--text-muted); font-size: .95rem; }
.content-wrap .email-topics { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; }
.content-wrap .email-topics li { margin: 0; padding: 0; }
.email-topic {
  display: block; padding: 1rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.email-topic:hover { border-color: var(--green); box-shadow: var(--shadow); text-decoration: none; }
.email-topic strong { display: block; color: var(--navy); }
.email-topic strong::after { content: " →"; color: var(--green); }
.email-topic span { color: var(--text-muted); font-size: .92rem; }