/**
 * paddlingout.css — Kaayko brand redesign
 *
 * Structure:
 *  0) Brand tokens
 *  1) Page base
 *  2) Container & grid
 *  3) Card base
 *  4) Image container & carousel images
 *  5) Carousel nav arrows
 *  6) Conditions badge
 *  7) Carousel dots
 *  8) Card content
 *  9) Forecast button
 * 10) View toggle bar
 * 11) Single-card view
 * 12) List view — compact rows
 * 13) Responsive breakpoints
 */

/*─────────────────────────────────────────────────────────────────────────────
 0) Brand tokens
─────────────────────────────────────────────────────────────────────────────*/
:root {
  --bg:            #080808;
  --panel-a:       #0d0c0a;
  --panel-c:       #10110d;
  --fg:            #ede8df;
  --muted:         rgba(237, 232, 223, 0.58);
  --gold:          #b5935a;
  --gold-bright:   #d9bd7b;
  --line:          rgba(181, 147, 90, 0.74);
  --score-critical: #bd3b2b;
  --score-moderate: #eb8127;
  --score-good:     #316d43;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Josefin Sans', 'Josefin_Bold', Arial, sans-serif;
  --ease: cubic-bezier(0.76, 0, 0.24, 1);
}

/*─────────────────────────────────────────────────────────────────────────────
 1) Page base
─────────────────────────────────────────────────────────────────────────────*/

/* Same reset as storestyle.css line 51. paddlingout.html loads storestyle.css
   and gets it there; the spot pages and 404.html load this file on its own, so
   it has to be self-sufficient or their max-width + padding overflows. */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: var(--font-serif);
  min-height: 100vh;
  color: var(--fg);
}

/* Dark-only page — hide the theme toggle entirely */
.theme-toggle-icon {
  display: none !important;
}

/* Header — hides on scroll-down, reappears on scroll-up */
.header {
  transition: transform 0.38s cubic-bezier(0.76, 0, 0.24, 1),
              opacity   0.38s ease !important;
}

.header.header-hidden {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* The site footer lives in css/footer.css (.site-footer). Deliberately no
   bare `footer` rules here — element selectors on <footer> are how six
   different footer variants happened in the first place. */

/* SEO prerendered lake grid — visible until JS replaces */
.seo-lake {
  display: block;
  padding: 1.2rem 1.4rem;
  background: rgba(20, 18, 12, 0.6);
  border: 1px solid rgba(181, 147, 90, 0.2);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s;
}
.seo-lake:hover { border-color: var(--gold); }
.seo-lake h2 {
  font: 600 1rem var(--font-sans);
  color: var(--fg);
  margin: 0 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.seo-lake p {
  font: 400 italic 0.85rem var(--font-serif);
  color: var(--muted);
  margin: 0;
}

/*─────────────────────────────────────────────────────────────────────────────
 2) Container & grid
─────────────────────────────────────────────────────────────────────────────*/
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  padding: 2rem;
  max-width: 1600px;
  margin: 0 auto;
}

/*─────────────────────────────────────────────────────────────────────────────
 3) Card base
─────────────────────────────────────────────────────────────────────────────*/
.card {
  background: linear-gradient(135deg, var(--panel-a), var(--panel-c));
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: all 0.4s var(--ease);
  position: relative;
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(181, 147, 90, 0.12);
}

.submit-entry-card {
  min-height: 100%;
  justify-content: center;
  gap: 1.2rem;
  padding: 2rem;
  border-style: dashed;
  background:
    linear-gradient(135deg, rgba(181,147,90,0.08), rgba(49,109,67,0.06)),
    var(--panel-a);
}

.submit-entry-plus {
  width: 74px;
  height: 74px;
  border: 1px solid rgba(181,147,90,0.42);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-bright);
  font-family: var(--font-sans);
  font-size: 3.1rem;
  font-weight: 300;
  line-height: 1;
  background: rgba(181,147,90,0.08);
}

.submit-entry-copy {
  max-width: 26rem;
}

