/* ===============================
   Cornerstone Bindery — site.css
   Soft gray editorial + subtle gold accents
   =============================== */

/* -------------------------------
   Design tokens
--------------------------------- */
:root{
  --cb-bg:#f1f1f0;
  --cb-surface:#fafafa;
  --cb-section:#e2e2e2;
  --cb-text:#202020;
  --cb-muted:#6f6f6f;
  --cb-accent:#9c8752;
  --cb-border:rgba(0,0,0,.08);
}

/* -------------------------------
   Page layout + base
--------------------------------- */
html, body{ height:100%; }

body{
  background:var(--cb-bg);
  color:var(--cb-text);
  overflow-x:hidden;

  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main{ flex:1 0 auto; }
footer{
  flex-shrink:0;
  background:var(--cb-surface);
}

/* Footer */
.cb-footer{
  padding:1.35rem 0;
}
.cb-footer-inner{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) auto auto;
  align-items:center;
  gap:1.25rem 2rem;
}
.cb-footer-brand{
  display:grid;
  gap:.35rem;
}
.cb-footer-scripture{
  max-width:44rem;
}
.cb-footer-contact{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.2rem .65rem;
}
.cb-footer-contact a + a::before{
  content:"";
  display:inline-block;
  height:.85em;
  margin-right:.65rem;
  border-left:1px solid var(--cb-border);
  vertical-align:-.1em;
}
.cb-footer-socials{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:.5rem;
}
.cb-social-button{
  display:inline-flex;
  align-items:center;
  gap:.48rem;
  min-height:2.3rem;
  padding:.4rem .7rem;
  border:1px solid rgba(156,135,82,.7);
  border-radius:999px;
  color:var(--cb-text);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.055em;
  line-height:1;
  text-decoration:none;
  text-transform:uppercase;
}
.cb-social-button[href]:hover,
.cb-social-button[href]:focus-visible{
  border-color:var(--cb-accent);
  color:var(--cb-accent);
}
.cb-social-button svg{
  width:.92rem;
  height:.92rem;
  fill:currentColor;
}
.cb-social-button.is-unlinked{
  cursor:default;
  opacity:.62;
}
@media (max-width:991.98px){
  .cb-footer-inner{
    grid-template-columns:1fr auto;
  }
  .cb-footer-socials{
    grid-column:1 / -1;
    justify-content:flex-start;
  }
}
@media (max-width:575.98px){
  .cb-footer-inner{
    grid-template-columns:1fr;
    gap:1rem;
  }
  .cb-footer-contact,
  .cb-footer-socials{
    justify-content:flex-start;
  }
}

/* Typography */
h1,h2,h3,.navbar-title,.offcanvas-title{
  font-family:"Cinzel",serif;
  letter-spacing:.5px;
}

/* Inner-page photo header */
.cb-inner-hero{
  margin-bottom:clamp(2rem, 4vw, 3rem);
  color:#fff;
  background-color:#211914;
  background-position:center 43%;
  background-size:cover;
  background-repeat:no-repeat;
  border-bottom:1px solid rgba(156,135,82,.5);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.12);
}

.cb-inner-hero--options{
  background-image:
    linear-gradient(to top, rgba(174,139,50,.34), rgba(174,139,50,.12) 28%, transparent 58%),
    linear-gradient(90deg, rgba(18,14,12,.66), rgba(18,14,12,.38) 50%, rgba(18,14,12,.6)),
    url("../gallery/page-banners/leather-options-cognac-bible.jpg");
  background-position:center 43%;
}

.cb-inner-hero--glossary{
  background-image:
    linear-gradient(to top, rgba(174,139,50,.34), rgba(174,139,50,.12) 28%, transparent 58%),
    linear-gradient(90deg, rgba(18,14,12,.66), rgba(18,14,12,.38) 50%, rgba(18,14,12,.6)),
    url("../gallery/page-banners/rebind-glossary-open-bible.jpg");
  background-position:center 48%;
}

