/*
Theme Name: Studio BRN
Theme URI: https://www.overlordbrandon.com
Author: Overlord Brandon
Author URI: https://www.overlordbrandon.com
Description: Studio BRN is a fully custom WordPress theme built exclusively for Overlord Brandon's online presence. Designed as a personal media hub, it supports Twitch streaming integration, in-depth video game reviews, achievement guides, and editorial coverage of TV and film. This theme is proprietary and not intended for redistribution, duplication, or public use.
Version: 1.0.0
License: Proprietary
License URI: Not for public distribution
Text Domain: overlordbrandon
Tags: custom, minimal, responsive
Requires at least: 6.5
Tested up to: 6.5.3
Requires PHP: 7.4
*/

/* ===========================
   CSS VARIABLES
   =========================== */
:root {
  font-size: 10px;
  --standard: #d2a74d;

  /* SPLASH FADE VARS (one source of truth) */
  --splash-fade: 500ms;   /* fade duration for crossfades */
}

/* ===========================
   SELF-HOSTED FONT-FACES
   =========================== */
/* montserrat regular */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('static/fonts/montserrat/montserrat-v30-latin_latin-ext-regular.woff2') format('woff2');
}
/* montserrat bold */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('static/fonts/montserrat/montserrat-v30-latin_latin-ext-700.woff2') format('woff2');
}
/* oswald regular */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('static/fonts/oswald/oswald-v56-latin_latin-ext-regular.woff2') format('woff2');
}
/* oswald semi-bold */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('static/fonts/oswald/oswald-v56-latin_latin-ext-600.woff2') format('woff2');
}

/* ===========================
   GLOBAL RESET & BASE STYLES
   =========================== */
html, body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  box-sizing: border-box;
}
html {
  overflow-x: hidden; /* prevent sideways scroll */
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  font-family: 'Oswald', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* BODY = Oswald */
  font-size: 1.5rem;
  color: #787878;
  background: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,.004);
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}
img { height: auto; max-width: 100%; border: 0; vertical-align: middle; }
a {
  font-weight: inherit;
  text-decoration: none;
  color: #111;
  outline: 0;
  transition: color .4s;
}
li { list-style: none; }
p { margin-bottom: 2.6rem; line-height: 1.6em; }
.wp-block-image { margin: 0 0 2.6rem; }

/* ===========================
   TYPOGRAPHY
   =========================== */
h1, h2, h3, h4, h5, h6 {
  margin-top: 3rem;
  margin-bottom: 3rem;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif; /* HEADINGS = Montserrat */
  font-weight: 700;
  line-height: 1.3;
  color: #111;
  word-wrap: break-word;
}
h1 { font-size: 3.7rem; }
h2 { font-size: 3.1rem; }
h3 { font-size: 2.6rem; }
h4 { font-size: 2.2rem; }
h5 { font-size: 1.8rem; }
h6 { font-size: 1.5rem; }

/* ===========================
   FORMS
   =========================== */
input, select, textarea, button {
  margin: 0;
  padding: 1.2rem 1.8rem;
  width: 100%;
  max-width: 100%;
  font-family: 'Oswald', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* BODY font */
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.4rem;
  box-sizing: border-box;
  border: .1rem #e8e8e8 solid;
  border-radius: .2rem;
  color: #444;
  outline: none;
  background: transparent;
}

/* ===========================
   CUSTOM CHECKBOX
   =========================== */
