/*
Theme Name: Astra Child Arcade
Theme URI: https://onlinefreegames.uk
Description: Mint arcade child theme for onlinefreegames.uk. Light mint canvas, emerald accent, amber stamp highlights, geometric sans. Namespace: arc_ / .arc-. The theme owns the chrome only: the header, the footer, the locale filter and the static navigation. Content blocks are styled by the Ledger Pages plugin (.lgp-) and the offers board by Stamp Board (.stb-).
Template: astra
Version: 1.1.0
Text Domain: astra-child-arcade
*/

/* ============================================================
   1. Tokens: mirrors of the palette contract in the Ledger
      Pages plugin stylesheet. One value each, no drift.
   ============================================================ */
:root{
  --arc-bg:#f4f7f6;
  --arc-surface:#ffffff;
  --arc-ink:#14352c;
  --arc-muted:#51665f;
  --arc-accent:#0e8f6a;
  --arc-accent-deep:#0a6b50;
  --arc-stamp:#e8a13c;
  --arc-line:#d7e2de;
  --arc-warn-bg:#fdf6e8;
  --arc-radius-card:14px;
  --arc-radius-chip:10px;
  --arc-font:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
  --arc-tint:#e9f4ef;
  --arc-zebra:#f7faf8;
  --arc-max:1180px;
}

/* ============================================================
   2. Canvas and the Astra shells
   ============================================================ */
/* The parent prints its header and footer through actions the child
   removes at wp_loaded; what remains are empty shells. Hide them, and
   hold the mint canvas against the parent's dynamic customizer CSS,
   which prints later in the head and would otherwise win the cascade. */
#masthead,.site-header,#colophon,.site-footer{display:none!important}
body{
  background:var(--arc-bg)!important;
  color:var(--arc-ink)!important;
  font-family:var(--arc-font)!important;
  font-size:17px!important;
  line-height:1.65;
}
#page,#content,.site-content,.ast-container{background:var(--arc-bg)!important}
#content a,.site-content a,.arc-content-shell a{color:var(--arc-accent)}
#content a:hover,.site-content a:hover,.arc-content-shell a:hover{color:var(--arc-accent-deep)}
#content h1,#content h2,#content h3,#content h4,#content h5,#content h6{
  font-family:var(--arc-font);color:var(--arc-ink);
}
#content img,.site-content img{max-width:100%;height:auto}

/* One content measure for every flow block on any Astra build: the
   shell provides the column, the plugin blocks span it at 100%. */
.arc-content-shell{max-width:var(--arc-max);margin:0 auto;padding:0 20px}

