/*
Theme Name: Reasoning Tree
Theme URI:  https://example.org/reasoning-tree
Author:     Scott Richey
Author URI: https://biblebulldog.com
Description: Modern with historical touch; sticky right-side menu; forest green and antique gold palette. Uses Merriweather for all typography.
Version:    2.4
License:    GNU General Public License v2 or later
Text Domain: reasoning-tree
Tags: custom-menu, accessibility, responsive, sticky-sidebar
*/

:root{
  --forest-dark: #0f3a2f;
  --forest-mid:  #1f6b52;
  --antique-gold: #c9a24b;
  --muted-gold: #b08f3f;
  --bg: #ffffff;
  --text: #222222;
  --muted-text: #555555;
  --max-content-width: 1200px;
  --sidebar-width: 280px;
  --header-height: 120px; /* visual header height used for sticky offsets */
  --footer-height: 140px;
  --mobile-menu-width: 84vw;
  --mobile-breakpoint: 980px;
  --mobile-toggle-size: 52px;
  --logo-max-height: 250px;
}

/* -------------------- Reset and Base -------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Merriweather", serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Utility container */
.container{max-width:var(--max-content-width); margin:0 auto; padding:0 1rem; width:100%}

/* Headings */
h1,h2,h3{font-family:"Merriweather", serif; color:var(--antique-gold); margin:0 0 .5rem 0; line-height:1.15}
h1{font-size:2.25rem} h2{font-size:1.6rem} h3{font-size:1.25rem}

/* Links */
a{color:var(--forest-mid); text-decoration:underline; text-underline-offset:3px; transition:color 160ms ease, text-decoration 160ms ease}
a:visited{color:var(--muted-gold)}
a:hover,a:focus{color:var(--antique-gold); text-decoration:none; outline:none}
a:active{color:var(--forest-dark)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; padding:.6rem 1rem; border-radius:6px; border:1px solid transparent; cursor:pointer; font-weight:600; text-decoration:none}
.btn-primary{background:var(--antique-gold); color:var(--forest-dark); border-color:var(--muted-gold); box-shadow:0 6px 12px rgba(15,58,47,0.08)}
.btn-primary:hover,.btn-primary:focus{background:var(--muted-gold); color:#fff}

/* -------------------- Header and Branding -------------------- */

/* Header base and gradient (covers full header area) */
/* NOTE: header is intentionally non-sticky (position: relative) per request */
.site-header{
  background: linear-gradient(180deg, var(--forest-dark) 0%, var(--forest-mid) 100%);
  background-repeat:no-repeat;
  background-size:cover;
  color:#fff;
  width:100%;
  box-shadow: 0 6px 18px rgba(15,58,47,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  position:relative;
  z-index:1200;
  padding:1rem 0;
}

/* Header inner layout (desktop default: three columns) */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  max-width:var(--max-content-width);
  margin:0 auto;
  padding:0 1rem;
  min-height: var(--header-height);
}

/* Header regions */
.header-left{flex:0 0 320px; color:rgba(255,255,255,0.95); font-size:0.95rem; line-height:1.25; padding-left:.5rem}
.site-branding{flex:1 1 0; display:flex; align-items:center; justify-content:center}
.header-right{flex:0 0 320px; display:flex; flex-direction:column; align-items:flex-end; gap:0.5rem; padding-right:.5rem}

/* Logo unified size - 250px tall on all devices */
.site-logo img{height:250px; max-height:250px; width:auto; display:block}

/* Tagline */
.site-tagline{color:rgba(255,255,255,0.92); font-size:0.95rem; line-height:1.2; max-width:320px; text-align:right}

/* Ensure header-right CTA remains visible on desktop */
.header-right .btn{white-space:nowrap}

/* -------------------- Layout: Content + Sidebar -------------------- */

/* Main wrapper: content and sidebar */
.site-wrap{
  display:flex;
  gap:2rem;
  max-width:var(--max-content-width);
  margin:0 auto;
  padding:2rem 1rem;
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  align-items:flex-start;
}

/* Content column */
.site-content{flex:1 1 0; min-width:0; margin-right:0}

/* Primary sidebar (desktop: sticky; mobile: hidden or moved) */
.primary-sidebar{
  width:var(--sidebar-width);
  flex:0 0 var(--sidebar-width);
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  border-radius:8px;
  padding:0.6rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

/* Primary navigation (desktop) */
.primary-navigation, .primary-navigation ul{margin:0; padding:0}
.primary-navigation li{list-style:none}
.primary-navigation a{
  display:block;
  padding:.45rem .7rem;
  color:var(--forest-dark);
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  font-size:0.92rem;
  line-height:1.2;
  margin-bottom:6px;
}
.primary-navigation a:hover, .primary-navigation a:focus{
  background:linear-gradient(90deg, rgba(201,162,75,0.08), rgba(31,107,82,0.04));
  color:var(--antique-gold);
  outline:none;
}

/* -------------------- Mobile Menu (overlay + panel) -------------------- */

/* Toggle button (hidden on desktop) */
.menu-toggle{
  display:none;
  position:fixed;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
  z-index:1405;
  width:var(--mobile-toggle-size);
  height:var(--mobile-toggle-size);
  background: linear-gradient(180deg, var(--antique-gold) 0%, var(--muted-gold) 100%);
  color:#1b2f28;
  border-radius:10px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:2px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(15,58,47,0.22);
}
.menu-toggle svg{ width:22px; height:22px; fill:currentColor }

/* Overlay hidden by default; visible when .open */
.mobile-menu-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.36);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity 220ms ease, visibility 220ms ease; z-index:1200;
}
.mobile-menu-overlay.open{opacity:1; visibility:visible; pointer-events:auto}

