/* THW Design header and footer. Loads on every page, so every rule is scoped by the two element ids: id rules
 * outrank the Vinkmag, Bootstrap and Elementor class rules, and the reset below covers what those set on links,
 * buttons and text. On THW Design pages the colour tokens come from body.thw-ds (light, dark, colourblind);
 * on every other page the light set below applies, whatever is saved or the system prefers. */

:where(body:not(.thw-ds)) :is(#thw-hdr,#thw-ftr){
  --surf:#FFFFFF;--surf2:#FFE7A3;--ink:#111111;--line:#111111;--sh:#111111;--acc:#FF6A3D;--blue:#7CC6FE;--tEb:#CFC6AE;
  --g:#35C46A;--y:#FFD23F;--ftBg:#111111;--ftInk:#FFF3D1;
  --display:'Lilita One','Arial Black',Impact,system-ui,sans-serif;
  --body:'Rubik',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:light
}

/* reset against theme styles */
:is(#thw-hdr,#thw-ftr){display:block;float:none;width:auto;max-width:none;margin:0;padding:0;color:var(--ink);font-family:var(--body);font-size:16px;font-weight:400;font-style:normal;line-height:1.55;letter-spacing:normal;text-transform:none;text-align:left;text-shadow:none;-webkit-font-smoothing:antialiased}
:is(#thw-hdr,#thw-ftr),:is(#thw-hdr,#thw-ftr) *,:is(#thw-hdr,#thw-ftr) *::before,:is(#thw-hdr,#thw-ftr) *::after{box-sizing:border-box}
:is(#thw-hdr,#thw-ftr) :is(nav,div,p,details,summary,span){margin:0;padding:0;border:0;background:none;box-shadow:none;float:none;letter-spacing:normal;text-transform:none}
:is(#thw-hdr,#thw-ftr) a{color:inherit;font-family:inherit;letter-spacing:normal;text-transform:none;text-decoration:none;text-shadow:none;transition:none;outline-offset:2px}
:is(#thw-hdr,#thw-ftr) button{margin:0;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;letter-spacing:normal;text-transform:none;text-shadow:none;min-width:0;width:auto;height:auto}
:is(#thw-hdr,#thw-ftr) [hidden]{display:none!important}
:is(#thw-hdr,#thw-ftr) svg{width:22px;height:22px;flex:none;display:block}
:is(#thw-hdr,#thw-ftr) :focus{outline:none}
:is(#thw-hdr,#thw-ftr) :focus-visible{outline:3px solid var(--blue);outline-offset:2px}
:is(#thw-hdr,#thw-ftr) .wrap{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
:is(#thw-hdr,#thw-ftr) .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* logo and icon buttons (header and footer) */
:is(#thw-hdr,#thw-ftr) .thw-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:400 21px/1 var(--display);min-height:44px}
:is(#thw-hdr,#thw-ftr) .lgs{display:inline-flex;gap:2px}
:is(#thw-hdr,#thw-ftr) .lgs span{width:22px;height:22px;border:2px solid #111;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font:400 13px/1 var(--display);color:#111;box-shadow:2px 2px 0 #111}
:is(#thw-hdr,#thw-ftr) .lgs span:nth-child(1){background:var(--g);transform:rotate(-8deg)}
:is(#thw-hdr,#thw-ftr) .lgs span:nth-child(2){background:var(--y);transform:rotate(5deg) translateY(-2px)}
:is(#thw-hdr,#thw-ftr) .lgs span:nth-child(3){background:var(--blue);transform:rotate(-3deg)}
:is(#thw-hdr,#thw-ftr) .ibtn{width:44px;height:44px;border-radius:10px;border:2.5px solid var(--line);background:var(--surf);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--sh);cursor:pointer;text-decoration:none;padding:0;transition:transform .1s,box-shadow .1s}
:is(#thw-hdr,#thw-ftr) .ibtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--sh)}
:is(#thw-hdr,#thw-ftr) .ibtn[aria-pressed="true"]{background:var(--y);color:#111;border-color:#111}

/* header */
/* !important only against the theme's inline header{border-bottom:0!important} on non THW Design pages. */
#thw-hdr{background:var(--surf);border-bottom:3px solid var(--line)!important;position:relative;z-index:20}
#thw-hdr>.wrap{display:flex;align-items:center;justify-content:space-between;gap:8px;height:60px}
#thw-hdr .thw-nav,#thw-hdr .thw-tools{display:none}
#thw-hdr .mnav{border-top:3px solid var(--line);background:var(--surf)}
#thw-hdr .mnav .wrap{display:grid;padding-top:8px;padding-bottom:14px}
#thw-hdr .mnav a,#thw-hdr .mnav summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;font-weight:600;text-decoration:none;cursor:pointer;list-style:none;border-bottom:2px dashed var(--tEb)}
#thw-hdr .mnav summary::-webkit-details-marker{display:none}
#thw-hdr .mnav details a{padding-left:16px;font-weight:500}
#thw-hdr .mnav details[open] summary svg{transform:rotate(180deg)}
#thw-hdr .mtools{display:flex;flex-wrap:wrap;gap:10px;padding:6px 0 12px;border-bottom:2px dashed var(--tEb)}
#thw-hdr .mtool{min-height:48px;padding:0 14px;border-radius:10px;border:2.5px solid var(--line);background:var(--surf);color:var(--ink);box-shadow:3px 3px 0 var(--sh);display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--body);cursor:pointer}
#thw-hdr .mtool[aria-pressed="true"]{background:var(--y);color:#111;border-color:#111}
#thw-hdr .dd{position:relative}
#thw-hdr .ddm{position:absolute;top:56px;left:0;min-width:220px;background:var(--surf);border:2.5px solid var(--line);border-radius:12px;padding:6px;box-shadow:5px 5px 0 var(--sh);display:flex;flex-direction:column;z-index:30}
#thw-hdr .ddm a{min-height:44px;padding:0 12px;border-radius:8px;display:flex;align-items:center;font-weight:600;text-decoration:none}
#thw-hdr .ddm a:hover,#thw-hdr .ddm a:focus-visible{background:var(--y);color:#111}

/* footer */
#thw-ftr{margin-top:72px;background:var(--ftBg);color:var(--ftInk);border-top:3px solid var(--line)}
#thw-ftr .wrap{padding-top:32px;padding-bottom:20px}
#thw-ftr .ftin{display:grid;gap:20px}
#thw-ftr p{font-size:15px;line-height:1.55;margin:12px 0 16px;opacity:.9;max-width:60ch;color:inherit}
#thw-ftr .soc{display:flex;gap:12px}
#thw-ftr .ibtn{background:var(--y);color:#111;border-color:#111;box-shadow:3px 3px 0 var(--acc)}
#thw-ftr .fl{display:flex;flex-wrap:wrap;gap:0 18px}
#thw-ftr .fl a{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px;font-weight:600;font-size:15px}
#thw-ftr .copy{margin-top:18px;padding-top:16px;border-top:2px dashed currentColor;font-size:13px;opacity:.85}

@media (min-width:960px){
  #thw-hdr>.wrap{height:84px}
  :is(#thw-hdr,#thw-ftr) .thw-logo{font-size:26px}
  :is(#thw-hdr,#thw-ftr) .lgs span{width:28px;height:28px;font-size:16px}
  #thw-hdr .thw-menubtn,#thw-hdr .mnav{display:none!important}
  #thw-hdr .thw-nav{display:flex;gap:6px;align-items:center}
  #thw-hdr .thw-tools{display:flex;gap:10px}
  #thw-hdr .nl{min-height:44px;padding:0 14px;border-radius:10px;font:600 15.5px/1 var(--body);color:var(--ink);background:none;border:2.5px solid transparent;box-shadow:none;display:inline-flex;align-items:center;gap:4px;text-decoration:none;cursor:pointer}
  #thw-hdr .nl svg{width:18px;height:18px;transition:transform .15s}
  #thw-hdr .nl:hover,#thw-hdr .nl[aria-expanded="true"]{border-color:var(--line);background:var(--surf2);box-shadow:3px 3px 0 var(--sh)}
  #thw-hdr .nl[aria-expanded="true"] svg{transform:rotate(180deg)}
  #thw-ftr{margin-top:110px}
  #thw-ftr .wrap{padding-top:48px;padding-bottom:24px}
  #thw-ftr .ftin{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:start}
  #thw-ftr .fl{justify-content:flex-end}
}
/* Narrow desktops: the logo keeps its three tiles and the name stays for screen readers, so the menu and
 * toggles fit in one row. */
@media (min-width:960px) and (max-width:1149px){
  #thw-hdr .thw-logo .lgn{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #thw-hdr .nl{padding:0 10px}
}
@media (prefers-reduced-motion:reduce){:is(#thw-hdr,#thw-ftr) *,:is(#thw-hdr,#thw-ftr) *::before,:is(#thw-hdr,#thw-ftr) *::after{animation:none!important;transition:none!important}}