@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/cinzel.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aref Ruqaa Ink';
  src: url('../fonts/aref.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --gold: #d4af37; /* rich gold - matches your square icon vibe */
}

html { font-size: clamp(16px, 1.6vw, 18px); }

/* -------- GLOBAL -------- */
* { box-sizing: border-box; }

body {
  text-rendering: optimizeLegibility;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.6;
  font-family: 'Aref Ruqaa Ink', serif;
  font-size: 1rem;
  background-color: #1A0F0F;
  background-image: url('../images/general/do.jpg'); /* fallback */
  background-image: image-set(
    url('../images/general/do.webp') type('image/webp') 1x,
    url('../images/general/do.jpg') type('image/jpeg') 1x
  );
  margin: 0;
  padding: 0;
}

h1 {
  font-family: 'Cinzel', serif;
  font-size: 40px;
  margin: 20px 0;
  text-align: center;
  color: #c70000;
}

header { position: relative; }
header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.5px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 18%, #f3d890 50%, var(--gold) 82%, transparent 100%);
  box-shadow: 0 6px 12px rgba(212, 175, 55, 0.25);
}

/* -------- LINKS -------- */
a:not(.button-soft):not(.button-block):not(.block):link,
a:not(.button-soft):not(.button-block):not(.block):visited {
  color: #EEEEEE;
  background-color: transparent;
  text-decoration: none;
}
a:not(.button-soft):not(.button-block):not(.block):hover {
  color: #ff4d4d;
  text-decoration: underline;
}

/* -------- NAVIGATION -------- */
.navi { float: left; width: 20%; padding: 3px; }
.navi ul { list-style: none; padding: 0; margin: 0; }
.naviitem {
  border-radius: 20px;
  background-color: black;
  padding: 2px;
  margin-bottom: 8px;
  border: 1px solid #A00000;
  text-align: center;
}
.naviitem a:not(.button-soft):not(.button-block):not(.block){
  padding: 3px;
  border-radius: 10px;
  color: #FFFE9B;
  display: block;
  font-family: 'Cinzel', serif;
}