/* Slide-in panel hidden by default; visible when .open */
.mobile-menu-panel{
  position:fixed; top:0; right:0; height:100vh; width:var(--mobile-menu-width); max-width:420px;
  background: linear-gradient(180deg, var(--antique-gold) 0%, var(--muted-gold) 100%);
  color:var(--forest-dark); transform:translateX(110%); transition:transform 320ms cubic-bezier(.2,.9,.2,1);
  z-index:1300; padding:1rem; box-shadow:-12px 0 40px rgba(15,58,47,0.18); overflow:auto; -webkit-overflow-scrolling:touch;
  border-left:6px solid rgba(201,162,75,0); visibility:hidden; pointer-events:none;
}
.mobile-menu-panel.open{ transform:translateX(0); border-left-color: rgba(201,162,75,0.12); visibility:visible; pointer-events:auto }

/* Mobile nav links */
.mobile-menu-panel .mobile-nav a{ display:block; padding:.6rem .75rem; color:var(--forest-dark); text-decoration:none; font-weight:700; font-size:0.95rem; border-radius:6px; margin-bottom:8px }
.mobile-menu-panel .mobile-nav a:hover, .mobile-menu-panel .mobile-nav a:focus{ color:var(--antique-gold); background:rgba(201,162,75,0.06) }

/* -------------------- Footer -------------------- */
.site-footer{ padding:2rem 0; margin-top:2rem; background: linear-gradient(180deg, var(--forest-mid) 0%, var(--forest-dark) 100%); color:#fff }
.footer-logo img{ max-height:var(--logo-max-height); width:auto; display:block; height:auto }

/* -------------------- Accessibility -------------------- */
a:focus, button:focus{ outline:none; box-shadow:0 0 0 3px rgba(201,162,75,0.18) }

/* -------------------- Desktop-specific behavior: sidebar on the right, header non-sticky, increased left spacing -------------------- */
@media (min-width: 981px) {

  /* Ensure header remains non-sticky at top (position: relative) */
  .site-header{
    position: relative;
    width: 100%;
    height: auto;
    padding: 1rem 0;
    box-shadow: 0 6px 18px rgba(15,58,47,0.08);
    z-index: 1200;
  }

  /* Header-inner stays horizontal on desktop */
  .header-inner{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    min-height: var(--header-height);
    padding:0 1rem;
  }

  /* Main wrapper: place sidebar visually on the right without changing header */
  .site-wrap{
    display:flex;
    flex-direction: row-reverse; /* puts the sidebar on the right visually */
    gap:2rem;
    max-width:var(--max-content-width);
    margin:0 auto;
    /* increased left spacing for desktop only */
    padding:2rem 1rem 2rem 3rem;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    align-items:flex-start;
  }

  /* Content column: no forced right margin (sidebar is visually to the right) */
  .site-content{
    flex:1 1 0;
    min-width:0;
    margin:0;
  }

  /* Primary sidebar remains sticky and sized as before */
  .primary-sidebar{
    width:var(--sidebar-width);
    flex:0 0 var(--sidebar-width);
    position: sticky;
    top: calc(var(--header-height) + 12px);
    align-self:flex-start;
    max-height: calc(100vh - (var(--header-height) + 32px));
    overflow: visible;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    border-radius:8px;
    padding:0.6rem;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  }

  /* If the nav is taller than available space, allow internal scrolling */
  .primary-sidebar .primary-navigation{
    max-height: calc(100vh - (var(--header-height) + 48px));
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Keep header-right CTA visible and not collapsed */
  .header-right{ min-width:260px; flex:0 0 320px }

  /* Hide mobile toggle on desktop to avoid overlap */
  .menu-toggle{ display:none !important; }

  /* Ensure primary navigation items are visible */
  .primary-navigation, .primary-navigation ul, .primary-navigation li, .primary-navigation a{ display:block; visibility:visible; opacity:1 }
}

/* -------------------- Mobile overrides (stack header vertically) -------------------- */
@media (max-width: 980px) {

  /* Header stacking and gradient preservation */
  .site-header{ padding:1rem 0 }
  .header-inner{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:.75rem; padding:0 1rem }
  .header-left, .site-branding, .header-right{ width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; margin:0 auto }
  .site-tagline{ text-align:center; max-width:92% }

  /* Logo sizing on mobile - keep 250px to match desktop */
  .site-logo img{height:250px !important; max-height:250px !important; width:auto !important; display:block !important}

  /* Show mobile toggle */
  .menu-toggle{ display:inline-flex }

  /* Mobile panel and overlay are controlled by .open class (hidden by default) */
  .mobile-menu-panel, .mobile-menu-overlay{ /* no forced display here */ }
  
  /* Sidebar becomes part of flow (not sticky) on mobile */
  .primary-sidebar{ position:static; width:100%; order:2; margin-top:1rem; max-height:none; overflow:visible }
  .site-content{ margin-right:0 }

  /* Reset container to full max width on mobile */
  .container{ max-width:var(--max-content-width) }
}

/* -------------------- Small screens tweaks -------------------- */
@media (max-width: 420px){
  :root{ --mobile-menu-width: 92vw }
  .primary-sidebar{ display:none }
  /* Ensure logo remains 250px on very small screens as well */
  .site-logo img{height:250px !important; max-height:250px !important; width:auto !important; display:block !important}
}