/*
Theme Name:   Strategic Theaters
Theme URI:    https://example.org/strategic-theaters
Description:  A quiet, wide theme for a mapped and sourced history site. Full width by
              default so the Strategic Theaters plugin console runs edge to edge, with a
              dark site header and footer, and a constrained measure for ordinary writing.
Author:       Strategic Theaters
Version:      1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  strategic-theaters
Tags:         full-width-template, custom-menu, editor-style, translation-ready
*/

/* ============================================================
   PALETTE
   Bound to a role, never to a position. Matches the plugin.
     head  #2C2119  display type
     body  #2F4443  running prose
     data  #45302A  dates, times, coordinates
     cred  #7D5F52  captions, credits, labels
     mark  #47654E  categories, references, active state
   ============================================================ */
:root{
  --st-bg:#CBD2CE; --st-panel:#DCE0DD; --st-dark:#263038;
  --st-head:#2C2119; --st-body:#2F4443; --st-data:#45302A;
  --st-cred:#7D5F52; --st-mark:#47654E;
  --st-rule:#B0B9B5; --st-rule-2:#92A5A3;
  --st-disp:"Libre Baskerville",Georgia,serif;
  --st-sans:"Roboto",system-ui,-apple-system,sans-serif;
  --st-mono:"Roboto Mono",ui-monospace,SFMono-Regular,monospace;
  --st-measure:74ch;
  --st-gutter:26px;
  --st-max:1320px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--st-bg);color:var(--st-body);
  font-family:var(--st-sans);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
/* svg is deliberately not given display:block or height:auto here. Inline icons
   inside labels and buttons collapse when a zero-size parent meets max-width:100%. */
svg{max-width:100%}
a{color:var(--st-data)}
a:hover{color:var(--st-mark)}
h1,h2,h3,h4,h5,h6{font-family:var(--st-disp);color:var(--st-head);
  font-weight:700;letter-spacing:-.01em;line-height:1.25;margin:0 0 .6em}
:focus-visible{outline:2px solid var(--st-mark);outline-offset:2px}

.stt-wrap{max-width:var(--st-max);margin:0 auto;padding:0 var(--st-gutter)}

/* Skip link, visible only when tabbed to. */
.stt-skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--st-dark);
  color:#CBD2CE;padding:12px 18px;font-family:var(--st-mono);font-size:11px;letter-spacing:.1em}