.commentform input[type='checkbox'] {
  position: relative;
  width: 1rem;
  height: 1rem;
  border: .1rem solid #455A64;
  border-radius: .2rem;
  cursor: pointer;
  margin-top: .3rem;
  margin-right: .6rem;
  padding: .8rem;
  overflow: hidden;
}
.commentform input[type='checkbox']::before {
  content: '';
  position: absolute;
  top: .4rem; right: .4rem; bottom: .4rem; left: .4rem;
  background-color: #fff;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: .2rem;
  transform: scale(0);
  transition: transform 0.15s ease-in-out;
  background-image: url(data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ0OCIgaGVpZ2h0PSI0NDgiIHZpZXdCb3g9IjAgMCA0NDggNDQ4Ij4KPHRpdGxlPjwvdGl0bGU+CjxnIGlkPSJpY29tb29uLWlnbm9yZSI+CjwvZz4KPHBhdGggZD0iTTQxNy43NSAxNDEuNWMwIDYuMjUtMi41IDEyLjUtNyAxN2wtMjE1IDIxNS00LjUgNC41LTEwLjcgNy0xNyA3cy0xMi41LTIuNS0xNy03bC0xMjQuNS0xMjQuNWMtNC41LTQuNS03LTEwLjc1LTctMTdzMi41LTEyLjUgNy0xN2wzNC0zNCA0LjUtNC41IDEwLjctNyAxNy03czEyLjUgMi41IDE3IDdsNzMuNSA3My43NSAxNjQtMTY0LjI1YzQuNS00LjUgMTAuNzUtNyAxNy03czEyLjUgMi41IDE3IDdsMzQgMzRjNC41IDQuNSA3IDEwLjc1IDcgMTd6Ij48L3BhdGg+Cjwvc3ZnPgo=);
}
.commentform input[type='checkbox']:checked::before { transform: scale(1.5); }

/* ===========================
   CORE LAYOUT
   =========================== */
/* Use 100% instead of 100vw on flowing containers to avoid
   rendering underneath the browser scrollbar */
.main-layout {
  display: flex;
  width: 100%;
}
.col { min-height: 100vh; }

/* Left column (fixed sidebar) */
.col-left {
  position: fixed;
  top: 0;
  left: 0;
  width: 40%;
  height: 100vh;
  z-index: 10;
  overflow: hidden;
  display: block; /* neutralize former flex centering */
}

/* Main content column */
.col-center {
  flex: 0 0 40%;
  width: 40%;
  margin-left: 40%; /* push to right of fixed sidebar */
}

/* Right sidebar (sticky for scrolling) */
.col-sidebar {
  flex: 0 0 20%;
  width: 20%;
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Header & Footer */
.site-header { width: 100%; }
footer {
  width: 60vw;
  margin-left: 40vw;
  background: #777;
}

/* ===========================
   SITE HEADER LAYOUT
   =========================== */
.menu-wrap {
  display: flex;
  margin-left: 40%;
  width: 100%;
  height: 100%;
  z-index: 30;
  position: relative;
}
.logo-wrap {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 2.4rem;
}
.nav-menu {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-direction: column;
  background: #fff;
  padding: 1.7rem 0 1.5rem 0;
  box-sizing: border-box;
}
.soc-menu {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 2.4rem; /* ensures nothing sits under scrollbar */
  box-sizing: border-box;
}

/* ===========================
   MAIN NAVIGATION STYLES
   =========================== */
.main_menu {
  /* GAP & ITEM WIDTHS drive the highlight position */
  --gap: 15px;
  --home: 77.75px;
  --reviews: 94.55px;
  --guides: 84.83px;

  /* default to Home position */
  --hl-left: 0px;
  --hl-width: var(--home);

  display: flex;
  align-items: center;
  gap: 1em;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
}
.main_menu li { position: relative; }
.main_menu a {
  font-size: 2rem;
  font-family: 'Oswald', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* MENU = body font */
  font-weight: 400;
  line-height: 2.4rem;
  display: block;
  padding: 1.2rem 1.8rem;
  color: #929292;
  text-decoration: none;
  background: none;
  transition: color 0.3s;
  position: relative;
  text-align: center;
}
.main_menu a:hover,
.main_menu .current-menu-item > a,
.main_menu .current_page_item > a {
  color: var(--standard);
}

/* Moving border menu highlight (cross-browser)
   The highlight element must be the last child inside .main_menu */
.menu-highlight {
  position: absolute;
  top: 0;
  left: 0;                 /* default: Home */
  width: var(--home);
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: none;
  transition:
    left 0.4s cubic-bezier(.68,1.35,.5,1),
    width 0.4s cubic-bezier(.68,1.35,.5,1);
}
.menu-highlight::before,
.menu-highlight::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--standard);
  border-radius: 2px;
  transition:
    left 0.4s cubic-bezier(.68,1.35,.5,1),
    width 0.4s cubic-bezier(.68,1.35,.5,1);
}
.menu-highlight::before { top: 0; }
.menu-highlight::after  { bottom: 0; }