.cb-inner-hero--contact{
  background-image:
    linear-gradient(to top, rgba(174,139,50,.34), rgba(174,139,50,.12) 28%, transparent 58%),
    linear-gradient(90deg, rgba(18,14,12,.66), rgba(18,14,12,.38) 50%, rgba(18,14,12,.6)),
    url("../gallery/page-banners/contact-brown-bible.jpg");
}

.cb-inner-hero__layout{
  min-height:clamp(18rem, 28vw, 23rem);
  display:grid;
  grid-template-columns:minmax(8rem,1fr) auto minmax(8rem,1fr);
  align-items:center;
  gap:1.5rem;
  padding-top:2rem;
  padding-bottom:2rem;
}

/* Gold branch divider used between inner-page sections */
.cb-ornament-section{
  --cb-divider-line-width:100%;
  position:relative;
  padding-top:2.25rem;
  background-image:linear-gradient(var(--cb-accent), var(--cb-accent));
  background-position:top center;
  background-repeat:no-repeat;
  background-size:var(--cb-divider-line-width) 2px;
}

.cb-ornament-section::before,
.cb-ornament-section::after{
  content:"";
  position:absolute;
  top:-1px;
  width:clamp(2.25rem, 5vw, 3.75rem);
  aspect-ratio:250 / 500;
  background:url("sideLeaf2.png?v=20260724-1") center / contain no-repeat;
  pointer-events:none;
}

.cb-ornament-section::before{
  left:0;
  transform:translate(-105%, -50%) rotate(90deg) scaleY(-1);
}

.cb-ornament-section::after{
  right:0;
  transform:translate(105%, -50%) rotate(-90deg) scaleX(-1) scaleY(-1);
}

@media (max-width:991.98px){
  .cb-ornament-section{
    --cb-divider-line-width:calc(100% - 4rem);
  }

  .cb-ornament-section::before,
  .cb-ornament-section::after{
    width:clamp(1.8rem, 7vw, 2.6rem);
  }

  .cb-ornament-section::before{
    transform:translate(-35%, -50%) rotate(90deg) scaleY(-1);
  }

  .cb-ornament-section::after{
    transform:translate(35%, -50%) rotate(-90deg) scaleX(-1) scaleY(-1);
  }
}

@media (max-width:575.98px){
  .cb-ornament-section{
    --cb-divider-line-width:calc(100% - 6rem);
    padding-top:2rem;
  }

  .cb-ornament-section::before,
  .cb-ornament-section::after{
    width:1.55rem;
  }

  .cb-ornament-section::before{
    transform:translate(8%, -50%) rotate(90deg) scaleY(-1);
  }

  .cb-ornament-section::after{
    transform:translate(-8%, -50%) rotate(-90deg) scaleX(-1) scaleY(-1);
  }
}

.cb-inner-hero .cb-inner-hero__brand{
  justify-self:start;
  width:clamp(6.075rem, 14.85vw, 12.75rem);
  height:clamp(6.075rem, 14.85vw, 12.75rem);
  background:url("../gallery/branding/logo-white.png?v=20260901-2") center / contain no-repeat;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.48));
  transform:translateY(-.5rem);
}

.cb-inner-hero__brand .navbar-logo{
  width:100%;
  height:100%;
  opacity:0;
}

.cb-inner-hero__center{
  min-width:0;
  text-align:center;
}

.cb-inner-hero h1{
  position:relative;
  margin:0;
  padding-bottom:.65rem;
  color:inherit;
  font-size:clamp(2.35rem, 4.6vw, 4.5rem);
  font-weight:600;
  line-height:1;
  text-shadow:0 3px 22px rgba(0,0,0,.62);
}

.cb-inner-hero h1::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  width:min(12rem,72%);
  height:1px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.72);
}

.cb-inner-hero__nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.8rem 1.45rem;
  margin-top:1rem;
  flex-wrap:wrap;
}

.cb-inner-hero__nav a{
  color:#fff;
  text-decoration:none;
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.72);
  transition:color 160ms ease;
}

.cb-inner-hero__nav a:hover,
.cb-inner-hero__nav a:focus-visible,
.cb-inner-hero__nav a.active{
  color:#e1c56f;
}

