/*
Theme Name: T&T Trout Cabin (Kadence Child)
Theme URI: https://tandttroutcabin.com
Description: Child theme for Kadence, built for T&T Trout Cabin. River blue / forest green palette.
Author: T&T Trout Cabin
Template: kadence
Version: 1.0.0
*/

/* =========================================================
   1. COLOR PALETTE
   Reference these hex values in Kadence's Customizer > 
   Global Palette so they're selectable everywhere (buttons,
   headings, etc), not just in this stylesheet.
   ========================================================= */
:root {
  --ttc-deep-blue:    #1C3D46;  /* header / footer background, deep water */
  --ttc-river-blue:   #3E7C8C;  /* links, accents, secondary buttons */
  --ttc-sky-blue:     #7FA8B3;  /* light accents, hover states */
  --ttc-forest-green: #35543F;  /* primary buttons, headings */
  --ttc-moss-green:   #6B8E5A;  /* secondary accents, badges */
  --ttc-cream:        #F6F3EA;  /* page background, light sections */
  --ttc-charcoal:     #23292A;  /* body text */
  --ttc-white:        #FFFFFF;
}

body {
  background-color: var(--ttc-cream);
  color: var(--ttc-charcoal);
}

a { color: var(--ttc-river-blue); }
a:hover { color: var(--ttc-forest-green); }

/* =========================================================
   2. TRANSPARENT HEADER (Home page only)
   Enable "Transparent Header" in Kadence Customizer:
   Appearance > Customize > Header > Layout > Transparent Header
   This CSS makes sure it only ever LOOKS transparent on the
   homepage (which WP auto-tags with the "home" body class);
   every other page falls back to a solid header so your nav
   text stays readable over plain backgrounds.
   ========================================================= */

/* Homepage: fully transparent over the hero image */
body.home .site-header,
body.home .site-header .site-header-item-inner {
  background-color: transparent !important;
  box-shadow: none !important;
}

body.home .site-header .main-navigation a,
body.home .site-header .site-title a,
body.home .site-header .social-header-widget a {
  color: var(--ttc-white) !important;
}

/* Once visitor scrolls, Kadence's sticky header kicks in ---
   give it a solid readable background instead of staying transparent */
body.home .site-header.is-sticky .site-header-item-inner {
  background-color: var(--ttc-deep-blue) !important;
}

/* All other pages: solid header from the start */
body:not(.home) .site-header .site-header-item-inner {
  background-color: var(--ttc-deep-blue) !important;
}

body:not(.home) .site-header .main-navigation a,
body:not(.home) .site-header .site-title a,
body:not(.home) .site-header .social-header-widget a {
  color: var(--ttc-white) !important;
}

/* Nav hover state, all pages */
.site-header .main-navigation a:hover,
.site-header .main-navigation .current-menu-item > a {
  color: var(--ttc-sky-blue) !important;
}

/* Social icons in header — circular, subtle hover */
.site-header .social-header-widget a {
  border-radius: 50%;
  transition: transform 0.2s ease, color 0.2s ease;
}
.site-header .social-header-widget a:hover {
  transform: translateY(-2px);
  color: var(--ttc-moss-green) !important;
}

/* =========================================================
   3. HERO SECTION (homepage)
   Apply the "ttc-hero" custom CSS class to your homepage's
   top Row/Group block (via Block > Advanced > Additional CSS Class)
   ========================================================= */
.ttc-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ttc-white);
  background-size: cover;
  background-position: center;
}

.ttc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,61,70,0.35) 0%, rgba(28,61,70,0.75) 100%);
}

.ttc-hero > * {
  position: relative;
  z-index: 2;
}

.ttc-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--ttc-white);
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.ttc-hero p {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  max-width: 640px;
  margin: 0 auto 1.5rem;
}

/* =========================================================
   4. BUTTONS
   ========================================================= */
