html, body {
    background-color: hsl(220, 10%, 15%);
    overflow-x: hidden;
}

.navbar {
    /* background-color: hsl(220, 15%, 25%); */
    background-color: #E5E3DF;
}

.main-content {
    background-color: hsl(220, 15%, 25%);
    color: #eee;
}

.carousel .ratio {
    background-color: hsl(220, 10%, 15%);
}

/* --- Emotion & Delight: Carousel details --- */
.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.9));
}

/* Larger, round indicators with smooth state change */
.carousel-indicators [data-bs-target]{
  width: 10px; height: 10px; border-radius: 50%;
  transition: transform .15s ease, opacity .15s ease;
  background-color: rgba(255,255,255,.6);
}
.carousel-indicators .active{
  background-color: var(--brand-accent);
  transform: scale(1.1);
}


/* Respect reduced motion (pause carousel) */
@media (prefers-reduced-motion: reduce) {
    .carousel,
    .carousel * {
        transition: none !important;
        animation: none !important;
    }
}

.card {
  background-color: #E5E3DF;
  color: #333;              /* slight contrast boost from #444 */
  border: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.card-body {
    text-align: center;
}

a.custom-card,
a.custom-card:hover {
  color: inherit;
}

/* Hierarchy refinements */
.titlefont2 { line-height: 1.1; }
hr { opacity: .75; border-top: 1px solid rgba(255,255,255,.15); }

:root { --brand-accent: #e7bb8d; }

.text-accent { color: var(--brand-accent) !important; }
/* Accent button: define Bootstrap state variables to prevent background loss */
.btn.btn-accent{
    --bs-btn-font-weight: 600;
    --bs-btn-color: #222;                 /* default text */
    --bs-btn-bg: var(--brand-accent);     /* default bg */
    --bs-btn-border-color: var(--brand-accent);
  
    --bs-btn-hover-color: #222;           /* keep dark text on hover */
    --bs-btn-hover-bg: #dba972;           /* ~15% darker than #e7bb8d */
    --bs-btn-hover-border-color: #dba972;
  
    --bs-btn-active-color: #222;
    --bs-btn-active-bg: #cf9c63;          /* active press */
    --bs-btn-active-border-color: #cf9c63;
  
    --bs-btn-disabled-color: #444;
    --bs-btn-disabled-bg: #e0d8cc;
    --bs-btn-disabled-border-color: #e0d8cc;
  
    border-width: 0;
    transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .btn.btn-accent:hover{ filter: brightness(1.02); transform: translateY(-1px); }
  .btn.btn-accent:active{ transform: translateY(0); filter: none; }
  .btn.btn-accent:focus-visible{ outline: 2px solid var(--brand-accent); outline-offset: 2px; }
  

/* Optional: accent links */
/* Accent links: no underline by default; underline on intent (hover/focus) */
.link-accent{
    color: var(--brand-accent);
    text-decoration: none !important;
  }
  .link-accent:hover,
  .link-accent:focus{
    text-decoration: underline !important;
    text-underline-offset: .12em;
    text-decoration-thickness: .06em;
  }
  
.h1-like { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); }
.subhead { font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); margin-top: .5rem; }
.lead-sm { font-size: 1.05rem; opacity: .9; }

/* --- Mobile/tablet bump (~20%) --- */
@media (max-width: 991.98px){
    .h1-like { font-size: clamp(2.4rem, 1.9rem + 1.4vw, 3.1rem); }
    .subhead { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.6rem); }
    .lead-sm { font-size: 1.25rem; }
  }

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}

.text-justify{
    text-align: justify;
    text-justify: inter-word;   /* most engines ignore, but harmless */
    hyphens: auto;
    overflow-wrap: anywhere;    /* prevents overflow on long tokens */
}

/* --- Desktop gutters: 10% left/right, 80% content --- */
@media (min-width: 992px){
    .main-content{
      width: 90vw;          /* 80% of viewport width = centered column */
      margin-left: auto;
      margin-right: auto;
      border-radius: 2px;   /* optional: soften edges a bit */
      overflow: clip;       /* prevents any child from spilling a scrollbar */
    }
  }
  
  /* Defensive: if any child tries to overflow, keep it inside */
  img, video, canvas, svg { max-width: 100%; height: auto; }