@media (max-width:767.98px){
  .cb-inner-hero__layout{
    min-height:22rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.65rem;
    padding-top:1.5rem;
    padding-bottom:2rem;
  }

  .cb-inner-hero .cb-inner-hero__brand{
    position:static;
    flex:0 0 auto;
    margin:0 auto .25rem;
  }

  .cb-inner-hero__center{
    width:100%;
  }

  .cb-inner-hero h1{
    font-size:clamp(1.85rem, 9vw, 2.8rem);
  }

  .cb-inner-hero__nav{
    gap:.7rem 1rem;
    margin-top:.85rem;
  }

  .cb-inner-hero__nav a{
    font-size:.72rem;
    letter-spacing:.1em;
  }

  .cb-inner-hero__balance{
    display:none;
  }
}

/* -------------------------------
   Bootstrap utility overrides
   (keeps markup unchanged)
--------------------------------- */
.navbar{
  background:var(--cb-surface)!important;
  border-bottom:1px solid var(--cb-border);
}
.bg-body-tertiary{ background:var(--cb-section)!important; }
.bg-white{ background:var(--cb-surface)!important; }
.text-secondary{ color:var(--cb-muted)!important; }
.border{ border-color:var(--cb-border)!important; }

/* Buttons */
.btn-dark{
  background-color:var(--cb-text);
  border-color:var(--cb-text);
}
.btn-outline-dark{
  border-color:var(--cb-accent);
  color:var(--cb-accent);
}
.btn-outline-dark:hover{
  background-color:var(--cb-accent);
  color:#fff;
}

/* Optional accent outline button (unused on current pages but kept) */
.btn-outline-accent{
  border-color:var(--cb-accent);
  color:var(--cb-accent);
}
.btn-outline-accent:hover{
  background:var(--cb-accent);
  color:#fff;
}

/* Wider containers on ultra-wide screens */
@media (min-width:1600px){
  .container,.container-lg,.container-xl,.container-xxl{ max-width:1560px; }
}
@media (min-width:2000px){
  .container,.container-lg,.container-xl,.container-xxl{ max-width:1760px; }
}

/* -------------------------------
   Navbar (3-slot layout)
--------------------------------- */
.navbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.navbar-brand{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:0;
  margin:0;
  line-height:1;
  overflow:visible;
}
.navbar-brand::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(115deg,
      transparent 0 28%,
      rgba(156,135,82,.2) 38%,
      rgba(212,179,77,.95) 45%,
      rgba(255,244,184,1) 50%,
      rgba(212,179,77,.95) 55%,
      rgba(156,135,82,.2) 62%,
      transparent 72% 100%);
  background-repeat:no-repeat;
  background-size:260% 100%;
  background-position:150% 0;
  -webkit-mask:url("../gallery/branding/logo-white.png?v=20260901-2") center / contain no-repeat;
  mask:url("../gallery/branding/logo-white.png?v=20260901-2") center / contain no-repeat;
  animation:cb-logo-shimmer 9s ease-in-out infinite;
}

@keyframes cb-logo-shimmer{
  0%, 50%{
    opacity:0;
    background-position:150% 0;
  }
  54%{
    opacity:1;
  }
  80%{
    opacity:1;
    background-position:-140% 0;
  }
  86%, 100%{
    opacity:0;
    background-position:-140% 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .navbar-brand::after{
    animation:none;
  }
}

.nav-slot-left,.nav-slot-right{
  flex:0 0 auto;
  width:auto;
  display:flex;
  align-items:center;
}

.navbar{ position:relative; }
.nav-slot-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  pointer-events:auto;
}

.navbar-title{
  position:relative;
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  font-weight:600;
  font-size:1.25rem;
  text-align:center;
  padding-bottom:8px;
}
.navbar-title::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:75%;
  height:1px;
  background-color:#000;
  opacity:.7;
}

.site-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  margin-top:.9rem;
  flex-wrap:wrap;
}

.site-nav-link{
  color:var(--cb-text);
  text-decoration:none;
  font-size:.92rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:color .16s ease;
}

.site-nav-link:hover,
.site-nav-link:focus-visible,
.site-nav-link.active{
  color:var(--cb-accent);
}