.wp-block-button__link,
.kt-btn {
  background-color: var(--ttc-forest-green) !important;
  border-radius: 4px;
  border: 2px solid var(--ttc-forest-green) !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: all 0.2s ease;
}
.wp-block-button__link:hover,
.kt-btn:hover {
  background-color: transparent !important;
  color: var(--ttc-forest-green) !important;
}

.is-style-outline .wp-block-button__link {
  color: var(--ttc-white) !important;
  border: 2px solid var(--ttc-white) !important;
  background-color: transparent !important;
}
.is-style-outline .wp-block-button__link:hover {
  background-color: var(--ttc-white) !important;
  color: var(--ttc-deep-blue) !important;
}

/* =========================================================
   5. SECTIONS / HEADINGS
   ========================================================= */
.ttc-section-cream { background-color: var(--ttc-cream); }
.ttc-section-blue  { background-color: var(--ttc-deep-blue); color: var(--ttc-white); }
.ttc-section-green { background-color: var(--ttc-forest-green); color: var(--ttc-white); }

h1, h2, h3, h4 { color: var(--ttc-deep-blue); }
.ttc-section-blue h1, .ttc-section-blue h2, .ttc-section-blue h3,
.ttc-section-green h1, .ttc-section-green h2, .ttc-section-green h3 {
  color: var(--ttc-white);
}

.ttc-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  color: var(--ttc-moss-green);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* =========================================================
   6. GALLERY PAGE
   Apply "ttc-gallery-grid" to the Gallery block's custom CSS class
   ========================================================= */
.ttc-gallery-grid .wp-block-image img,
.ttc-gallery-grid img {
  border-radius: 6px;
  transition: transform 0.35s ease, filter 0.35s ease;
}
.ttc-gallery-grid .wp-block-image:hover img,
.ttc-gallery-grid a:hover img {
  transform: scale(1.03);
  filter: brightness(1.05);
}

/* =========================================================
   7. CARDS (About / policies highlight boxes)
   Apply "ttc-card" to a Group block
   ========================================================= */
.ttc-card {
  background-color: var(--ttc-white);
  border-left: 4px solid var(--ttc-forest-green);
  border-radius: 6px;
  padding: 2rem;
  box-shadow: 0 4px 18px rgba(28,61,70,0.08);
}

/* =========================================================
   8. KADENCE FORM (Contact page)
   Apply "ttc-form-wrap" to the Form block's outer container
   ========================================================= */
.ttc-form-wrap {
  background-color: var(--ttc-white);
  border-radius: 8px;
  padding: 2.5rem;
  box-shadow: 0 4px 24px rgba(28,61,70,0.1);
}

.ttc-form-wrap input[type="text"],
.ttc-form-wrap input[type="email"],
.ttc-form-wrap input[type="tel"],
.ttc-form-wrap textarea,
.ttc-form-wrap select {
  border: 1px solid var(--ttc-sky-blue) !important;
  border-radius: 4px !important;
  background-color: var(--ttc-cream) !important;
}

.ttc-form-wrap input:focus,
.ttc-form-wrap textarea:focus,
.ttc-form-wrap select:focus {
  border-color: var(--ttc-forest-green) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(53,84,63,0.15) !important;
}

.ttc-form-wrap button,
.ttc-form-wrap .kb-forms-submit {
  background-color: var(--ttc-forest-green) !important;
  border-color: var(--ttc-forest-green) !important;
}
.ttc-form-wrap button:hover,
.ttc-form-wrap .kb-forms-submit:hover {
  background-color: var(--ttc-deep-blue) !important;
  border-color: var(--ttc-deep-blue) !important;
}

/* =========================================================
   9. FOOTER
   ========================================================= */
.site-footer, footer.site-footer {
  background-color: var(--ttc-deep-blue);
  color: var(--ttc-cream);
}
.site-footer a { color: var(--ttc-sky-blue); }
.site-footer a:hover { color: var(--ttc-white); }

/* =========================================================
   10. RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
  .ttc-hero { min-height: 80vh; }
  .ttc-form-wrap, .ttc-card { padding: 1.5rem; }
}