/* Master Theme (auto + manual dark mode) */
:root{--font-display:'Montserrat',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--font-body:'Open Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
:root{--teal-900:#0e2f33;--teal-700:#0f4c5c;--cyan-400:#22d3ee;--lime-400:#a3e635;--ink:#0f172a;--ink-light:#334155;--bg:#fff;--bg-alt:#f9fafb;--surface:#eef3f4;--border:#e2e8f0;--shadow:rgba(0,0,0,.06)}
:root[data-theme='dark']{--bg:#0a1b1d;--bg-alt:#0e2f33;--ink:#e6f0f2;--ink-light:#a8b1bb;--surface:#0f2326;--border:#1f3c41;--shadow:rgba(0,0,0,.5)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.6;transition:background-color .3s,color .3s}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;color:var(--teal-900);line-height:1.25;margin-top:0}
:root[data-theme='dark'] h1,:root[data-theme='dark'] h2,:root[data-theme='dark'] h3,:root[data-theme='dark'] h4{color:#e6f0f2}
p{margin:0 0 1.25em;color:var(--ink-light)}:root[data-theme='dark'] p{color:#a8b1bb}
a{color:var(--teal-700);text-decoration:none}a:hover{color:var(--cyan-400);text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:3rem 1.5rem}
.panel{padding:4rem 1.5rem;border-top:1px solid var(--border);background:var(--bg)}.panel:nth-of-type(even){background:var(--bg-alt)}
.hero{background:var(--surface);color:var(--ink);text-align:left;padding:5rem 1.5rem}
.hero h1{font-size:clamp(1.75rem, 4.5vw, 3rem);font-weight:800;margin-bottom:1rem}
.hero .tagline{font-size:1.125rem;max-width:820px;margin:0 auto 2rem 0}
.card{background:#fff;border:1px solid var(--border);box-shadow:0 2px 6px var(--shadow);border-radius:.75rem;padding:2rem;margin-top:1rem}
:root[data-theme='dark'] .card{background:#0f2326;border-color:#1f3c41}
.btn{display:inline-block;border:2px solid var(--teal-700);color:var(--teal-700);font-weight:600;border-radius:999px;padding:.5rem 1.25rem;font-size:.9rem;transition:all .2s ease-in-out}
.btn:hover{background:var(--teal-700);color:#fff}.btn.primary{background:var(--teal-700);color:#fff}.btn.primary:hover{background:var(--cyan-400);border-color:var(--cyan-400)}
.cta-row{margin-top:1.5rem;display:flex;gap:1rem;flex-wrap:wrap}
.hint{font-size:.9rem;color:var(--ink-light)}.meta{font-size:.85rem;color:var(--ink-light)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.well{background:var(--surface);border-radius:1rem;padding:2rem;box-shadow:0 2px 4px var(--shadow)}:root[data-theme='dark'] .well{background:#0f2326}
ccc-nav,ccc-footer{display:block}

/* Fallback header */
.ccc-fallback-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(14,47,51,.96);-webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid rgba(255,255,255,.12)}
.ccc-fallback-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.ccc-fallback-header .brand{color:#fff;font-weight:800;text-decoration:none}
.ccc-fallback-header .links{display:flex;gap:10px}
.ccc-fallback-header .links a{color:#fff;text-decoration:none;font-weight:700;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.ccc-fallback-header .links a.cta{border:none;background:linear-gradient(135deg,var(--lime-400),var(--cyan-400));color:#05323a}
:root{--ccc-header-h:64px}body{padding-top:var(--ccc-header-h)}html.ccc-enhanced .ccc-fallback-header{display:none}

/* Koenig widths */
.kg-width-wide,.kg-width-full{margin:2rem auto}
.kg-width-wide{max-width:min(1200px,95vw)}
.kg-width-full{width:100vw;max-width:100vw;margin-left:50%;transform:translateX(-50%)}
.kg-width-wide img,.kg-width-full img,.kg-width-wide .kg-image,.kg-width-full .kg-image{width:100%;height:auto;display:block;border-radius:12px}
.kg-width-full .kg-image,.kg-width-full img{border-radius:0}

@media (max-width:640px){.wrap,.panel{padding:2.5rem 1rem}.cta-row{flex-direction:column}}


/* Fallback footer */
.ccc-fallback-footer {
  background:#0b2a2e; color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
}
.ccc-fallback-footer a { color:#e6f0f2; text-decoration:none; font-weight:700; }
.ccc-fallback-footer a:hover { text-decoration:underline; }
html.ccc-enhanced .ccc-fallback-footer { display:none; }

/* Mobile layout tightening */
@media (max-width: 640px) {
  .wrap, .panel { padding: 2rem 1rem; }
  .hero { padding: 3rem 1rem; }
  .cta-row { gap: 0.75rem; }
  .grid { gap: 1rem; }
}

/* =======================
   Mobile polish & image rules
   ======================= */

/* Consistent content images (posts & pages) */
.content img,
.kg-image-card img,
.kg-gallery-card img,
.kg-bookmark-card img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Optional: trim large hero/tag images a bit on phones */
@media (max-width: 640px) {
  .wrap, .panel { padding: 1.75rem 1rem; }
  .hero { padding: 2.5rem 1rem; }
  .cta-row { gap: 0.6rem; }
  .grid { gap: 0.9rem; }

  /* Smaller hero title on phones but same desktop max elsewhere */
  .hero h1 { font-size: clamp(1.7rem, 4.4vw, 3rem); }
}

/* Harmonize fallback header/footer with dark mode */
html[data-theme='dark'] .ccc-fallback-header {
  background: rgba(9,28,31,.95);
  border-bottom-color: rgba(230,240,242,.12);
}
html[data-theme='dark'] .ccc-fallback-header .brand,
html[data-theme='dark'] .ccc-fallback-header .links a { color: #e6f0f2; }

html[data-theme='dark'] .ccc-fallback-footer {
  background: #081f22;
  border-top-color: rgba(230,240,242,.12);
}
html[data-theme='dark'] .ccc-fallback-footer a { color: #e6f0f2; }

/* ==== Static CSS-only header (mobile-first fallback) ==== */
.ccc-static-header{display:none}
@media (max-width:760px){
  /* Hide web component header on phones; use static */
  ccc-nav{display:none !important}
  .ccc-static-header{display:block;position:sticky;top:0;z-index:1000;background:rgba(14,47,51,.96);
    -webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px);
    border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 6px 18px rgba(0,0,0,.18);margin-bottom:8px}
  .ccc-static-header .wrap{height:auto;padding:8px 10px;gap:8px;display:flex;align-items:center;justify-content:space-between}
  .ccc-static-header .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;text-decoration:none}
  .ccc-static-header .brand .label{display:none}
  .ccc-static-header .brand .abbr{display:inline}
  .ccc-static-header .logo{width:22px;height:22px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #22d3ee, #6ee7f8 60%, #9ae6b4 100%);
    box-shadow:0 0 0 2px rgba(255,255,255,.15) inset, 0 2px 10px rgba(0,0,0,.25)}
  /* Hamburger */
  .ccc-static-header .hamburger{display:inline-flex;min-width:36px;min-height:36px;justify-content:center;align-items:center;
    font-size:18px;border-radius:10px;color:#fff;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
  .ccc-static-header .nav-toggle{display:none}
  /* Modal sheet & backdrop */
  .ccc-static-header .menu{display:none;position:fixed;left:0;right:0;top:56px;width:100%;flex-wrap:wrap;row-gap:10px;
    padding:12px 16px;background:rgba(14,47,51,.96);border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 10px 24px rgba(0,0,0,.25)}
  .ccc-static-header .menu .chip{color:#fff;text-decoration:none;font-weight:700;border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.06);padding:6px 12px;border-radius:999px;display:inline-block}
  .ccc-static-header .menu .chip.cta{border:none;background:linear-gradient(135deg,#a3e635,#22d3ee);color:#05323a}
  /* Open state via checkbox */
  .ccc-static-header .nav-toggle:checked ~ .menu{display:flex;animation:ccc-slide .18s ease-out}
  @keyframes ccc-slide{from{transform:translateY(-6px);opacity:.85}to{transform:none;opacity:1}}
}

@media (max-width:760px){ body{ padding-top: calc(var(--ccc-header-h, 56px) + 8px); } }