/*
Theme Name: Rethinking the World
Theme URI: https://example.com/rethinking-the-world
Author: Chris Cole
Author URI: https://example.com
Description: A warm retro portfolio & project blog theme with mid-century engineering vibes. Tan base, amber accents, rust dividers, charcoal icons, and image hover overlays. Includes About banner, archive grid, block pattern for Build Notes, and a primary navigation menu.
Version: 1.1.2
License: GNU General Public License v2 or later
Text Domain: rethinking-the-world
*/

/* =========================================================
   BASE
   ========================================================= */
body {
  margin: 0;
  background: #F3E7C0;
  color: #2E2A26;
  font-family: 'Libre Baskerville', serif;
}

/* =========================================================
   HEADER & NAVIGATION
   ========================================================= */
header.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.2rem 5% 1.2rem 16px; /* bring content closer to the left edge */
  background: #E1B65C;
  border-bottom: 2px solid #C4601A;
}
.site-header .custom-logo,
.site-header img.fallback-logo { width: 150px; height: auto; display: block; }

.header-left { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.site-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3rem;
  margin: 0;
  line-height: 1;
}
.rust { color: #C4601A; } .brown { color: #5C3B1E; }
.site-tagline { font-size: 1rem; color: #2E2A26; opacity: .85; font-style: italic; margin: 0; font-weight: bold;}

.header-right { display: flex; align-items: center; }

/* Primary Menu */
.primary-nav{
  display:flex; gap:1.25rem; list-style:none; padding:0; margin:0;
  text-transform:uppercase; letter-spacing:.04em; font-weight:600;
}
.primary-nav a{
  text-decoration:none; font-family:'Libre Baskerville',serif; font-size:.95rem;
  color:#2E2A26; padding:.35rem .6rem; border-radius:8px; transition:background-color .2s,color .2s;
}
.primary-nav a:hover{ background-color:rgba(196,96,26,.15); color:#2E2A26; }

/* Responsive Header */
@media (max-width: 720px){
  header.site-header{ flex-wrap:wrap; justify-content:center; gap:.6rem; }
  .header-right{ width:100%; justify-content:center; }
  .brand .site-title{ font-size:2.2rem; text-align:center; }
  .site-tagline{ text-align:center; }
}

/* =========================================================
   DIVIDERS & TITLES
   ========================================================= */
.divider{ display:flex; align-items:center; justify-content:center; margin:3rem 0 1rem; }
.divider svg{ width:32px; height:32px; stroke:#2E2A26; stroke-width:2; fill:none; margin:0 1rem; }
.divider::before,.divider::after{ content:''; flex:1; border-bottom:2px solid #C4601A; opacity:.6; }
.divider.gear{ font-size:2.4rem; color:#2E2A26; }

.section-title,.archive-title{
  text-align:center; font-family:'Bebas Neue',sans-serif; font-size:1.8rem; color:#2E2A26; margin-bottom:2rem;
}

/* =========================================================
   PROJECTS & CARDS
   ========================================================= */
.projects,.projects-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem; padding:0 5% 3rem;
}
.projects-grid{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

.project-card{
  background:#FFF9F2; border-radius:10px; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease; cursor:pointer; position:relative;
  box-shadow:0 2px 5px rgba(0,0,0,.08);
}
.project-card:hover{ transform:translateY(-5px); box-shadow:0 5px 15px rgba(0,0,0,.15); }

.image-wrapper{ position:relative; overflow:hidden; }
.image-wrapper img{ width:100%; height:180px; object-fit:cover; transition:transform .3s ease; }
.image-wrapper::after{ content:''; position:absolute; inset:0; background-color:rgba(196,96,26,0.0); transition:background-color .3s ease; }
.project-card:hover .image-wrapper img{ transform:scale(1.05); }
.project-card:hover .image-wrapper::after{ background-color:rgba(196,96,26,.2); }

.project-card h2,.project-card h4{ font-family:'Bebas Neue',sans-serif; color:#C4601A; margin:1rem; }
.project-card h2{ font-size:1.5rem; } .project-card h4{ font-size:1.4rem; }
.project-card p{ margin:0 1rem 1rem; color:#2E2A26; }

/* =========================================================
   JOURNAL (legacy section wrapper)
   ========================================================= */
.journal{ background:none; padding:2rem 5%; border-bottom:2px solid #C4601A; }
.journal h3{ font-family:'Bebas Neue',sans-serif; color:#2E2A26; font-size:1.8rem; margin-bottom:1rem; text-align:center; }
.journal article{ background:#FFF9F2; padding:1rem; border-radius:8px; margin-bottom:1.5rem; box-shadow:0 2px 5px rgba(0,0,0,.1); }
.journal h4{ font-family:'Bebas Neue',sans-serif; color:#C4601A; margin-bottom:.5rem; }
.journal p{ margin:0 0 .5rem 0; color:#2E2A26; }
.journal a{ color:#C4601A; text-decoration:none; } .journal a:hover{ text-decoration:underline; }

/* =========================================================
   SINGLE POST LAYOUT
   ========================================================= */
.content{
  max-width:800px; margin:2rem auto; background:#FFF9F2;
  padding:2rem; border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,.1);
}
.back-link{ display:block; font-family:'Bebas Neue',sans-serif; font-size:1.1rem; color:#C4601A; text-decoration:none; margin-bottom:1rem; }
.back-link:hover{ text-decoration:underline; }
.content h2{ font-family:'Bebas Neue',sans-serif; color:#C4601A; font-size:2rem; margin-bottom:1rem; }
.content img{ width:100%; height:auto; border-radius:8px; margin:1rem 0; }
.content p{ line-height:1.7; margin-bottom:1rem; color:#2E2A26; }

.build-specs{ background:#E1B65C; padding:1rem; border-radius:8px; font-family:'Courier Prime',monospace; color:#2E2A26; margin-top:2rem; }
.build-specs h3{ font-family:'Bebas Neue',sans-serif; margin-top:0; color:#2E2A26; }

.more-projects{ background:#FFF9F2; padding:3rem 5%; border-top:2px solid #C4601A; border-bottom:2px solid #C4601A; }
.more-projects h3{ text-align:center; font-family:'Bebas Neue',sans-serif; color:#2E2A26; font-size:1.8rem; margin-bottom:2rem; }

/* =========================================================
   FOOTER
   ========================================================= */
footer.site-footer{
  text-align:center; padding:2rem; background:#E1B65C; color:#2E2A26; font-size:.9rem; border-top:2px solid #C4601A;
}
.site-footer span{ margin:0 1rem; display:inline-block; color:#2E2A26; transition:transform .3s ease, color .3s ease; }
.site-footer span:hover{ transform:scale(1.1); color:#C4601A; }

/* =========================================================
   ABOUT & ARCHIVE HERO SECTIONS
   ========================================================= */
.about-hero{ background:#E1B65C; padding:3rem 5% 2.2rem; text-align:center; border-bottom:2px solid #C4601A; }
.about-hero img{ width:140px; height:auto; margin-bottom:.5rem; }
.about-hero h1{ font-family:'Bebas Neue',sans-serif; color:#2E2A26; font-size:2.4rem; margin:.25rem 0 .4rem; }
.about-hero .thin-divider{ width:120px; height:0; margin:0 auto; border-bottom:2px solid #C4601A; opacity:.8; }
.about-wrap{ max-width:900px; margin:2rem auto 3rem; background:#FFF9F2; padding:2rem; border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,.1); }

.archive-hero{ background:#E1B65C; padding:2rem 5% 1.5rem; text-align:center; border-bottom:2px solid #C4601A; }
.archive-hero h1{ font-family:'Bebas Neue',sans-serif; color:#2E2A26; font-size:2rem; margin:.25rem 0 .4rem; }
.archive-grid{ padding:2rem 5% 3rem; }
.archive-grid .project-card{ background:#FFF; }

/* =========================================================
   PAGE HERO (SLIM) + FULL-BLEED SUPPORT
   ========================================================= */
/* Make alignfull groups bleed edge-to-edge even inside .content */

.content .alignfull{
  
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  max-width:100vw; width:100vw; border-radius:0;
  
}

/* Default amber band */
/*
.page-hero{ background:#E1B65C; border-bottom:2px solid #C4601A; }
*/
.page-hero-inner{ max-width:980px; margin:0 auto; text-align:center; padding:0 5%; }
.page-hero-icon{ margin:0 auto .35rem; opacity:.95; }
.page-hero-title{ text-transform:uppercase; letter-spacing:.03em; font-size:2rem; margin:.1rem 0 .25rem; color:#2E2A26; }
.page-hero-sub{ margin:.1rem 0 .5rem; font-style:italic; opacity:.9; }
.page-hero-sep{ width:140px; margin:.35rem auto .1rem; border-top:2px solid #C4601A !important; opacity:.8; }

/* Transparent variant (add class "page-hero--transparent" on the Group) */
.page-hero.page-hero--transparent{ background:transparent; border-bottom:none; }

/* Hide default page title when hero present */
.has-hero .entry-title, .has-hero .page-title{ display:none; }

/* =========================================================
   COMPACT JOURNAL / GRID CARDS
   ========================================================= */
.journal-compact .wp-block-post-template{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:.9rem;
}

/* card shell */
.journal-compact .journal-card{
  padding:.75rem !important;
  border-radius:12px !important;
  border:1px solid rgba(0,0,0,.08) !important;
  background:#fff;
  transition:transform .15s ease, box-shadow .15s ease;
  overflow:hidden;
}
.journal-compact .journal-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}

/* featured image */
.journal-compact .wp-block-post-featured-image{
  margin-bottom:.6rem !important;
  border-radius:10px !important;
  overflow:hidden;
  width:100%; height:auto;
  aspect-ratio:16/9;
  max-height:140px;
  display:block;
}
.journal-compact .wp-block-post-featured-image a,
.journal-compact .wp-block-post-featured-image figure{
  display:block; width:100%; height:100%;
}
.journal-compact .wp-block-post-featured-image img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block; border-radius:10px;
  transition:transform .25s ease;
}
.journal-compact .journal-card:hover .wp-block-post-featured-image img{ transform:scale(1.03); }

/* title, excerpt, date */
.journal-compact .wp-block-post-title,
.journal-compact .wp-block-post-title a{
  font-size:clamp(1rem, 1.2vw + .7rem, 1.25rem) !important;
  line-height:1.2; margin:.1rem 0 .35rem !important;
  text-decoration:none; color:inherit;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.journal-compact .wp-block-post-excerpt{
  font-size:.9rem !important; line-height:1.35;
  margin:0 0 .4rem !important; color:rgba(0,0,0,.8);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.journal-compact .wp-block-post-excerpt a.wp-block-post-excerpt__more-link{ font-size:.9rem; text-decoration:underline; }
.journal-compact .wp-block-post-date{
  font-size:.78rem !important; letter-spacing:.02em; color:rgba(0,0,0,.55) !important; margin:.15rem 0 0 !important;
}
.journal-compact .wp-block-post{ margin:0 !important; }

@media (min-width:1200px){
  .journal-compact .wp-block-post-template{
    grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  }
}
@media (max-width:600px){
  .journal-compact .wp-block-post-title,
  .journal-compact .wp-block-post-title a{ -webkit-line-clamp:2; }
}

/* When a Slim Hero is present, don't constrain the page content width */
.has-hero .content {
  max-width: 1100px;        /* <-- remove the 800px cap */
  
}

/* Center and size the journal/project grid area under the hero */
.has-hero .journal-compact {
  max-width: 1100px;      /* feel free to use 1000–1200 */
  margin: 0 auto 2rem;
  padding: 0 5%;
}

/* Enforce our responsive grid regardless of WP 'columns-*' classes */
.journal-compact .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 0.9rem !important;
}

@media (max-width: 700px) {
  .journal-compact .wp-block-post-template {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  }
}

.hero-banner {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(80%);
}
.hero-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: rgba(0,0,0,0.4);
  padding: 1rem 0;
}
.hero-title {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
}


/* Base header stays the stacking context */
header.site-header{
  position: relative;
  background: #E1B65C;     /* fallback color under the image */
  overflow: hidden;         /* hide the band edges cleanly */
}

/* Background image sits BEHIND content */
header.site-header::before{
  content: "";
  position: absolute;
  left: 0; right: 0;

  /* Middle-band only: leave a small strip top/bottom; tweak as you like */
  top: 6px;                 /* increase for a thinner band */
  bottom: 6px;

  background:
    /* optional amber tint to keep your palette */
    linear-gradient(rgba(225,182,92,.25), rgba(225,182,92,.25)),
    url('/wp-content/themes/rethinking-the-world-v2/headerbg.png') center/cover no-repeat;

  z-index: 0;               /* <- key: behind */
  pointer-events: none;     /* don’t block clicks */
}

/* Ensure header content is in front */
.header-left,
.header-right{
  position: relative;
  z-index: 1;
}


/* Comments section divider */
.comments-area {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 3px solid #C4601A; /* burnt orange */
}





/* Comment form layout */
.comment-form,
.comments-form { /* include both just in case */
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Labels */
.comment-form label {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #555;
}

/* Inputs & textarea */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #faf7f3;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.comment-form textarea {
  min-height: 140px;
}

/* Focus state */
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: #C4601A;
  box-shadow: 0 0 0 2px rgba(196, 96, 26, 0.15);
  background: #fff;
}


/* Submit button */
.comment-form .form-submit .submit {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #C4601A;  /* burnt orange */
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.comment-form .form-submit .submit:hover {
  background: #9d4b16; /* darker orange */
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

.comment-form .form-submit .submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}


.comment-form .comment-notes,
.comment-form .logged-in-as {
  font-size: 0.8rem;
  color: #777;
}