/* ==========================================================================
   Bootstrap Ultimate Classic Modern Skin (Child CSS)
   Scope: layout/polish only (NO global typography overrides)
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --bu-base: 17px;
  --bu-line: 1.65;
  --bu-measure: 72ch;
  --bu-radius: 10px;

  --bu-bg: #fbfbf8;
  --bu-text: #1f2937;
  --bu-muted: #4b5563;
  --bu-border: #e5e7eb;

  --bu-accent: #7a5c2e;
  --bu-accent-soft: rgba(122, 92, 46, 0.12);
}

/* Selection */
::selection{ background: var(--bu-accent-soft); }

/* Media safety */
img{ max-width: 100%; height: auto; }

/* ---------- Readability / spacing ---------- */
@media (min-width: 992px){
  .col-md-8 .entry-content,
  .col-md-9 .entry-content,
  .col-lg-8 .entry-content,
  .col-lg-9 .entry-content,
  .entry-content{
    max-width: var(--bu-measure);
  }
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote,
.entry-content pre,
.entry-content table{
  margin: 0 0 1em;
}

.entry-content ul,
.entry-content ol{ padding-left: 1.25em; }

.entry-content li{ margin-bottom: 0.35em; }

.entry-content p{ color: var(--bu-text); }

/* Subtle divider under titles */
.entry-title:after,
.page-title:after{
  content:"";
  display:block;
  width: 80px;
  height: 3px;
  background: var(--bu-accent-soft);
  border-radius: 999px;
  margin-top: 0.6em;
}

/* ---------- Buttons / forms ---------- */
button, .btn{ border-radius: 9px; }

.btn-default{
  background: #fff;
  border: 1px solid var(--bu-border);
}
.btn-default:hover{ border-color: #d1d5db; }

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea,
select{
  border-radius: 9px !important;
  border: 1px solid var(--bu-border) !important;
  padding: 10px 12px !important;
  background: #fff !important;
  color: var(--bu-text) !important;
}

input:focus, textarea:focus, select:focus{
  outline: none !important;
  border-color: rgba(122,92,46,0.45) !important;
  box-shadow: 0 0 0 3px rgba(122,92,46,0.12) !important;
}

/* ---------- Study resource feel: blockquotes / code / tables ---------- */
.entry-content blockquote{
  border-left: 4px solid var(--bu-accent);
  background: rgba(122,92,46,0.06);
  padding: 12px 16px;
  border-radius: 10px;
  color: var(--bu-text);
}

.entry-content code,
.entry-content pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.95em;
}

.entry-content pre{
  background: #0b1220;
  color: #e5e7eb;
  padding: 14px 16px;
  border-radius: 12px;
  overflow: auto;
}

.entry-content table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}
.entry-content th,
.entry-content td{
  border: 1px solid var(--bu-border);
  padding: 10px 12px;
  vertical-align: top;
}
.entry-content th{ background: rgba(0,0,0,0.02); }

/* ---------- Footer ---------- */
footer, .site-footer{
  border-top: 1px solid var(--bu-border);
  margin-top: 30px;
  padding-top: 18px;
}

/* ---------- Accessibility ---------- */
a:focus{
  outline: 2px solid rgba(29,78,216,0.35);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; transition: none !important; }
}

/* ======================================================================
   HOME: intro + post cards
   ====================================================================== */

.bu-home-intro{ 
  margin: 0 0 18px;
}

.bu-home-intro-kicker{
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2em, 4vw, 2.6em);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.75em 0;
}

/* Ensure category header behaves as a full-width block inside Bootstrap columns */
.bu-cat-header{
  width: 100%;
  float: none;
  display: block;
  overflow: hidden; /* contains floated thumbnail safely */
}

.bu-cat-header .bu-cat-clear{
  clear: both;
}