.stt-skip:focus{left:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* ============================================================
   SITE HEADER
   ============================================================ */
.stt-head{background:var(--st-dark);color:#CBD2CE}
.stt-head .stt-wrap{display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap}
.stt-brand{display:flex;flex-direction:column;gap:3px;text-decoration:none;padding:14px 0}
.stt-brand b{font-family:var(--st-disp);font-weight:700;font-size:15px;color:#CBD2CE;line-height:1.2}
.stt-brand span{font-family:var(--st-mono);font-size:8.5px;letter-spacing:.16em;color:#92A5A3;
  text-transform:uppercase}
.stt-brand img{max-height:38px;width:auto}

.stt-nav ul{display:flex;flex-wrap:wrap;align-items:stretch;list-style:none;margin:0;padding:0}
.stt-nav a{display:block;font-family:var(--st-mono);font-size:10px;letter-spacing:.08em;
  color:rgba(203,210,206,.72);text-decoration:none;padding:24px 14px;
  border-bottom:2px solid transparent;text-transform:uppercase}
.stt-nav a:hover{color:#CBD2CE}
.stt-nav .current-menu-item > a,
.stt-nav .current-menu-ancestor > a,
.stt-nav .current_page_item > a,
.stt-nav .current_page_ancestor > a{color:#CBD2CE;border-bottom-color:#5E8570}
/* ---------- dropdowns ----------
   Hover on a pointer, expanded under the parent on a phone. No script. */
.stt-nav .menu-item-has-children{position:relative}

.stt-nav .sub-menu{list-style:none;margin:0;padding:0}

@media(min-width:901px){
  .stt-nav .sub-menu{position:absolute;top:100%;left:0;z-index:900;min-width:230px;
    padding:6px 0;background:#263038;border:1px solid rgba(203,210,206,.14);
    box-shadow:0 10px 26px -12px rgba(44,33,25,.7);
    opacity:0;visibility:hidden;transform:translateY(-4px);
    transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s}
  .stt-nav .menu-item-has-children:hover > .sub-menu,
  .stt-nav .menu-item-has-children:focus-within > .sub-menu{
    opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .stt-nav .sub-menu a{display:block;padding:9px 16px;white-space:nowrap}
  .stt-nav .sub-menu a:hover{background:rgba(203,210,206,.09)}
}

@media(max-width:900px){
  .stt-nav .sub-menu{padding:2px 0 6px 16px;margin:2px 0 4px;
    border-left:1px solid rgba(203,210,206,.18)}
  .stt-nav .sub-menu a{display:block;padding:7px 0;font-size:13px;opacity:.85}
}

/* Three bars, and only below the breakpoint where the menu collapses. */
.stt-toggle{display:none;appearance:none;background:transparent;border:0;
  padding:10px;margin-right:-10px;cursor:pointer;color:#CBD2CE}
.stt-bars{display:block;width:22px;height:16px;position:relative}
.stt-bars i{position:absolute;left:0;width:100%;height:2px;background:currentColor;
  transition:transform .2s ease,opacity .2s ease,top .2s ease}
.stt-bars i:nth-child(1){top:0}
.stt-bars i:nth-child(2){top:7px}
.stt-bars i:nth-child(3){top:14px}
.stt-toggle[aria-expanded="true"] .stt-bars i:nth-child(1){top:7px;transform:rotate(45deg)}
.stt-toggle[aria-expanded="true"] .stt-bars i:nth-child(2){opacity:0}
.stt-toggle[aria-expanded="true"] .stt-bars i:nth-child(3){top:7px;transform:rotate(-45deg)}

@media(max-width:900px){
  .stt-toggle{display:block}
  /* The panel slides rather than appearing, because display:none cannot ease. */
  .stt-nav{width:100%;overflow:hidden;max-height:0;border-top:0 solid rgba(146,165,163,.25);
    transition:max-height .24s ease,border-top-width .24s ease}
  .stt-nav.open{max-height:80vh;overflow-y:auto;border-top-width:1px}
  .stt-nav ul{flex-direction:column}
  .stt-nav a{padding:12px 0;border-bottom:1px solid rgba(146,165,163,.15)}
}

/* Breadcrumb strip under the header. */
.stt-crumb{background:var(--st-panel);border-bottom:1px solid var(--st-rule-2)}
.stt-crumb .stt-wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:11px;padding-bottom:11px;font-family:var(--st-mono);font-size:10px;
  letter-spacing:.08em;color:var(--st-cred)}
.stt-crumb a{color:var(--st-data);text-decoration:none}
.stt-crumb a:hover{color:var(--st-mark)}
.stt-crumb .sep{color:var(--st-rule-2);margin:0 4px}

/* ============================================================
   CONTENT
   Full width by default. Ordinary writing is given a measure;
   anything the plugin renders manages its own width.
   ============================================================ */
.stt-main{display:block}
.stt-body > *{max-width:var(--st-measure);margin-left:auto;margin-right:auto;
  padding-left:var(--st-gutter);padding-right:var(--st-gutter)}
.stt-body > .st-scope,
.stt-body > .alignfull,
.stt-body > .alignwide{max-width:none;padding-left:0;padding-right:0}
.stt-body > .alignwide{max-width:var(--st-max);padding-left:var(--st-gutter);padding-right:var(--st-gutter)}
.stt-body p{margin:0 0 1.15em}
.stt-body ul,.stt-body ol{margin:0 0 1.15em;padding-left:1.4em}
.stt-body blockquote{background:rgba(146,165,163,.3);padding:14px 18px;margin:1.4em auto;
  font-family:var(--st-disp);font-style:italic;color:var(--st-head)}
.stt-body figure{margin:1.6em auto}
.stt-body figcaption{font-family:var(--st-mono);font-size:10.5px;line-height:1.7;
  letter-spacing:.04em;color:var(--st-cred);padding-top:9px}
.stt-body table{border-collapse:collapse;width:100%}
.stt-body th,.stt-body td{border-bottom:1px solid var(--st-rule);padding:9px 10px;text-align:left}
.stt-body code{font-family:var(--st-mono);font-size:.88em;background:var(--st-panel);padding:1px 5px}

/* Page and post headers for ordinary content. */
.stt-page-head{padding:56px 0 30px;border-bottom:1px solid var(--st-rule-2);margin-bottom:34px}
.stt-page-head h1{font-size:clamp(30px,5vw,54px);margin:0 0 12px}
.stt-page-head .meta{font-family:var(--st-mono);font-size:10px;letter-spacing:.14em;
  color:var(--st-cred);text-transform:uppercase}

/* Archive and search listings. */
.stt-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  border-top:1px solid var(--st-rule-2);border-left:1px solid var(--st-rule-2)}
.stt-list article{border-right:1px solid var(--st-rule-2);border-bottom:1px solid var(--st-rule-2);
  padding:20px 22px 24px}
.stt-list h2{font-size:18px;margin:0 0 8px}
.stt-list a{text-decoration:none}
.stt-list p{font-size:14px;margin:0}
.stt-pagination{padding:34px 0;font-family:var(--st-mono);font-size:11px;letter-spacing:.08em}
.stt-pagination .page-numbers{padding:8px 12px;border:1px solid var(--st-rule-2);
  text-decoration:none;margin-right:6px;display:inline-block}
.stt-pagination .current{background:var(--st-dark);color:#CBD2CE;border-color:var(--st-dark)}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.stt-foot{background:var(--st-dark);color:rgba(203,210,206,.78);margin-top:80px}
.stt-foot .stt-wrap{padding-top:52px}
.stt-footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px}
@media(max-width:900px){.stt-footgrid{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:560px){.stt-footgrid{grid-template-columns:1fr}}
.stt-footgrid h2,.stt-footgrid .widget-title{font-family:var(--st-mono);font-size:9.5px;
  letter-spacing:.14em;color:#A08A82;margin:0 0 14px;font-weight:500;text-transform:uppercase}
.stt-footgrid ul{list-style:none;margin:0;padding:0}
.stt-footgrid li{margin:0 0 9px}
.stt-footgrid a{color:rgba(203,210,206,.78);text-decoration:none;font-size:13.5px}
.stt-footgrid a:hover{color:#CBD2CE}
.stt-footbrand b{font-family:var(--st-disp);font-size:17px;color:#CBD2CE;display:block;
  margin-bottom:12px;line-height:1.34;font-weight:700}
.stt-footbrand p{font-size:13.5px;color:rgba(203,210,206,.66);max-width:38ch;margin:0 0 14px;line-height:1.7}
.stt-footbrand .rev{font-family:var(--st-mono);font-size:9.5px;letter-spacing:.08em;color:#A08A82}
.stt-footbase{border-top:1px solid rgba(146,165,163,.22);margin-top:44px;padding:20px 0 46px;
  display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;
  font-family:var(--st-mono);font-size:9.5px;letter-spacing:.06em;color:rgba(203,210,206,.5)}
.stt-footbase a{color:rgba(203,210,206,.5)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.stt-head,.stt-crumb,.stt-foot{display:none}}
@media(prefers-reduced-motion:reduce){
  .stt-nav,.stt-nav .sub-menu{transition:none}
}
@media(prefers-reduced-motion:reduce){ .stt-bars i{transition:none} }