.site-nav-link.active{
  font-weight:600;
}

@media (max-width:900px){
  .navbar-title{ flex-direction:column; line-height:1.1; gap:0; }
  .brand-line-1,.brand-line-2{ display:block; }
}

@media (min-width:992px){
  .nav-slot-left,.nav-slot-right{ width:170px; }
  .nav-slot-left{ justify-content:flex-start; }
  .nav-slot-right{ justify-content:center; }
}

/* Logo sizing */
.navbar-logo{
  position:relative;
  z-index:1;
  height:75px;
  width:auto;
  display:block;
  transition:transform 180ms ease;
}
.navbar-brand:hover .navbar-logo{ transform:scale(1.06); }

@media (min-width:992px){
  .navbar-logo{ height:125px; }
  .navbar-title{ font-size:2.25rem; }
  .site-nav-link{ font-size:1rem; }
}
@media (min-width:1600px){
  .navbar{ padding-top:1rem; padding-bottom:1rem; }
  .navbar-logo{ height:125px; }
  .navbar-title{ font-size:3.25rem; }
  .site-nav{ margin-top:1.15rem; gap:1.6rem; }
  .site-nav-link{ font-size:1.08rem; }
}
@media (min-width:2000px){
  .nav-slot-left,.nav-slot-right{ width:190px; }
  .navbar-logo{ height:155px; }
  .navbar-title{ font-size:4.25rem; }
  .site-nav-link{ font-size:1.18rem; }
}

