/* Extracted styles from index.html - assets/styles.css */
:root, [data-theme="mmh_pedl"]{
  --bg:#f0fdf4;
  --card:#ffffff;
  --ink:#1c1e21;
  --muted:#65676b;
  --brand:#059669;
  --brand-2:#047857;
  --ring:#a7f3d0;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:radial-gradient(1200px 600px at 20% -10%, rgba(5,150,105,.10), transparent), var(--bg);
  display:flex; min-height:100svh;
}
.wrap{margin:auto; padding:32px 20px; width:min(860px, 100%);} 
header{display:flex; gap:16px; align-items:center; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid color-mix(in srgb, var(--brand) 8%, transparent);} 

/* Header redesign: grouped brand and nav */
.site-header{display:flex; align-items:center; gap:18px; width:100%}
.header-left{display:flex; gap:12px; align-items:center}
.brand{display:flex; flex-direction:column}
.brand h1{margin:0; font-size:1.45rem; line-height:1.05}
.brand .sub{margin-top:4px; color:var(--muted); font-size:.95rem}

.nav-group{margin-left:auto; display:flex; gap:10px; align-items:center}
.nav-actions{display:flex; gap:8px}
.lang-group{display:flex; align-items:center}

/* Pill style for language toggle to match site vibey pills */
.lang-pill{padding:8px 12px; border-radius:999px; background:transparent; color:var(--brand-2); border:1px solid color-mix(in srgb, var(--brand) 14%, transparent); font-weight:600}
.lang-pill:hover{background:color-mix(in srgb, var(--brand) 6%, transparent);}
.lang-pill[aria-pressed="true"]{background:var(--brand); color:#fff; border-color:var(--brand)}

/* Make small outline buttons match pill sizing */
.button.small.outline{padding:8px 12px; border-radius:10px}

@media (max-width:600px){
  .site-header{flex-direction:column; align-items:flex-start; gap:10px}
  .nav-group{width:100%; justify-content:flex-start}
  .nav-actions{width:100%; display:flex; gap:8px}
  .nav-actions a{flex:1}
  .lang-group{margin-left:0}
}
.logo{width:44px; height:44px; border-radius:10px; background:conic-gradient(from 210deg at 60% 40%, var(--brand), var(--brand-2)); display:grid; place-items:center; color:#fff; font-weight:700; letter-spacing:.5px; box-shadow:0 6px 18px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.22);} 
header nav{ display:flex; gap:8px; margin-left:auto; align-items:center }
.button.small{ padding:8px 10px; border-radius:10px; font-size:.95rem; box-shadow:none }
.section-head{margin:0}
.section-head h1{margin:0; font-size:1.6rem; line-height:1.2}
.sub{color:var(--muted); margin-top:4px; font-size:.98rem}
.card h2{margin:0 0 10px 0; font-size:1.25rem}
.card{background:var(--card); border-radius:16px; padding:22px; box-shadow:0 20px 40px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.25) inset; border:1px solid color-mix(in srgb, var(--brand) 12%, transparent);} 
.card h2{margin:0 0 10px 0; font-size:1.25rem}
.card{background:var(--card); border-radius:16px; padding:22px; box-shadow:0 20px 40px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.25) inset; border:1px solid color-mix(in srgb, var(--brand) 12%, transparent);} 
.actions{display:grid; grid-template-columns:1fr; gap:12px; margin:14px 0 6px}
@media (min-width:600px){ .actions{grid-template-columns:1fr 1fr 1fr} }