/* Set position by CURRENT PAGE */
.main_menu li:nth-child(1).current-menu-item ~ .menu-highlight {
  left: 0;
  width: var(--home);
}
.main_menu li:nth-child(2).current-menu-item ~ .menu-highlight {
  left: calc(var(--home) + var(--gap));
  width: var(--reviews);
}
.main_menu li:nth-child(3).current-menu-item ~ .menu-highlight {
  left: calc(var(--home) + var(--gap) + var(--reviews) + var(--gap));
  width: var(--guides);
}

/* Move on HOVER (works regardless of which item is current) */
.main_menu li:nth-child(1):hover ~ .menu-highlight {
  left: 0;
  width: var(--home);
}
.main_menu li:nth-child(2):hover ~ .menu-highlight {
  left: calc(var(--home) + var(--gap));
  width: var(--reviews);
}
.main_menu li:nth-child(3):hover ~ .menu-highlight {
  left: calc(var(--home) + var(--gap) + var(--reviews) + var(--gap));
  width: var(--guides);
}

/* ===========================
   SOCIAL MEDIA ICON MENU (Font Awesome)
   =========================== */
.soc-menu .social_menu {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.soc-menu .social_menu li {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Clickable icon area equals the link */
.soc-menu .social_menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: none;
  color: #929292; /* base gray, matches menu text */
  text-decoration: none;
  position: relative;
  overflow: hidden;
  font-size: 0; /* hide label text visually */
}
/* Use :before for the FA glyph — driven by LI's FA class */
.soc-menu .social_menu a::before {
  display: block;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 2.1rem;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
/* Brand glyphs (default gray); change color on hover */
.soc-menu .fa-twitch a::before    { font-family: "Font Awesome 6 Brands"; content: "\f1e8"; color: #929292; transition: color .2s; }
.soc-menu .fa-instagram a::before { font-family: "Font Awesome 6 Brands"; content: "\f16d"; color: #929292; transition: color .2s; }
.soc-menu .fa-x-twitter a::before { font-family: "Font Awesome 6 Brands"; content: "\e61b"; color: #929292; transition: color .2s; }
.soc-menu .fa-youtube a::before   { font-family: "Font Awesome 6 Brands"; content: "\f167"; color: #929292; transition: color .2s; }
.soc-menu .fa-twitch a:hover::before    { color: #9146ff; }
.soc-menu .fa-instagram a:hover::before { color: #e1306c; }
.soc-menu .fa-x-twitter a:hover::before { color: #111; }
.soc-menu .fa-youtube a:hover::before   { color: #ff0000; }
/* Focus ring for accessibility */
.soc-menu .social_menu a:focus {
  outline: 2px solid var(--standard, #d2a74d);
  outline-offset: 2px;
}
/* Prevent any unintended FA-generated markers on <li> */
.soc-menu .social_menu li[class*="fa-"]::before,
.soc-menu .social_menu li[class*="fa-"]::after {
  display: none !important;
  content: none !important;
}

/* ===========================
   SPLASH — Crossfade layers (stacked, no sliding)
   =========================== */
.splash {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  contain: paint; /* isolate painting */
}
/* Neutralize any legacy pseudo-layers */
.splash::before,
.splash::after { content: none !important; background: none !important; }

/* Rail container for two stacked layers */
.splash-rail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fff; /* or 'none' */
  isolation: isolate;
}

/* Two stacked slides fade opacity; JS toggles .is-visible */
.splash-rail .slide-a,
.splash-rail .slide-b {
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--splash-fade) ease;
  will-change: opacity;
}

/* Visible layer */
.splash-rail .slide-a.is-visible,
.splash-rail .slide-b.is-visible {
  opacity: 1;
}

/* Layer order (B above A so new image can fade in over old) */
.splash-rail .slide-a { z-index: 1; }
.splash-rail .slide-b { z-index: 2; }

/* Respect reduced motion: no fade, just swap */
@media (prefers-reduced-motion: reduce) {
  .splash-rail .slide-a,
  .splash-rail .slide-b {
    transition: none !important;
  }
}



































/* ===========================
   Center Column — Post Feed
   =========================== */

/* move the heading itself */
.col-center .feed-heading {
  margin-top: 3.4rem;          
  margin-left: 2rem;           
}

/* keep the posts tight to the heading */
.col-center .feed {
  padding-inline: 1.25rem;
  padding-top: 0;              
}

/* styling for the heading label */
.feed-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #999;
  margin-right: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #eee;
  padding-bottom: .6rem;
}

/* container for rows */
.post-feed {
  display: flex;
  flex-direction: column;
}

/* each preview row */
.post-preview {
  display: flex;
  align-items: center;
  gap: 2.2rem;          
  padding: 4rem 0;      
  border-bottom: 1px solid #f0f0f0;
  transition: color .4s ease;
}

/* remove divider on the very last post */
.post-preview:last-child { border-bottom: none; }

/* thumbnail column */
.post-thumb {
  flex: 0 0 280px;      
  display: flex;        
  align-items: center;
  justify-content: center;
}

/* 16:9 image */
.post-thumb .preview-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: .4rem;
  display: block;
}

/* fallback placeholder */
.preview-image--placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #f2f2f2;
  border-radius: .4rem;
}

/* text column */
.post-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .8rem;
}

/* Title — Montserrat (BOLD, bigger, hardened against global <a> resets) */
.post-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700 !important;   /* keep heading bold */
  font-size: 2rem;
  line-height: 1.3;
  margin: 0;
}
.post-title a {
  color: inherit;
  text-decoration: none !important;
  font-weight: inherit !important; /* inherit 700 from .post-title even if global a=400 */
  transition: color .4s ease;
}

/* Excerpt — Oswald */
.post-excerpt {
  font-family: 'Oswald', sans-serif;
  font-size: 1.3rem;
  line-height: 1.65;
  color: #444;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Meta row */
.post-meta {
  font-size: 1.05rem;
  color: #777;
  display: flex;
  gap: .9rem;
  align-items: center;
  margin-top: .4rem;
}
.post-category {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Read More (matches meta by default) */
.read-more {
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  transition: color .4s ease;
}

/* Hover effect (entire article block) */
.post-preview:hover .post-title a,
.post-preview:hover .read-more {
  color: var(--standard);
}


/* ===========================
   Feed vertical rhythm (all rows)
   =========================== */
.post-feed .post-preview {
  padding: 4rem 0;            /* top + bottom equal */
  margin: 0;                  /* no outer margins */
  border-bottom: 1px solid #eee;
}

/* Internal spacing */
.post-feed .post-preview .post-title { margin: 0 0 .6rem; }
.post-feed .post-preview .post-excerpt { margin: 0; }             /* container */
.post-feed .post-preview .post-excerpt > p { margin: 0 0 .5rem; }  /* tighten gap */
.post-feed .post-preview .post-meta { margin: 0; }

/* ===========================
   Hero row (homepage first post)
   — matches the same rhythm —
   =========================== */
body.home .post-feed .post-preview:first-of-type {
  display: block;             /* stacked hero */
  padding: 4rem 0;            /* same as others */
  margin: 0;                  /* kill leftover margins */
  border-bottom: 1px solid #eee;
}

/* Hero image + spacing */
body.home .post-feed .post-preview:first-of-type .post-thumb { margin-left: 0; }
body.home .post-feed .post-preview:first-of-type .post-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: .6rem;
  margin: 0 0 1rem;           /* space between image and title */
}

/* Safety: no stray margins inside the text block */
body.home .post-feed .post-preview:first-of-type .post-info > *:last-child { margin-bottom: 0; }































/* ===========================
   Sidebar Widget Headings
   =========================== */

/* Make all widget titles match "Latest" feed heading */
.col-sidebar .widget-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #999;
  margin-right: 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid #eee;
  padding-bottom: .6rem;
}


/* ===========================
   SIDEBAR SEARCH BAR (BLOCK)
   =========================== */
.col-sidebar .widget_search {
  /* control spacing + sizing centrally */
  --sb-gap: .35rem;     /* uniform gap inside the bar */
  --sb-btn-pad: .9rem;  /* button square size via padding */
  margin-top: 1.5rem;
  margin-bottom: 3rem;
  background: none;
  box-shadow: none;
  border: none;
}

/* Wrapper: input + button */
.col-sidebar .wp-block-search__inside-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;   /* input fills, button auto */
  align-items: center;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: .4rem;
  padding: var(--sb-gap);  /* even inner spacing */
  gap: var(--sb-gap);      /* space between input and button */
  overflow: hidden;        /* keeps corners aligned */
  transition: border 0.2s, box-shadow 0.2s;
}

/* Input styling */
.wp-block-search__input,
.col-sidebar .wp-block-search__input {
  font-family: 'Oswald', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 1.5rem;
  line-height: 2.4rem;
  padding: .9rem 1.8rem;
}
.col-sidebar .wp-block-search__input {
  grid-column: 1 / 2;
  width: 100%;
  min-width: 0;
  color: #444;
  background: transparent;
  border: none;
  outline: none;
}
.col-sidebar .wp-block-search__input:focus { outline: none; }
.col-sidebar .wp-block-search__inside-wrapper:focus-within {
  border-color: var(--standard);
  box-shadow: 0 0 0 2px rgba(210, 167, 77, 0.07);
}

/* Button: square, evenly inset */
.col-sidebar .wp-block-search__button {
  grid-column: 2 / 3;
  width: auto !important;
  min-width: 0 !important;
  background: none;
  border: none;
  margin: 0;                   /* wrapper handles spacing */
  padding: var(--sb-btn-pad);  /* square sizing */
  color: var(--standard);
  font-size: 1.7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: .3rem;
  transition: background-color .2s, color .2s;
}
/* Icon */
.col-sidebar .wp-block-search__button .search-icon {
  display: block;
  width: 1.9rem;
  height: 1.9rem;
}
/* Hover/focus: invert colors */
.col-sidebar .wp-block-search__button:hover,
.col-sidebar .wp-block-search__button:focus {
  background-color: var(--standard);
  color: #fff;
}

/* ===========================
   Sidebar – Trending Widget
   =========================== */

/* General spacing for widgets in sidebar */
.col-sidebar .widget { 
  margin-bottom: 2.2rem; 
}

/* Trending list container */
.trending-list { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
}

/* Each item in the list */
.trend-item {
  display: grid;
  grid-template-columns: 64px 1fr; /* thumbnail left, meta right */
  gap: .9rem;
  align-items: center;
  padding: .6rem 0;
  border-bottom: 1px solid #eee;
}
.trend-item:last-child { 
  border-bottom: 0; 
}

/* Thumbnail (post featured image) */
.trend-thumb { 
  width: 64px; 
  height: 64px; 
  object-fit: cover; 
  border-radius: .35rem; 
  display: block; 
  background: #f2f2f2; 
}

/* Placeholder box if no thumbnail */
.trend-thumb--placeholder { 
  display: inline-block; 
  width: 64px; 
  height: 64px; 
  border-radius: .35rem; 
  background: #f2f2f2; 
}

/* Title + metadata */
.trend-meta { 
  display: flex; 
  flex-direction: column; 
}
.trend-title { 
  font-weight: 600; 
  line-height: 1.25; 
  text-decoration: none; 
}
.trend-title:hover { 
  text-decoration: underline; 
}
.trend-date { 
  font-size: .85rem; 
  color: #888; 
  margin-top: .15rem; 
}









/* ===== Footer Rail — match center (40%) + sidebar (20%) ===== */
.footer-rail {
  margin-left: 40%;      /* aligns with the left splash */
  width: 60%;            /* right-hand rail */
  flex: 0 0 60%;
  background: #0f0f10;
  color: #c2c2c2;
  border-top: 1px solid #1b1b1c;
  box-sizing: border-box;
}

/* Internal grid: 2fr (center) + 1fr (sidebar) = 66.666% / 33.333% of the rail */
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;                /* mirror page columns; spacing handled by column padding */
  padding: 2.5rem 0;     /* vertical only; horizontal comes from column padding */
  align-items: start;
}

/* Match column paddings from the page */
.footer-center { padding: 0 1.25rem; }  /* same as .col-center feed horizontal padding */
.footer-side   { padding: 0 1rem;    }  /* same as .col-sidebar horizontal padding */

/* Temporary outlines so you can “see” the boxes; remove when ready */
.footer-center,
.footer-side {
  min-height: 4rem;
}

.footer-bottom {
  padding: 1rem 1.25rem;   /* aligns with center column content */
  min-height: 3rem;
}

/* Responsive: stack on mobile */
@media (max-width: 960px) {
  .footer-rail {
    margin-left: 0;
    width: 100%;
    flex-basis: 100%;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    padding: 2rem 1.25rem; /* restore horizontal padding when stacked */
  }
  .footer-center,
  .footer-side {
    padding: 0; /* inner has the padding when stacked */
  }
}











































/* Break points - 1280, 960, 593, 479 */