.home article,
.blog article{
  background: #fff;
  border: 1px solid var(--bu-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* ======================================================================
   CATEGORY HEADER (category.php)
   ====================================================================== */

/* Wrapper (anchor) is floated; image fills wrapper */
body.category .bu-term-desc a.thumbnail,
body.category .bu-term-desc .thumbnail,
body.category .bu-term-desc a.bu-term-thumb-link,
body.category .bu-term-desc .thumbnail.bu-term-thumb-link{
  float: left !important;
  width: 180px !important;
  max-width: 180px !important;
  margin: 0 14px 10px 0 !important;

  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  line-height: 0 !important;
  display: block !important;
}

/* Remove theme frame pseudo-elements */
body.category .bu-term-desc a.thumbnail::before,
body.category .bu-term-desc a.thumbnail::after,
body.category .bu-term-desc .thumbnail::before,
body.category .bu-term-desc .thumbnail::after{
  content: none !important;
  display: none !important;
}

body.category .bu-term-desc img.bu-term-thumb{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 12px !important;
  float: none !important;
}

/* Prevent accidental clears inside description */
body.category .bu-term-desc p,
body.category .bu-term-desc div,
body.category .bu-term-desc ul,
body.category .bu-term-desc ol{
  clear: none !important;
}

body.category .bu-term-after-header{ clear: both; height: 0; }

@media (max-width:700px){
  body.category .bu-term-desc a.thumbnail,
  body.category .bu-term-desc .thumbnail,
  body.category .bu-term-desc a.bu-term-thumb-link,
  body.category .bu-term-desc .thumbnail.bu-term-thumb-link{
    float: none !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 0 12px 0 !important;
  }
}

/* ======================================================================
   HOME + CATEGORY header (home.php + category.php shared classes)
   ====================================================================== */

.bu-cat-header a.thumbnail.bu-cat-thumb{
  float: left !important;
  display: block !important;
  width: 260px;
  max-width: 45%;
  margin: 0 18px 12px 0;

  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 0 !important;
}

.bu-cat-header a.thumbnail.bu-cat-thumb::before,
.bu-cat-header a.thumbnail.bu-cat-thumb::after{
  content: none !important;
}

.bu-cat-header a.thumbnail.bu-cat-thumb img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.bu-cat-header .bu-cat-desc{ clear: none !important; }
.bu-cat-header .bu-cat-clear{ clear: both; }

@media (max-width: 700px){
  .bu-cat-header a.thumbnail.bu-cat-thumb{
    float: none !important;
    width: 100%;
    max-width: 100%;
    margin: 0 0 12px 0;
  }
}

/* ======================================================================
   HOME: fixed header offset (prevents slider truncation under nav)
   ====================================================================== */

body.home{ padding-top: 56px; }
@media (max-width: 991px){ body.home{ padding-top: 76px; } }
@media (max-width: 767px){ body.home{ padding-top: 86px; } }

body.home.admin-bar{ padding-top: calc(56px + 32px); }
@media (max-width: 991px){ body.home.admin-bar{ padding-top: calc(76px + 32px); } }
@media (max-width: 767px){ body.home.admin-bar{ padding-top: calc(86px + 32px); } }

/* ======================================================================
   HOME SLIDER: robust mobile fix (targets theme wrappers too)
   ====================================================================== */

/* Give slider captions breathing room (desktop/tablet) */
body.home .carousel-caption{ padding-top: 2rem; }
@media (max-width: 767px){ body.home .carousel-caption{ padding-top: 2.5rem; } }

@media (max-width: 480px){

  body.home .carousel,
  body.home .carousel-inner,
  body.home [id*="carousel"],
  body.home [class*="carousel"],
  body.home [class*="slider"]{
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body.home .carousel-inner .item,
  body.home .carousel-inner .carousel-item,
  body.home [class*="carousel"] .item,
  body.home [class*="carousel"] .carousel-item{
    height: auto !important;
    min-height: 0 !important;
  }

  body.home .carousel-caption,
  body.home [class*="carousel"] .carousel-caption{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: auto !important;
    padding: 1.25rem 1rem 1.5rem !important;
  }

  body.home .carousel img,
  body.home [class*="carousel"] img{
    width: 100% !important;
    height: auto !important;
  }
}

/* ======================================================================
   MOBILE SLIDER EMERGENCY FIX
   ====================================================================== */

@media (max-width: 480px){

  body.home .flexslider,
  body.home .flex-viewport,
  body.home .slides,
  body.home .bx-wrapper,
  body.home .bx-viewport,
  body.home .owl-carousel,
  body.home .owl-stage-outer,
  body.home .slick-slider,
  body.home .slick-list,
  body.home .slick-track,
  body.home [class*="slider"],
  body.home [id*="slider"],
  body.home [class*="carousel"],
  body.home [id*="carousel"]{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.home .flexslider li,
  body.home .bx-wrapper li,
  body.home .owl-carousel .owl-item,
  body.home .slick-slide,
  body.home [class*="slide"]{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.home .flexslider img,
  body.home .bx-wrapper img,
  body.home .owl-carousel img,
  body.home .slick-slider img,
  body.home [class*="slider"] img{
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  body.home .carousel-caption,
  body.home .flex-caption,
  body.home .bx-caption,
  body.home .owl-caption,
  body.home [class*="caption"],
  body.home [class*="slide"] [class*="content"]{
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: auto !important;
    padding: 1rem !important;
  }
}

/* Tiny screens: mobile header/menu is taller, so push content down more */
@media (max-width: 480px){
  body.home{
    padding-top: 140px !important;
  }
  body.home.admin-bar{
    padding-top: calc(140px + 32px) !important;
  }
}



/* =========================================================
   SIDEBAR CARDS (custom widget HTML)
   ========================================================= */

/* The card wrapper you added */
.sidebar-card{
  background: #fff;
  border: 1px solid var(--bu-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* Titles inside the card */
.sidebar-title{
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bu-muted);
  margin: 0 0 10px;
  text-align: center;
  line-height: 1.2;
}

.sidebar-subtitle{
  margin: 10px 0 0;
  color: var(--bu-text);
  font-size: 0.98em;
  line-height: 1.35;
}

/* =========================================================
   Responsive Amazon embed (fills the card width)
   ========================================================= */

.sidebar-embed{
  width: 100%;
}

/* Use aspect-ratio when supported (modern browsers) */
.sidebar-embed iframe{
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  aspect-ratio: 16 / 9;   /* responsive height */
  min-height: 320px;      /* keeps it readable in sidebar */
}

/* Fallback if aspect-ratio isn't honored */
@supports not (aspect-ratio: 16 / 9){
  .sidebar-embed iframe{
    height: 370px;
  }
}

/* =========================================================
   Creeds list layout (no table)
   ========================================================= */

.sidebar-creeds{
  display: grid;
  gap: 12px;
}

.creed-item{
  padding-top: 10px;
  border-top: 1px solid var(--bu-border);
}
.creed-item:first-child{
  padding-top: 0;
  border-top: 0;
}

/* The creed title link */
.creed-name{
  display: block;
  font-size: 1.02em;
  text-align: center;
  margin: 0 0 8px;
  color: var(--bu-text);
  text-decoration: none;
}
.creed-name:hover{
  text-decoration: underline;
}

/* Buttons row */
.creed-actions{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Make Bootstrap xs buttons look a bit more “modern” */
.creed-actions .btn{
  border-radius: 8px;
  padding: 5px 8px;
  line-height: 1.15;
}

/* Slightly reduce icon span spacing if glyphicons are inside */
.creed-actions .btn .glyphicon{
  margin-right: 4px;
}





/* =========================================================
   SIDEBAR: Make default WP widgets match .sidebar-card
   Targets "Recent Posts" + "Categories" + most sidebar widgets
   ========================================================= */

/* Card container for normal widgets */
#secondary .widget,
.sidebar .widget,
.widget-area .widget{
  background: #fff;
  border: 1px solid var(--bu-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  overflow: hidden; /* prevents weird seams */
}

/* Widget titles (Recent Articles / Categories) */
#secondary .widget-title,
.sidebar .widget-title,
.widget-area .widget-title{
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bu-muted);
  margin: 0 0 10px;
  line-height: 1.2;
}

/* Remove the theme’s divider lines under widget titles */
#secondary .widget-title::before,
#secondary .widget-title::after,
.sidebar .widget-title::before,
.sidebar .widget-title::after,
.widget-area .widget-title::before,
.widget-area .widget-title::after{
  content: none !important;
  display: none !important;
}

/* If theme uses <hr> inside widgets */
#secondary .widget hr,
.sidebar .widget hr,
.widget-area .widget hr{
  display: none !important;
}

/* Clean up default list spacing (Recent Posts/Categories are lists) */
#secondary .widget ul,
.sidebar .widget ul,
.widget-area .widget ul{
  margin: 0;
  padding-left: 0;
  list-style: none;
}

#secondary .widget li,
.sidebar .widget li,
.widget-area .widget li{
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--bu-border);
}

#secondary .widget li:first-child,
.sidebar .widget li:first-child,
.widget-area .widget li:first-child{
  border-top: 0;
  padding-top: 0;
}

#secondary .widget li:last-child,
.sidebar .widget li:last-child,
.widget-area .widget li:last-child{
  padding-bottom: 0;
}

/* Link styling inside widget lists */
#secondary .widget li a,
.sidebar .widget li a,
.widget-area .widget li a{
  color: var(--bu-text);
  text-decoration: none;
}

#secondary .widget li a:hover,
.sidebar .widget li a:hover,
.widget-area .widget li a:hover{
  text-decoration: underline;
}



/* =========================================================
   HOME SLIDER: prevent "drop" during transitions
   Put spacing on a stable wrapper, not on moving slide elements
   ========================================================= */

/* 1) Remove padding from animated parts (prevents reflow during slide) */
body.home .carousel-inner,
body.home .carousel-inner .item,
body.home .carousel-inner .carousel-item{
  padding-top: 0 !important;
}

/* 2) Add top spacing to the stable outer carousel container */
body.home .carousel{
  padding-top: 16px !important;
  box-sizing: border-box;
}



/* =========================================================
   MOBILE SLIDER: final polish (caption + indicators spacing)
   ========================================================= */

@media (max-width: 768px){

  /* Ensure the whole slider has room for caption + dots */
  body.home .carousel{
    padding-bottom: 26px !important; /* reserves space for indicators */
  }

  /* Let slides grow and don't clip */
  body.home .carousel,
  body.home .carousel-inner,
  body.home .carousel-inner .item,
  body.home .carousel-inner .carousel-item{
    height: auto !important;
    overflow: visible !important;
  }

  /* Make caption part of normal flow (no absolute positioning) */
  body.home .carousel-caption{
    position: static !important;
    transform: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 12px 14px 10px !important; /* comfortable inside blue panel */
  }

  /* Indicators (dots): stop overlapping the caption/button area */
  body.home .carousel-indicators{
    position: absolute !important;
    bottom: 6px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }
}


/* =========================================================
   MOBILE: Sidebar looks narrower than main content
   Normalize gutters so sidebar = same width as content
   ========================================================= */
@media (max-width: 767px){

  /* Sidebar column/wrapper: remove any centering/max-width tricks */
  #secondary,
  .sidebar,
  .widget-area,
  .site-sidebar,
  .col-md-4,
  .col-sm-4{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* If the sidebar has extra padding compared to the main column, normalize it */
  #secondary,
  .sidebar,
  .widget-area{
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Make the cards/widgets span the full available width (no “inset” look) */
  #secondary .widget,
  .sidebar .widget,
  .widget-area .widget,
  .sidebar-card{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* === Mobile navbar fix (Bootstrap-safe) === */
@media (max-width: 991px){

  /* Ensure hamburger toggle is visible */
  .navbar-toggle,
  .navbar-toggler{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Collapsed menu hidden by default */
  .navbar-collapse{
    display: none;
  }

  /* Bootstrap 3 open state */
  .navbar-collapse.in{
    display: block !important;
  }

  /* Bootstrap 4/5 open state */
  .navbar-collapse.show{
    display: block !important;
  }
}