/* ===============================
   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);

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

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

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

/* -------------------------------
   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{ padding:0; margin:0; line-height:1; }

.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:none;
}

.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;
}

@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:140px; }
  .nav-slot-left{ justify-content:flex-start; }
  .nav-slot-right{ justify-content:center; }
}

/* Logo sizing */
.navbar-logo{
  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; }
}
@media (min-width:1600px){
  .navbar{ padding-top:1rem; padding-bottom:1rem; }
  .navbar-logo{ height:125px; }
  .navbar-title{ font-size:3.25rem; }
}
@media (min-width:2000px){
  .navbar-logo{ height:155px; }
  .navbar-title{ font-size:4.25rem; }
}

/* Hamburger sizing */
.navbar-toggler{
  padding:.25rem .5rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.navbar-toggler-icon{ width:1.5rem; height:1.5rem; }

@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; }

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

  .navbar-logo{ height:95px; }
}

@media (max-width: 575.98px){
  .navbar-logo{ height:72px; }
  .navbar-title{ font-size:1.25rem; }
}

/* -------------------------------
   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;
  transition:all .15s ease;
}
.offcanvas .nav-link:hover{
  font-weight:700;
  letter-spacing:.5px;
}
.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);
}

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

/* 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;
}