/* -------- MAIN CONTENT -------- */
.vital {
  color: #E4572E;
  float: left;
  width: 65%;
  padding: 20px 30px;
  overflow: hidden;
}
.vital h2 { font-family: 'Cinzel', serif; color: #FFE5AA; }

/* -------- FAQ HEADINGS -------- */
.vital h3 {
  font-family: 'Cinzel', serif;
  color: #966b05;
  font-size: 1.2rem;
  margin-top: 1.2em;
  margin-bottom: 0.4em;
}

/* -------- SIDEBAR -------- */
.sec {
  background-color: #1A0F0F;
  color: #D2B48C;
  float: left;
  width: 15%;
  padding: 20px;
  margin-top: 5px;
  border-radius: 20px;
}

/* -------- BUTTONS -------- */
.button-soft,
a.button-soft,
a.button-soft:link,
a.button-soft:visited {
  display: inline-block;
  background-color: #FFE5AA;
  color: #1f1f1f !important;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #E2C985;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.button-soft:hover,
a.button-soft:hover,
a.button-soft:focus { background-color: #ffde7a; color: #1f1f1f !important; text-decoration: none !important; transform: translateY(-2px); }
a.button-soft:active, .button-soft:active { transform: translateY(1px); }

.block,
a.block,
a.block:link,
a.block:visited {
  display: block;
  width: 100%;
  border: none;
  border-radius: 10px;
  background-color: #E4572E;
  color: black !important;
  padding: 14px 28px;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  text-decoration: none !important;
}
.block:hover,
a.block:hover,
a.block:focus { background-color: #ddd; color: black !important; text-decoration: none !important; }

.centered-button { display: flex; justify-content: center; margin: 30px auto; }

/* -------- CAPTIONS -------- */
figcaption h3 { font-size: 18px; font-weight: normal; margin: 0; }


/* Contain floats without inline style */
.page { overflow: auto; }
/* -------- FOOTER -------- */
/* --- Footer social list (moved from inline styles) --- */
footer nav[aria-label="Social media"] .social-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer nav[aria-label="Social media"] .social-item {
  display: inline-block;
  margin: 0 4px;
}

footer {
  clear: both;
  text-align: center;
  padding: 10px;
  background-color: #8B0000;
  font-size: 13px;
}

/* -------- RESPONSIVE LAYOUT -------- */
@media only screen and (max-width: 800px) {
  .navi, .vital, .sec {
    float: none;
    width: 100%;
    padding: 10px;
    text-align: center;
  }
  .vital ul { text-align: left; display: inline-block; margin: 0 auto; }
}

/* Reusable heading-with-icon */
.with-icon { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* Bulletproof heading icon sizing */
.with-icon .icon,
.with-icon img.icon,
.with-icon svg.icon,
.with-icon > img:not(.icon),
.with-icon > svg:not(.icon) {
  height: clamp(72px, 5.5em, 150px) !important;
  width: auto !important;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

/* Focus visibility */
:where(a, button, .button-soft, .button-block, .block):focus-visible { outline: 2px solid #000; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Mobile-only sizing for heading icons */
@media (max-width: 600px) {
  .with-icon .icon,
  .with-icon img.icon,
  .with-icon svg.icon {
    height: clamp(72px, 5em, 150px);
    margin: 0 auto;
    object-fit: contain;
  }
}

/* --- Dual menu visibility --- */
@media (min-width: 801px) { .desktop-menu { display: block; } .mobile-menu { display: none; } }
@media (max-width: 800px) { .desktop-menu { display: none; } .mobile-menu { display: block; } }

/* --- MOBILE DROPDOWN MENU (<details>) --- */
.menu { width: 100%; }
.menu-toggle {
  display: none;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 18px;
  letter-spacing: 1px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid #A00000;
  background-color: black;
  color: #FFFE9B;
  text-align: center;
  user-select: none;
}
.menu-toggle::-webkit-details-marker { display: none; }
.menu-toggle::after { content: " \25BC"; font-size: 14px; }
.menu[open] .menu-toggle::after { content: " \25B2"; }
.menu-list { margin: 10px 0 0 0; padding: 0; list-style: none; }
@media (min-width: 801px) { .menu-toggle { display: none; } .menu-list { display: block; } }
@media (max-width: 800px) {
  .menu-toggle { display: block; }
  .menu:not([open]) .menu-list { display: none; }
  .menu[open] .menu-list { margin-top: 12px; padding-top: 4px; border-top: 1px solid #A00000; }
}

/* Global image safety - inline friendly */
/* Site logo image – replaces inline style on the <img> in header */
.site-logo {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

img { max-width: 100%; height: auto; }   /* keep icons inline */
picture { display: block; }

/* Small inline decorative icon for headings */
.inline-icon {
  display: inline-block;
  vertical-align: middle;
  height: 0.6em;   /* smaller than the text */
  width: auto;
  margin: 0 .25em;
}

/* Tiny fixed divider (snake/dash) used inside body text */
.divider-icon {
  display: inline-block;
  vertical-align: middle;
  height: 16px;    /* fixed tiny size */
  width: auto;
  margin: 0 .25em;
}

/* ==== MOBILE TOUCH TARGETS (≤800px, centered buttons) ==== */
@media (max-width: 800px) {
  .mobile-menu .menu-toggle,
  .mobile-menu .menu-list a {
    display: flex;
    align-items: center;      /* vertical centering */
    justify-content: center;  /* horizontal centering */
    min-height: 48px;
    padding: 14px 20px 12px;  /* optical centering */
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    line-height: 1;
    text-align: center;
  }
  .mobile-menu .menu-list li { margin: 6px 0; }
}

/* High-specificity mobile override: ensure anchors inside .naviitem center correctly */
@media (max-width: 800px) {
  .mobile-menu .menu-list .naviitem > a:not(.button-soft):not(.button-block):not(.block) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    line-height: 1;
    padding: 14px 20px 12px; /* top-heavy tweak for Cinzel */
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* ==== MOBILE: footer icons as 48x48 tap targets ==== */
@media (max-width: 800px) {
  footer nav[aria-label="Social media"] a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;              /* image provides the visual; the anchor provides the area */
    box-sizing: content-box;
    border-radius: 8px;      /* nice focus ring */
  }
  footer nav[aria-label="Social media"] a img {
    display: block;
    width: 44px;
    height: 44px;
  }
}

/* ==== MOBILE: guardrail against accidental horizontal scroll ==== */
@media (max-width: 800px) {
  html, body { overflow-x: hidden; }
}

/* === Footer link accessibility & spacing === */
footer nav[aria-label="Footer navigation"] p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
}
footer nav[aria-label="Footer navigation"] a {
  font-size: 15px;
  padding: 8px 6px;
  display: inline-block;
  line-height: 1.4;
  text-decoration: none;
}
@media (max-width: 800px) {
  footer nav[aria-label="Footer navigation"] a {
    padding: 12px 10px;
    min-height: 44px;
  }
}

/* === Footer legal and links split === */
.footer-legal {
  font-size: 1rem;
  margin-bottom: 12px;
  display: block;
  text-align: center;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
}
.footer-links a {
  font-size: 15px;
  padding: 8px 6px;
  display: inline-block;
  line-height: 1.4;
  text-decoration: none;
}
@media (max-width: 800px) {
  .footer-links a {
    padding: 12px 10px;
    min-height: 44px;
  }
}

@media (max-width: 800px) main a {
    display: inline;
    min-height: 0;
    padding: 0 2px;
    text-decoration: underline;
  }


/* === Desktop-only visual centering without breaking floats ===
   We keep the float layout (navi 20% + vital 65% + sec 15%).
   We shift only the visual position of .vital by (20% - 15%) / 2 = 2.5% to the left.
   Because this uses position:relative; left:..., the float widths/flow remain intact
   and the .sec aside won't drop to a new line.
*/
@media (min-width: 801px) {
  .vital {position: relative;
    left: calc((20% - 15%) * -0.5);
    padding-inline: clamp(32px, 4vw, 96px);}
}

/* === Mobile fix: restore red H1 and remove dark banner === */
@media (max-width: 800px) {
  .site-header h1 {
    background-color: transparent !important;
    color: #c70000 !important; /* same as desktop h1 */
    padding: 0 !important;
    margin: 12px auto 6px !important;
    border-radius: 0 !important;
  }
}

/* === GALLERY GRID FIX ===
   Goal: 2 images per row (desktop), 1 per row (mobile)
   Applies to both .gallery-grid and .image-grid
   Places at end of CSS with !important to override earlier flex rules.
*/
.gallery-grid,
.image-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;   /* mobile default: 1 per row */
  gap: 20px !important;
  margin: 2rem auto !important;
  width: min(100%, 700px) !important;     /* center the block, tame ultra-wide screens */
}

.gallery-grid > figure,
.gallery-grid > img,
.gallery-grid > picture,
.image-grid > figure,
.image-grid > img,
.image-grid > picture {
  margin: 0 !important;
  width: 100% !important;
}

.gallery-grid img,
.image-grid img {
  display: block !important;
  width: 100% !important;   /* make each image fill its cell */
  height: auto !important;
  border-radius: 8px;
}

@media (min-width: 801px) {
  .gallery-grid,
  .image-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* desktop: 2 per row */
  }
}

/* === SINGLE IMAGE FIX ===
   Ensure single images center exactly like multi-image galleries
   without conflicting grid/flex rules.
*/
.image-grid--single {
  display: flex !important;
  justify-content: center !important;
  margin: 2rem auto !important;
  width: 100% !important;
  max-width: 700px !important; /* align with gallery grid max */
}

.image-grid--single figure,
.image-grid--single picture,
.image-grid--single img {
  margin: 0 auto !important;
  display: block !important;
  width: auto !important;
  max-width: 700px !important;
  height: auto !important;
}

/* === SINGLE IMAGE: ROBUST MOBILE-SAFE LAYOUT ===
   Prevent any overflow/cutoff on small screens.
   - Container centers itself and never exceeds 700px.
   - Inner media always scales to 100% of container.
   - If someone leaves 'gallery-grid' on the same node, we still force block layout.
*/
.image-grid--single,
.image-grid--single.gallery-grid {
  display: block !important;
  margin: 2rem auto !important;
  width: min(100%, 700px) !important;
}

.image-grid--single > figure,
.image-grid--single > picture,
.image-grid--single > img {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* === FINAL SINGLE IMAGE FIX (authoritative) ===
   Prevents any cutoff on small screens. Overrides earlier rules.
*/
.image-grid--single {
  display: block !important;
  margin: 2rem auto !important;
  width: min(100%, 700px) !important; /* container never wider than viewport */
}
.image-grid--single figure,
.image-grid--single picture {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
}
.image-grid--single img {
  display: block !important;
  width: 100% !important;      /* always shrink to fit */
  max-width: 100% !important;  /* never exceed container */
  height: auto !important;
}

/* Merged patch rules from patch.center_gap.full.css on Step 9 */


/* Decorative divider above FAQ */
.decor-divider {
  display: block;
  margin: 2rem auto;
  max-width: 71%;
  height: auto;
}


/* === A11Y: high-contrast focus rings on dark areas === */
footer a:focus-visible,
footer button:focus-visible,
footer .button-soft:focus-visible,
footer .block:focus-visible,
footer nav[aria-label="Social media"] a:focus-visible,
.menu-toggle:focus-visible,
.navi .naviitem a:focus-visible {
  outline: 3px solid #FFFFFF !important;      /* white ring for dark reds/browns */
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35);      /* halo to keep ring visible on bright bits */
  border-radius: 8px;
}