.submit-entry-kicker,
.submit-entry-action {
  display: block;
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.submit-entry-copy h2 {
  margin: 0.45rem 0 0.7rem;
  color: var(--gold-bright);
  font-family: var(--font-sans);
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.submit-entry-copy p {
  margin: 0 0 1.2rem;
  color: var(--muted);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.45;
}

.submit-entry-action {
  width: fit-content;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(217,189,123,0.55);
  color: var(--gold-bright);
}

/*─────────────────────────────────────────────────────────────────────────────
 4) Image container & carousel images
─────────────────────────────────────────────────────────────────────────────*/
.img-container {
  position: relative;
  height: 280px;
  background: #000;
  overflow: hidden;
  flex-shrink: 0;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}

.img-container img.active {
  opacity: 1;
  z-index: 1;
}

.card:hover .img-container img.active {
  transform: scale(1.04);
}

/* Gradient veil — softens the image→card transition */
.img-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: linear-gradient(to top, rgba(13, 12, 10, 0.78), transparent);
  z-index: 2;
  pointer-events: none;
}

/*─────────────────────────────────────────────────────────────────────────────
 5) Carousel nav arrows
─────────────────────────────────────────────────────────────────────────────*/
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(8, 8, 8, 0.72);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s var(--ease);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-container:hover .carousel-nav {
  opacity: 1;
}

.carousel-nav:hover {
  background: rgba(181, 147, 90, 0.28);
  border-color: var(--gold-bright);
  transform: translateY(-50%) scale(1.08);
}

.carousel-nav:active {
  transform: translateY(-50%) scale(0.95);
}

.carousel-nav.prev { left: 10px; }
.carousel-nav.next { right: 10px; }

/*─────────────────────────────────────────────────────────────────────────────
 6) Conditions badge — frosted-glass pill
─────────────────────────────────────────────────────────────────────────────*/
.conditions-badge {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: rgba(8, 8, 8, 0.62);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 0.32rem 0.7rem 0.32rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.42rem;
  z-index: 10;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  user-select: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.conditions-badge:hover {
  background: rgba(8, 8, 8, 0.82);
  border-color: rgba(255, 255, 255, 0.18);
  transform: scale(1.04);
}

/* Colored dot — status indicator */
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--score-good);
  flex-shrink: 0;
}

.conditions-badge.critical .badge-dot { background: var(--score-critical); }
.conditions-badge.moderate .badge-dot { background: var(--score-moderate); }

.badge-label { display: none; }

.badge-score {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.01em;
}

.badge-status {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.6);
}

/*─────────────────────────────────────────────────────────────────────────────
 7) Carousel dots
─────────────────────────────────────────────────────────────────────────────*/
.carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 6;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  cursor: pointer;
  transition: all 0.3s var(--ease);
  flex-shrink: 0;
}

.carousel-dot.active {
  background: var(--gold-bright);
  transform: scale(1.5);
}

/*─────────────────────────────────────────────────────────────────────────────
 8) Card content
─────────────────────────────────────────────────────────────────────────────*/
.card-content {
  padding: 1.4rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.lake-name {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--gold-bright);
  letter-spacing: 0.02em;
  margin: 0 0 0.2rem;
  line-height: 1.2;
}

.location {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--muted);
  font-size: 1rem;
  margin: 0 0 0.8rem;
  line-height: 1.4;
}

.description {
  font-family: var(--font-serif);
  color: var(--fg);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 1.25rem;
  flex: 1;
}

/*─────────────────────────────────────────────────────────────────────────────
 8b) Card actions row
─────────────────────────────────────────────────────────────────────────────*/
.card-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: auto;
}

/*─────────────────────────────────────────────────────────────────────────────
 9) Forecast & Rate — underline + glow, both animate in/out together
─────────────────────────────────────────────────────────────────────────────*/
.forecast-button,
.rate-button {
  background: none;
  border: none;
  padding: 0.15rem 0;
  width: fit-content;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  position: relative;
  transition: color 0.45s ease, text-shadow 0.45s ease;
}

.forecast-button span:last-child { display: none; }

/* Underline — draws in on hover, shrinks away on leave */
.forecast-button::after,
.rate-button::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-bright);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease);
}

.forecast-button:hover,
.forecast-button:active,
.rate-button:hover,
.rate-button:active {
  color: var(--gold-bright);
  text-shadow:
    0 0 8px  rgba(217, 189, 123, 0.9),
    0 0 22px rgba(181, 147, 90, 0.5),
    0 0 50px rgba(181, 147, 90, 0.18);
}

