/*
 Theme Name:   Laurel Child
 Template:     twentyseventeen
 Version:      3.9
 Description:  Red, Blue & Real – unified full-width layout with fixed left sidebar, logo-driven header, and integrated navigation cascade
*/

/* ==========================================================
   1. ROOT VARIABLES & RESET
========================================================== */

:root {
  --brand-blue:   #001366;
  --brand-red:    #d30000;
  --brand-green:  #038000;
  --brand-bg:     #faf9f7;
  --brand-card:   #ffffff;
  --brand-text:   #000000;
  --brand-visited:#6c757d;

  --font-heading:'Montserrat',sans-serif;
  --font-body:'Libre Baskerville',serif;

  --base-font-size:16px;
  --base-line-height:1.6;
  --base-spacing:1.5rem; /* 24 px rhythm unit */
  --max-width:1600px;    /* soft cap for ultrawide monitors */
}

*,
*::before,
*::after { box-sizing:border-box; margin:0; padding:0; }

html { font-size:var(--base-font-size); scroll-behavior:smooth; }

body {
  background:var(--brand-bg);
  color:var(--brand-text);
  font-family:var(--font-body);
  line-height:var(--base-line-height);
}

/* ==========================================================
   2. TYPOGRAPHY
========================================================== */

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  color:var(--brand-blue);
  line-height:1.25;
  margin-bottom:0.6em;
}
h1{font-size:clamp(2.15rem,5vw,3rem);}
h2{font-size:clamp(1.75rem,4vw,2rem);}
h3{font-size:clamp(1.25rem,3vw,1.5rem);}
h4{font-size:1.125rem;}
h5{font-size:1rem;}
h6{font-size:.875rem;letter-spacing:.05em;text-transform:uppercase;}
p{margin-bottom:1.5em;}

a{color:var(--brand-blue);text-decoration:none;}
a:hover,a:focus{color:var(--brand-green);text-decoration:underline;}
a:visited{color:var(--brand-visited);}
a:focus,button:focus,input:focus{
  outline:2px solid var(--brand-green);
  outline-offset:2px;
}

/* ==========================================================
   3. GLOBAL CONTAINERS & LAYOUT NORMALIZATION
========================================================== */

.wrap,
.panel-content .wrap,
.site-header .wrap,
.site-footer {
  width:97%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--base-spacing);
}

/* Two-column master layout */
.layout-two-column {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:var(--base-spacing);
}

/* Main content and sidebar proportions */
#secondary {
  flex:0 0 300px;
  max-width:25%;
  order:-1;
}
#primary {
  flex:1 1 auto;
  min-width:0;
  padding-inline:2rem;
}

/* Remove legacy panel padding */
.panel-content,
.panel-content .wrap {
  padding:0!important;
  margin:0!important;
}

/* ==========================================================
   4. SIDEBAR TYPOGRAPHY
========================================================== */

#secondary,
.widget-area {
  font-size:0.875rem;
  line-height:1.6;
  color:#111;
}
.widget-title,
.widget h2 {
  font-family:var(--font-heading);
  font-size:0.8125rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin-bottom:0.75em;
  color:var(--brand-blue);
}
.widget { margin-bottom:var(--base-spacing); }

/* ==========================================================
   5. CONTENT TYPOGRAPHY
========================================================== */

.entry-content{
  font-size:clamp(1rem,1.3vw + .8rem,1.1rem);
  line-height:1.8;
  font-weight:400;
}
.entry-content p{margin-bottom:1.6em;}
.entry-content h2{margin-top:2.5rem;margin-bottom:1rem;}
.entry-content h3{margin-top:2rem;margin-bottom:.8rem;}
.entry-content blockquote{
  border-left:4px solid var(--brand-green);
  margin:2rem 0;padding-left:1.2rem;
  font-style:italic;color:#333;font-size:1.1em;line-height:1.7;
}
.entry-content img,.entry-content table{max-width:100%;height:auto;}

/* ==========================================================
   6–7. HEADER & NAVIGATION (Integrated)
========================================================== */

/* Disable legacy header-media */
.has-header-image .custom-header,
.has-header-video .custom-header,
.custom-header-media {
  display:none !important;
}

.site-header {
  position:sticky;
  top:0;
  z-index:999;
  background-color:var(--brand-bg);
  border-bottom:1px solid #ddd;
}