/* Skip link */
.arc-skip{position:absolute;left:-9999px;top:0;background:var(--arc-ink);color:#ffffff;padding:10px 16px;font-weight:700;z-index:999;border-radius:0 0 10px 0;text-decoration:none}
.arc-skip:focus{left:0}

/* ============================================================
   3. Header chrome
   ============================================================ */
.arc-header{background:var(--arc-surface);border-bottom:2px solid var(--arc-accent)}
.arc-utility{background:var(--arc-ink);color:#eef6f2;font-size:13px}
.arc-utility-in{max-width:var(--arc-max);margin:0 auto;padding:6px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.arc-utility .arc-ages{border:1px solid var(--arc-stamp);color:var(--arc-stamp);border-radius:999px;padding:1px 10px;font-weight:700}
.arc-utility-nav{display:flex;gap:16px;flex-wrap:wrap}
.arc-utility-nav a{color:#bfe3d6;text-decoration:none;border:none}
.arc-utility-nav a:hover{color:#ffffff;text-decoration:underline}
.arc-utility a:focus-visible{outline:2px solid var(--arc-stamp);outline-offset:2px}
.arc-mast{max-width:var(--arc-max);margin:0 auto;padding:20px 20px 14px;text-align:center}
.arc-logo{display:inline-block;font-family:var(--arc-font);font-size:clamp(24px,4vw,34px);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--arc-ink);text-decoration:none;border:none;line-height:1.15}
.arc-logo em{font-style:normal;color:var(--arc-accent)}
.arc-logo:hover{color:var(--arc-ink)}
.arc-logo:hover em{color:var(--arc-accent-deep)}
.arc-tagline{margin:6px 0 0;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--arc-muted)}
.arc-menubar{background:var(--arc-tint);border-top:1px solid var(--arc-line)}
.arc-menubar-in{max-width:var(--arc-max);margin:0 auto;padding:0 20px;display:flex;justify-content:center;align-items:stretch}

/* Menu: one row on every width down to the nav breakpoint. */
.arc-menu{display:flex;align-items:stretch;flex-wrap:nowrap;list-style:none;margin:0;padding:0}
.arc-item{position:relative}
.arc-item > a{display:flex;align-items:center;min-height:48px;padding:0 13px;font-size:13.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--arc-ink);text-decoration:none;border:none;white-space:nowrap}
.arc-item > a:hover{color:var(--arc-accent-deep);box-shadow:inset 0 -3px 0 var(--arc-accent)}
.arc-item > a:focus-visible{outline:2px solid var(--arc-accent);outline-offset:-2px}
.arc-caret{display:inline-block;width:0;height:0;margin-left:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform .15s ease}

/* Dropdown panels: open on hover or keyboard focus on desktop. The
   panel carries its own scroll and shadow, so no ancestor clipping
   and no stacking-context tricks are needed. */
.arc-drop{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);flex-direction:column;gap:2px;min-width:300px;max-height:70vh;overflow:auto;overscroll-behavior:contain;background:var(--arc-surface);border:1px solid var(--arc-line);border-top:3px solid var(--arc-accent);border-radius:0 0 var(--arc-radius-chip) var(--arc-radius-chip);padding:8px;box-shadow:0 16px 34px rgba(20,53,44,.18);z-index:60}
.arc-item:hover > .arc-drop,.arc-item:focus-within > .arc-drop{display:flex}
.arc-item.arc-edge > .arc-drop{left:auto;right:0;transform:none}
.arc-item.arc-edge-l > .arc-drop{left:0;transform:none}
.arc-drop a{display:block;padding:8px 12px;border-radius:8px;color:var(--arc-ink);text-decoration:none;border:none;font-size:14px;line-height:1.35;white-space:nowrap}
.arc-drop a:hover{background:var(--arc-tint);color:var(--arc-accent-deep)}
.arc-drop a:focus-visible{outline:2px solid var(--arc-accent);outline-offset:-2px}
.arc-drop .arc-drop-hub{font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--arc-accent-deep);border-bottom:1px solid var(--arc-line);border-radius:8px 8px 0 0;margin-bottom:4px;padding-bottom:9px}
.arc-drop .arc-drop-hub:hover{background:transparent;text-decoration:underline}

/* Tighter type keeps the ten clusters on one row just above the
   breakpoint, where the full-size labels would overflow the wrap. */
@media (max-width:1150px){
  .arc-item > a{padding:0 9px;font-size:12.5px}
}

/* Burger: hidden on desktop, the only menu entry below the breakpoint. */
.arc-burger{display:none}

/* ============================================================
   4. Footer chrome
   ============================================================ */