.forecast-button:hover::after,
.forecast-button:active::after,
.rate-button:hover::after,
.rate-button:active::after {
  transform: scaleX(1);
}


/*─────────────────────────────────────────────────────────────────────────────
 11) Single-card view
─────────────────────────────────────────────────────────────────────────────*/
.container.single-card {
  display: flex !important;
  grid-template-columns: none;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
}

.container.single-card .card {
  width: 380px;
  max-width: 92%;
}


/*─────────────────────────────────────────────────────────────────────────────
 13) Responsive breakpoints — Grid
─────────────────────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    padding: 1.25rem;
  }

  .img-container { height: 240px; }
}

@media (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }

  .img-container { height: 220px; }

  .lake-name { font-size: 1.2rem; }
}

/* ── 14. In-page brand bar (replaces shared sticky header) ─────────────── */

/* Hide the shared header entirely on this page */
.header { display: none !important; }

.po-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 2rem 2rem 1.25rem;
  border-bottom: 1px solid rgba(181,147,90,0.18);
}

.po-brand {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.po-eyebrow {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.28em;
  color: var(--gold, #b5935a);
  opacity: 0.82;
  text-transform: lowercase;
}

.po-title {
  font-family: 'Josefin Sans', 'Josefin_Bold', Arial, sans-serif;
  font-size: clamp(1.55rem, 4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-bright, #d9bd7b);
  margin: 0;
  line-height: 1;
}

.po-search-btn {
  flex-shrink: 0;
  height: 36px;
  padding: 0 1rem 0 0.7rem;
  border: 1px solid rgba(181,147,90,0.36);
  border-radius: 50px;
  background: rgba(181,147,90,0.08);
  color: var(--gold, #b5935a);
  display: flex;
  align-items: center;
  gap: 0.38rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  margin-bottom: 0.15rem;
}

.po-search-btn .material-icons {
  font-size: 18px;
  line-height: 1;
}

.po-search-label {
  font-family: 'Josefin Sans', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}

.po-search-btn:hover {
  background: rgba(181,147,90,0.18);
  border-color: var(--gold, #b5935a);
}

@media (max-width: 600px) {
  .po-page-header {
    padding: 1.4rem 1.1rem 1rem;
  }
  .po-title {
    font-size: 1.4rem;
  }
}

/*─────────────────────────────────────────────────────────────────────────────
 12) Editorial blocks — intro lede and FAQ
     These carry the page's static, crawlable copy. They are deliberately
     styled with the same tokens as the cards so they read as part of the
     page rather than as an SEO appendage bolted to the bottom.
─────────────────────────────────────────────────────────────────────────────*/
.po-intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem clamp(1.25rem, 4vw, 2rem) 0;
}

.po-intro p {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.66;
  max-width: 46rem;
  color: rgba(237, 232, 223, 0.78);
  margin: 0 0 0.9rem;
}

.po-intro p:first-of-type {
  color: var(--fg);
}

.po-intro a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(181, 147, 90, 0.4);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.po-intro a:hover { color: var(--gold-bright); border-color: var(--gold-bright); }

/* Small caps rule used above both editorial sections */
.po-rule {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.9;
  margin: 0 0 1.1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(181, 147, 90, 0.18);
}

.po-faq {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem clamp(1.25rem, 4vw, 2rem) 3rem;
}

.po-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem 2.25rem;
}

.po-faq-item {
  padding: 1.15rem 1.35rem;
  background: rgba(20, 18, 12, 0.5);
  border: 1px solid rgba(181, 147, 90, 0.16);
  border-radius: 10px;
  transition: border-color 0.3s var(--ease);
}
.po-faq-item:hover { border-color: rgba(181, 147, 90, 0.45); }

.po-faq-item h3 {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 0.5rem;
}

.po-faq-item p {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.62;
  color: rgba(237, 232, 223, 0.7);
  margin: 0;
}

/* Lake name doubles as the crawlable link to the spot's static page.
   Visually identical to the plain heading it replaced. */
.lake-name-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.lake-name-link:hover {
  color: var(--gold-bright);
  border-bottom-color: rgba(181, 147, 90, 0.5);
}