/* Flex container: logo/text/nav on one line */
.site-header .wrap {
  display:flex;
  align-items:center; /* vertical centering to logo */
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:2rem;
  padding:0 var(--base-spacing); /* horizontal only */
}

/* Branding cluster */
.site-branding {
  display:flex;
  align-items:center;
  gap:1rem;
}

/* ==========================================================
   6.1 HEADER LOGO ALIGNMENT (Minimal Buffer)
   Collapses inherited 3em vertical padding to a ~3px buffer.
========================================================== */

.site-header,
.site-branding {
  padding-top:3px !important;
  padding-bottom:3px !important;
  margin:0;
  line-height:1;
}

.custom-logo-link,
.custom-logo {
  display:block;
  margin:0 auto;
  vertical-align:middle;
}

/* Logo defines header height */
.site-branding .custom-logo-link img {
  height:auto;
  max-height:none;
  width:auto;
  display:block;
}

/* Title + tagline */
.site-branding-text {
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.1;
}

.site-title {
  margin:0;
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--brand-blue);
}

.site-description {
  margin:0;
  font-size:0.95rem;
  color:#555;
}

/* NAVIGATION BASE */
.main-navigation ul {
  list-style:none;
  margin:0;
  padding:0;
}

.main-navigation > div > ul {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:0; /* divider handles spacing */
}

/* Vertical bar dividers between top-level items (no first bar) */
.main-navigation > div > ul > li + li::before {
  content:"|";
  color:var(--brand-blue);
  opacity:0.5;
  margin:0 1rem;
  font-weight:400;
}

/* Link styles */
.main-navigation a {
  color:var(--brand-blue);
  font-weight:600;
  text-decoration:none;
  font-family:var(--font-heading);
  display:block;
  white-space:nowrap;
  padding:0.5rem 0;
}
.main-navigation a:hover {color:var(--brand-green);}


/* ==========================================================
   8. BUTTONS
========================================================== */

.button,.wp-block-button__link,
button:not(.dropdown-toggle):not(.search-submit):not(.menu-toggle),
input[type="submit"]:not(.search-submit){
  background:var(--brand-red);
  color:var(--brand-bg);
  padding:.6rem 1.1rem;
  border:none;border-radius:4px;
  cursor:pointer;
  font-family:var(--font-heading);
  letter-spacing:.05em;text-transform:uppercase;
  transition:background .3s ease;
}
.button:hover,.wp-block-button__link:hover,
button:hover,input[type="submit"]:hover{
  background:var(--brand-blue);color:var(--brand-bg);
}

/* ==========================================================
   9. FOOTER
========================================================== */

.site-footer{
  border-top:1px solid #ddd;
  padding:1.5rem var(--base-spacing);
  text-align:center;
  font-size:.9rem;color:#444;
  background:var(--brand-bg);
}
.site-footer a{color:var(--brand-blue);}
.site-footer a:hover{color:var(--brand-green);}

/* ==========================================================
   10. RESPONSIVE BEHAVIOR
========================================================== */

@media (max-width:1023px){
  .layout-two-column{flex-wrap:wrap;}
  #secondary{flex:0 0 25%;max-width:25%;order:-1;}
  #primary{flex:0 0 70%;padding-inline:1rem;}
  .site-header .wrap{padding:.6rem 1rem;}
}

@media (max-width:767px){
  .layout-two-column{flex-direction:column;}
  #secondary,#primary{flex:0 0 100%;max-width:100%;order:initial;}
  .wrap{padding:0 1rem;}
  html{font-size:15px;}
  .site-header .wrap{
    flex-direction:column;
    align-items:flex-start;
    gap:0.5rem;
  }
  .main-navigation > div > ul{
    flex-direction:column;
    gap:0.6rem;
  }

  /* Collapse all submenus unless opened */
  .main-navigation ul ul {
    position:static;
    display:none !important;
    box-shadow:none;
    border:none;
    background:none;
    padding-left:1rem;
  }
  .main-navigation li.open > ul {
    display:block !important;
  }
}

/* Override Twenty Seventeen's built-in 2-column page layout */
@media screen and (min-width:48em){
  body.page-two-column .entry-header,
  body.page-two-column .entry-content {
    width:100%!important;
    float:none!important;
    display:block!important;
  }
}

/* ==========================================================
   11. MISCELLANEOUS
========================================================== */

.site-content{padding-top:3rem!important;}
body.admin-bar .site-header{top:32px;}
img,video{max-width:100%;height:auto;border-radius:4px;}