.arc-footer{background:var(--arc-ink);color:#cfe4db}
.arc-footer a{color:#bfe3d6;text-decoration:none;border:none}
.arc-footer a:hover{color:#ffffff;text-decoration:underline}
.arc-footer a:focus-visible{outline:2px solid var(--arc-stamp);outline-offset:2px}
.arc-foot-grid{max-width:var(--arc-max);margin:0 auto;padding:36px 20px 26px;display:grid;grid-template-columns:1.4fr 1.6fr 1fr;gap:36px}
.arc-foot-brand .arc-logo{color:#ffffff;font-size:24px}
.arc-foot-brand .arc-logo em{color:var(--arc-stamp)}
.arc-foot-note{margin:12px 0 0;font-size:13.5px;line-height:1.65;color:#a8c9bd;max-width:44ch}
.arc-foot-col h2{margin:6px 0 12px;font-family:var(--arc-font);font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8fb7a8}
.arc-foot-col ul{list-style:none;margin:0;padding:0}
.arc-foot-col li{margin:0 0 2px}
.arc-foot-col a{display:inline-block;padding:3px 0;font-size:14px}
.arc-foot-strip{border-top:1px solid rgba(255,255,255,.14)}
.arc-foot-strip-in{max-width:var(--arc-max);margin:0 auto;padding:14px 20px;display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;font-size:12.5px;color:#a8c9bd}
.arc-foot-help{color:#eef6f2}

/* ============================================================
   5. Directory fallback (guarded lgp_directory renderer)
   ============================================================ */
.arc-dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-block:1.4rem}
.arc-dir-hub{background:var(--arc-surface);border:1px solid var(--arc-line);border-radius:var(--arc-radius-card);padding:1rem 1.1rem}
.arc-dir-hub h2{margin:0 0 .5rem;font-size:1.02rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.arc-dir-hub h2 a{color:var(--arc-accent-deep);text-decoration:none}
.arc-dir-hub ul{list-style:none;margin:0;padding:0}
.arc-dir-hub li{border-top:1px solid var(--arc-line);padding:.32rem 0}
.arc-dir-hub li:first-child{border-top:none}
.arc-dir-hub a{color:var(--arc-ink);text-decoration:none}
.arc-dir-hub a:hover{color:var(--arc-accent-deep)}

/* ============================================================
   6. Responsive
   ============================================================ */
@media (max-width:860px){
  .arc-foot-grid{grid-template-columns:1fr;gap:26px;padding-top:28px}
}
/* Media queries carry literal pixel values on purpose: a CSS custom
   property is not valid inside a media condition, and a var() there
   would be dropped together with the whole block. The nav breakpoint
   is the literal 1060px, the same figure assets/nav.js matches. */
@media (max-width:1060px){
  .arc-menubar-in{justify-content:flex-start;padding-top:4px;padding-bottom:4px}
  .arc-burger{display:flex;align-items:center;gap:10px;background:none;border:1px solid var(--arc-line);border-radius:10px;padding:9px 14px;margin:8px 0;cursor:pointer;color:var(--arc-ink);font-family:var(--arc-font);font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
  .arc-burger-box{display:inline-flex;flex-direction:column;gap:4px}
  .arc-burger-box span{display:block;width:20px;height:2px;border-radius:2px;background:var(--arc-ink)}
  .arc-menu{display:none;flex-direction:column;align-items:stretch;padding:2px 0 10px}
  .arc-menubar.arc-open .arc-menu{display:flex}
  .arc-item{border-top:1px solid var(--arc-line)}
  .arc-item:first-child{border-top:none}
  .arc-item > a{justify-content:space-between;width:100%;min-height:46px;padding:0 4px}
  .arc-item.arc-tapopen > .arc-caret{transform:rotate(180deg)}
  /* Touch: hover must never open a panel, the tap handler owns it. */
  .arc-item:hover > .arc-drop{display:none}
  .arc-item.arc-tapopen > .arc-drop,.arc-item:focus-within > .arc-drop{display:flex;position:static;transform:none;min-width:0;max-height:none;overflow:visible;box-shadow:none;background:var(--arc-zebra);border:none;border-top:1px solid var(--arc-line);border-radius:0;padding:4px 0 8px 14px}
  .arc-drop a{white-space:normal}
  .arc-drop .arc-drop-hub{border-radius:0}
}
@media (max-width:600px){
  .arc-content-shell{padding:0 14px}
  .arc-utility-in{justify-content:center}
  .arc-foot-strip-in{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .arc-caret{transition:none}
}