/* Mobile improvements */
@media (max-width:600px){
  .wrap{ padding:18px 14px; }
  header{ flex-direction:column; align-items:flex-start; gap:10px; }
  .logo{ width:40px; height:40px }
  h1{ font-size:1.25rem }
  .sub{ font-size:0.95rem }

  /* Move nav below title and make buttons compact / full-width when needed */
  header nav{ margin-left:0; margin-top:6px; width:100%; display:flex; gap:8px; }
  header nav a{ flex:1; padding:8px 10px; border-radius:10px; text-align:center; }

  /* Make top download buttons and resource cards breathe better on small screens */
  .actions{ grid-template-columns:1fr; gap:10px }
  a.button{ padding:12px 14px }
  .resource-item{ padding:10px; }
  .resource-item div[style]{ min-width:30px }

  /* Slightly reduce the card padding for small screens */
  .card{ padding:14px }
}
a.button{display:flex; align-items:center; gap:10px; justify-content:center; padding:14px 16px; border-radius:12px; text-decoration:none; color:#fff; background:var(--brand); border:1px solid rgba(0,0,0,.06); box-shadow:0 8px 20px color-mix(in srgb, var(--brand) 25%, transparent); transition:filter .15s ease, transform .02s ease;} 
a.button:hover{ filter:brightness(1.06)}
a.button:active{ transform:translateY(1px) }
a.button:focus-visible{ box-shadow:0 6px 18px color-mix(in srgb, var(--brand) 30%, transparent); transform:translateY(-1px) }
a.button.secondary{ background:#1f2937; color:#fff; }
a.button.outline{ background:transparent; color:var(--brand); border:1.5px solid var(--brand); box-shadow:none; }
a.button.outline:hover{ background:color-mix(in srgb, var(--brand) 6%, transparent); }
.meta{display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; color:var(--muted); font-size:.95rem}
.meta span{display:inline-flex; align-items:center; gap:8px}
.compiled-link{color:var(--brand-2); text-decoration:none}
.compiled-link:hover{ text-decoration:underline }
.footer{margin-top:18px; font-size:.92rem; color:var(--muted)}
.list{margin:6px 0 0 0; padding:0 0 0 18px}
.badge{ font-size:.78rem; padding:.25rem .5rem; border-radius:999px; background:color-mix(in srgb, var(--brand) 12%, transparent); color:var(--brand);} 
.resources{ margin-top:12px; display:grid; gap:12px }
.resource-item{ display:flex; align-items:flex-start; gap:12px; padding:12px 12px; border-radius:10px; background:color-mix(in srgb, var(--card) 98%, var(--brand) 0%); border:1px solid rgba(0,0,0,.04); box-shadow:0 6px 18px rgba(0,0,0,.03)}
.resource-item > div:first-child{ opacity:0.98; font-size:20px }
.resource-item strong{ display:block; margin-bottom:4px }
.resource-item .meta-small{ color:var(--muted); font-size:.92rem }

@media (min-width:700px){
  .resources{ grid-template-columns:1fr 1fr; gap:14px }
}

@media (min-width:1000px){
  .resources{ grid-template-columns:1fr 1fr 1fr }
}
/* Accessible utilities */
.skip-link{ position:absolute; left:0; top:0; transform:translateY(-120%); background:var(--card); color:var(--brand-2); padding:8px 12px; z-index:999; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.skip-link:focus{ transform:translateY(8px); }
.sr-only{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap }

/* Footer styling that follows site design */
.site-footer{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; padding:12px 14px; border-radius:10px}
.footer-left{color:var(--muted); font-size:.95rem}
.footer-right{display:flex; gap:12px; align-items:center}
.footer-link{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; text-decoration:none; color:var(--brand-2); border:1px solid color-mix(in srgb,var(--brand) 10%, transparent); background:transparent}
.footer-url{color:var(--muted); font-size:.92rem; margin-left:6px; opacity:.95}
.footer-name{font-weight:600}
.footer-link:hover{background:color-mix(in srgb,var(--brand) 6%, transparent)}
@media (max-width:600px){
  .site-footer{flex-direction:column; align-items:flex-start}
  .footer-right{width:100%; display:flex; gap:8px}
  .footer-link{flex:1; text-align:center}
}
/* small visual tweaks */
button, a{font-family:inherit}