/* Tokens */
:root{ --bg:#ffffff; --panel:#ffffff; --card:#ffffff; --ink:#0b1216; --muted:#5b6b76; --border:#e6ecf0; --accent:#116d5d; --accent-2:#22d3ee; --chip:#e8f6f2; --radius:14px; --container:1220px; --gap:20px; }
@media (prefers-color-scheme: dark){ :root{ --bg:#0c1116; --panel:#121821; --card:#0f1520; --ink:#e8f1ef; --muted:#a5b8b3; --border:#1a2230; --accent:#1ed3b0; --accent-2:#22d3ee; --chip:#0e1a16; } }
html[data-theme='dark']{ --bg:#0c1116; --panel:#121821; --card:#0f1520; --ink:#e8f1ef; --muted:#a5b8b3; --border:#1a2230; --accent:#1ed3b0; --accent-2:#22d3ee; --chip:#0e1a16; }
html[data-theme='light']{ --bg:#ffffff; --panel:#ffffff; --card:#ffffff; --ink:#0b1216; --muted:#5b6b76; --border:#e6ecf0; --accent:#116d5d; --accent-2:#008f7a; --chip:#e8f6f2; }

/* Reset & layout */
*,*::before,*::after{ box-sizing:border-box }
html{ height:100%; overflow-x:hidden }
body{ min-height:100dvh; margin:0; overflow-x:hidden; background:var(--bg); color:var(--ink); font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial; display:flex; flex-direction:column; }
img{ max-width:100%; display:block; height:auto }
a{ color:inherit; text-decoration:none }
.container{ max-width:var(--container); width:100%; margin-inline:auto; padding-inline: 20px; }
.layout{ flex:1 0 auto }
:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px }

/* Type */
.h1{ font-size: clamp(1.6rem, 2.4vw, 2.4rem); line-height:1.2; margin:0 }
.h2{ font-size: clamp(1.2rem, 1.6vw, 1.6rem); margin:.2rem 0 0 }
.h3{ font-size: 1.05rem; margin:.15rem 0 0 }
.h4{ font-size: .98rem; margin: .1rem 0 0 }
.lead{ color:var(--muted); margin:.4rem 0 }
.muted{ color:var(--muted) }

/* Header */
.site-header{ background:var(--panel); border-bottom:1px solid var(--border); width:100%; }
.header-grid{ display:grid; grid-template-columns:auto 1fr auto auto; gap:12px; align-items:center; min-height:68px; max-width:100%; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; }
.custom-logo{ display:block; max-height:44px; height:auto; width:auto; border-radius:10px }

/* Fancy site title */
.site-title{ font-weight:900; letter-spacing:.3px; line-height:1; display:inline-block; text-decoration:none; font-size: clamp(1.08rem, 1.6vw, 1.22rem);
  background: linear-gradient(92deg, var(--accent), var(--accent-2) 38%, #26e8b3 75%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)); transition: filter .25s ease, opacity .25s ease; }
.site-title:hover{ filter: drop-shadow(0 6px 18px rgba(34,211,238,.25)); }
html[data-theme='dark'] .site-title{ filter: drop-shadow(0 8px 22px rgba(34,211,238,.35)); }

.primary .menu, .menu.foot{ list-style:none; padding:0; margin:0; display:flex; gap:16px; }
.primary .menu a{ color:var(--muted) }
/* Center desktop menu */
@media (min-width: 721px){ .primary{ display:flex; justify-content:center; } .primary .menu{ width:100%; justify-content:center; } }

.search-wrap{ min-width: 260px }
.search{ position:relative; display:flex; }
.search .input{ flex:1; border:1px solid var(--border); border-radius:10px; padding:10px 38px 10px 12px; background:var(--card); color:var(--ink); }
.search .btn{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:1px solid var(--border); background:var(--card); border-radius:8px; padding:4px 6px; cursor:pointer }
.suggest{ position:absolute; left:0; top:calc(100% + 6px); width:min(560px,100%); background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.12); }
.suggest[hidden]{ display:none }
.anq-s-item{ display:grid; grid-template-columns:40px 1fr; gap:8px; align-items:center; padding:8px 10px; border-bottom:1px solid var(--border) }
.anq-s-item:last-child{ border-bottom:none }

.theme-toggle{ width:36px; height:36px; border-radius:999px; border:1px solid var(--border); background:var(--card); }

/* Categories & Menu row */
.cats-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--border) }
.cats-btn,.menu-btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; border:1px solid var(--border); background:var(--card); color:var(--ink); border-radius:10px; padding:8px 12px; }
.cats-scroll{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; list-style:none; padding:6px 0; margin:0 }
.cats-scroll::-webkit-scrollbar{ display:none }
.cats-scroll a{ display:inline-flex; padding:8px 12px; border-radius:999px; background:var(--chip); color:var(--accent) }

/* Drawers */
.cats-drawer, .menu-drawer{ position: fixed; inset: 120px 0 0 0; background: color-mix(in oklab, var(--panel), black 2%); border-top:1px solid var(--border); }
.cats-drawer[hidden], .menu-drawer[hidden]{ display:none }
.cats-drawer-inner, .menu-drawer-inner{ padding: 16px 0; }
.cats-head, .menu-head{ display:flex; align-items:center; justify-content:space-between; }
.menu.vertical{ list-style:none; padding: 12px 0 0; margin:0; display:flex; flex-direction:column; gap:8px }
.menu.vertical > li > a{ display:block; padding:12px 16px; border-radius:10px; background: var(--card); border:1px solid var(--border); }

/* Mobile header layout */
@media (max-width: 720px){
  .header-grid{ grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; align-items:center; row-gap:10px; }
  .brand{ grid-column:1; grid-row:1; }
  .theme-toggle{ grid-column:2; grid-row:1; justify-self:end; }
  .primary{ display:none; }
  .search-wrap{ grid-column:1 / span 2; grid-row:3; min-width:0; }
  .cats-btn, .menu-btn{ display:inline-flex; }
  .cats-scroll{ display:none; }
}
@media (min-width: 721px){ .cats-btn, .menu-btn{ display:none; } .cats-scroll{ display:flex; } }
html[data-theme='dark'] .cats-btn, html[data-theme='dark'] .menu-btn{ background: var(--accent); color:#041814; border-color: color-mix(in oklab, var(--accent), black 25%); }

/* Media frames */
.media, .thumb{ display:block; aspect-ratio:16/9; overflow:hidden; border-radius:12px; background:#f0f3f5 }
.media img, .thumb img{ width:100%; height:100%; object-fit:cover }

/* Desktop: limit the featured image width and center it */
@media (min-width: 721px) {
  .attachment-anq-hero {
    width: 60%;          /* adjust this % as you like */
    max-width: 800px;    /* optional max width to prevent too big */
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px; /* keep your rounded corners */
  }
}


/* Hero */
.hero{ margin-top: 18px }
.hero-card{ display:grid; grid-template-columns:1.1fr 1fr; gap: 18px; padding: 10px; background: var(--card); border:1px solid var(--border); border-radius: 16px; box-shadow:0 8px 20px rgba(0,0,0,.06); }
.hero-card .chips a{ margin: 0 6px 6px 0; padding:6px 10px; border-radius:999px; background: var(--chip); color: var(--accent); }
@media (max-width: 1080px){ .hero-card{ grid-template-columns:1fr } }

/* Secondary */
.secondary{ margin-top: 20px }
.sec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
@media (max-width: 720px){ .sec-grid{ grid-template-columns:1fr } }

/* Latest list */
.latest{ margin-top: 18px }
.section-title{ font-size:1.2rem; margin:0 0 10px }
.list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:14px }
.list-item{ display:grid; grid-template-columns: 220px 1fr; gap: 12px; align-items:center; background: var(--card); border:1px solid var(--border); border-radius: 14px; padding: 10px; }
@media (max-width:760px){ .list-item{ grid-template-columns:1fr } }
@media (min-width: 1200px){ .latest .list{ grid-template-columns: repeat(4, minmax(0,1fr)); } .list-item{ grid-template-columns: 1fr; align-items:start; } }
.date{ color:var(--muted); font-size:.9rem }

/* Single */
.article-head{ margin-top: 24px; display:grid; gap:12px }
.content{ margin-top: 14px }
.related{ margin-top: 24px }
.related-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px }
@media (max-width: 860px){ .related-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px){ .related-grid{ grid-template-columns: 1fr } }

/* Footer */
.site-footer{ background: var(--panel); border-top:1px solid var(--border); margin-top:auto; width:100%; padding-top:16px; }
.footer-grid{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; padding: 28px 24px 24px; max-width:100%; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr } }
@media (max-width: 620px){ .footer-grid{ grid-template-columns: 1fr 1fr } .foot-brand{ grid-column: 1 / -1; } }
.foot-title{ font-size:.95rem; margin:0 0 10px }
.menu.foot{ flex-direction:column; gap:8px }
.social{ display:flex; gap:10px; margin-top:10px }
.ico{ width:36px; height:36px; display:inline-grid; place-items:center; border-radius:999px; background: var(--card); border:1px solid var(--border); color: var(--accent); }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--border); padding: 16px 20px 28px; max-width:100%; }
@media (max-width:620px){ .foot-bottom{ flex-direction:column; align-items:flex-start } }