/* Hamburger sizing */
.navbar-toggler{
  padding:.25rem .5rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-color:rgba(0,0,0,.18);
  color:var(--cb-text);
  background:rgba(255,255,255,.28);
  box-shadow:none;
  transition:background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.navbar-toggler:hover{
  border-color:rgba(156,135,82,.75);
  background:rgba(156,135,82,.12);
}
.navbar-toggler:focus,
.navbar-toggler:focus-visible{
  box-shadow:0 0 0 .2rem rgba(156,135,82,.22);
}
.navbar-toggler:focus:not(:focus-visible){
  box-shadow:none;
}
.navbar-toggler-icon{
  position:relative;
  width:1.5rem;
  height:1.5rem;
  background-image:none;
  color:currentColor;
}
.navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
  display:block;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
  content:"";
  position:absolute;
  left:15%;
  width:70%;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transition:transform 160ms ease, top 160ms ease, opacity 160ms ease;
}
.navbar-toggler-icon::before{
  top:31%;
  box-shadow:0 .31rem 0 currentColor;
}
.navbar-toggler-icon::after{
  top:68%;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before{
  top:50%;
  transform:rotate(45deg);
  box-shadow:none;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{
  top:50%;
  transform:rotate(-45deg);
}

@media (min-width:992px){
  .navbar-toggler{ padding:.45rem .7rem; }
  .navbar-toggler-icon{ width:1.85rem; height:1.85rem; }
}
@media (min-width:1200px){
  .navbar-toggler{ padding:.55rem .8rem; }
  .navbar-toggler-icon{ width:2rem; height:2rem; }
}
@media (min-width:1600px){
  .navbar-toggler{ padding:.6rem .9rem; }
  .navbar-toggler-icon{ width:2rem; height:2rem; }
}
@media (min-width:2000px){
  .navbar-toggler{ padding:.75rem 1rem; }
  .navbar-toggler-icon{ width:2.4rem; height:2.4rem; }
}

/* NAVBAR: reflow cleanly under 1200px */
@media (max-width: 1199.98px){
  .navbar .container{
    display:grid;
    grid-template-columns: auto 1fr auto;
    align-items:center;
    gap:12px;
  }

  .nav-slot-center{
    position:static;
    transform:none;
    pointer-events:auto;
    justify-self:center;
    text-align:center;
    min-width:0;
  }

  .nav-slot-left{ justify-self:start; }
  .nav-slot-right{ justify-self:end; }
  .nav-slot-left,
  .nav-slot-right{
    width:95px;
  }

  .navbar-title{
    font-size:1.6rem;
    padding-bottom:6px;
    white-space:normal;
    max-width:100%;
  }

  .navbar-logo{ height:95px; }
  .site-nav{
    gap:.85rem 1rem;
    margin-top:.7rem;
  }
  .site-nav-link{
    font-size:.8rem;
    letter-spacing:.12em;
  }
}

@media (max-width: 575.98px){
  .nav-slot-left,
  .nav-slot-right{
    width:72px;
  }
  .navbar-logo{ height:72px; }
  .navbar-title{ font-size:1.25rem; }
  .site-nav{
    gap:.55rem .9rem;
  }
  .site-nav-link{
    font-size:.74rem;
  }
}

/* -------------------------------
   Offcanvas
--------------------------------- */
.offcanvas{ --bs-offcanvas-width:280px; }

.offcanvas-header-custom{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:1.5rem;
  padding-bottom:1rem;
}
.offcanvas-close{ position:absolute; right:1rem; }

.offcanvas-title-lg{
  width:100%;
  margin:0;
  text-align:center;
  font-weight:700;
  letter-spacing:1px;
  font-size:1.25rem;
  position:relative;
  display:inline-block;
  padding-bottom:.75rem;
}
.offcanvas-title-lg::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:70%;
  height:2px;
  background-color:currentColor;
  opacity:.6;
}

.offcanvas .nav-link{
  font-size:1.05rem;
  padding-top:.65rem;
  padding-bottom:.65rem;
  font-weight:400;
  border-left:2px solid transparent;
  transition:color .15s ease, background-color .15s ease, border-color .15s ease;
}
.offcanvas .nav-link:hover{
  border-left-color:var(--cb-accent);
  background:rgba(156,135,82,.1);
  color:var(--cb-text);
}
.offcanvas .nav-link.active{
  color:var(--cb-accent)!important;
  font-weight:700;
}

@media (min-width:992px){
  .offcanvas-title-lg{ font-size:1.4rem; }
  .offcanvas .nav-link{ font-size:1.1rem; }
}
@media (min-width:1600px){
  .offcanvas-title-lg{ font-size:1.6rem; }
  .offcanvas .nav-link{ font-size:1.2rem; }
}
@media (min-width:2000px){
  .offcanvas-title-lg{ font-size:1.75rem; }
  .offcanvas .nav-link{ font-size:1.28rem; }
}

/* -------------------------------
   Common UI bits (callouts, emphasis)
--------------------------------- */
.cb-emphasis{
  border-left:2px solid var(--cb-accent);
  padding-left:.9rem;
}

.cb-callout{
  border:1px solid rgba(156,135,82,.35);
  background:rgba(156,135,82,.06);
  border-radius:12px;
  padding:.75rem .9rem;
}

/* Site-wide development notice */
.cb-notice{
  border:1px solid rgba(156,135,82,.35);
  background:rgba(156,135,82,.06);
  border-radius:14px;
  padding:.85rem 1rem;
  color:var(--cb-text);
  box-shadow:0 8px 18px rgba(0,0,0,.04);
}
.cb-notice strong{ font-weight:600; }
.cb-notice::before{
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--cb-accent);
  margin-right:.6rem;
  transform:translateY(-1px);
}
.cb-notice--center{
  text-align:center;
}
.cb-notice--center::before{
  display:none;
}

/* Index hero full-page vertical center */
.hero-center{
  min-height: 100%;
  display:flex;
  align-items:flex-start;
}

/* Add space after the notice before the hero */
#siteNoticeMount{
  margin-bottom: 1.25rem;
}
@media (min-width:992px){
  #siteNoticeMount{ margin-bottom: 2rem; }
}

/* -------------------------------
   Subtle gold accents
--------------------------------- */
.form-control:focus,
.form-select:focus{
  border-color:var(--cb-accent);
  box-shadow:0 0 0 .2rem rgba(156,135,82,.22);
}

a{ text-underline-offset:3px; }
a:hover{ text-decoration-color:var(--cb-accent); }

.cb-heading{
  position:relative;
  padding-bottom:.6rem;
}
.cb-heading::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:64px;
  height:2px;
  background:var(--cb-accent);
  opacity:.85;
  border-radius:2px;
}