/*
Theme Name: And It Came 2 Pass
Description: Blue vs. Red rivalry streetwear. Dark, loud, and built to work with the AIC2P Game Day plugin and WooCommerce.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Author: And It Came 2 Pass
Text Domain: aic2p-theme
*/

:root{
  color-scheme:dark;
  --aic-ink:#0c0e17;
  --aic-ink-2:#141826;
  --aic-ink-3:#1d2234;
  --aic-line:#2a3048;
  --aic-bone:#f1ede3;
  --aic-dim:#a3a8bb;
  --aic-blue:#2f62ff;
  --aic-red:#e3262f;
  --aic-gold:#f2c14e;
  --aic-side:var(--aic-blue);
  --aic-side-soft:color-mix(in srgb,var(--aic-side) 18%,transparent);
  --aic-f-black:"Pirata One","UnifrakturMaguntia",Georgia,serif;
  --aic-f-head:"Archivo","Arial Narrow",Arial,sans-serif;
  --aic-f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
:root[data-side="red"]{--aic-side:var(--aic-red)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--aic-ink);color:var(--aic-bone);font-family:var(--aic-f-head);font-size:16px;line-height:1.55}
img{max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--aic-gold);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:8px;top:8px;width:auto;height:auto;clip:auto;background:var(--aic-bone);color:var(--aic-ink);padding:8px 12px;z-index:100}
.label{font-family:var(--aic-f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--aic-dim)}
:root[data-side="red"] .for-blue,:root:not([data-side="red"]) .for-red{display:none}

/* buttons */
.btn,.wp-block-button__link,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{
  border:2px solid var(--aic-bone);background:var(--aic-bone);color:var(--aic-ink);padding:12px 20px;font-family:var(--aic-f-head);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:14px;line-height:1.2;text-decoration:none;display:inline-block;border-radius:0;cursor:pointer}
.btn.ghost{background:transparent;color:var(--aic-bone)}
.btn.side,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{background:var(--aic-side);border-color:var(--aic-side);color:#fff}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{filter:brightness(1.1);background:var(--aic-side);border-color:var(--aic-side);color:#fff}

/* header */
.site-top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--aic-ink) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--aic-line)}
.admin-bar .site-top{top:32px}
@media (max-width:782px){.admin-bar .site-top{top:46px}}
@media (max-width:600px){.admin-bar .site-top{top:0}}
.site-top .wrap{display:flex;align-items:center;gap:16px;padding-top:10px;padding-bottom:10px}
.mark{font-family:var(--aic-f-black);font-size:28px;line-height:1;text-decoration:none;white-space:nowrap}
.mark b,.big b{color:var(--aic-side);font-weight:400}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;font-weight:600;font-size:14px;font-stretch:85%;text-transform:uppercase;letter-spacing:.04em}
.site-nav a{text-decoration:none;color:var(--aic-dim)}
.site-nav a:hover,.site-nav .current-menu-item a{color:var(--aic-bone)}
.top-links{display:flex;align-items:center;gap:10px}
.cart-link,.acct-link{border:1px solid var(--aic-line);background:var(--aic-ink-2);border-radius:999px;padding:6px 12px;font-weight:700;font-size:13px;white-space:nowrap;text-decoration:none}
.cart-link span{display:inline-block;min-width:1.4em;text-align:center;background:var(--aic-side);border-radius:999px;margin-left:4px;color:#fff}
@media (max-width:940px){.site-nav{display:none}.aic2p-switch{margin-left:auto}}
@media (max-width:520px){.mark{font-size:21px}.acct-link{display:none}.aic2p-switch button{padding:6px 10px}.site-top .wrap{gap:10px}}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--aic-line)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 85% 10%,var(--aic-side-soft),transparent 70%),repeating-linear-gradient(90deg,transparent 0 79px,color-mix(in srgb,var(--aic-line) 50%,transparent) 79px 80px);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.35fr 1fr;gap:40px;padding-top:56px;padding-bottom:48px;align-items:end}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;padding-top:36px;padding-bottom:36px}}
.hero h1{margin:0;font-family:var(--aic-f-black);font-weight:400;font-size:clamp(56px,10vw,128px);line-height:.88;letter-spacing:-.01em;text-wrap:balance}
.hero h1 .two{color:var(--aic-side)}
.hero .then{margin:18px 0 0;font-weight:900;font-stretch:70%;text-transform:uppercase;font-size:clamp(28px,4.4vw,52px);line-height:.95;letter-spacing:-.01em}
.hero .verse{margin-top:10px;font-family:var(--aic-f-mono);font-size:13px;color:var(--aic-dim)}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.cup{background:var(--aic-ink-2);border:1px solid var(--aic-line);padding:22px;min-width:0}
.cup h2{margin:4px 0 14px;font-weight:900;font-stretch:75%;text-transform:uppercase;font-size:28px;line-height:1}
.cup .aic2p + .aic2p{margin-top:20px}

/* sections */
.block{padding-top:56px;padding-bottom:56px;border-bottom:1px solid var(--aic-line)}
.shead{margin-bottom:22px}
.shead h2,.page-title,.entry-title{margin:0;font-weight:900;font-stretch:72%;text-transform:uppercase;font-size:clamp(34px,5vw,56px);line-height:.9;letter-spacing:-.01em;text-wrap:balance}
.shead h2 em{font-family:var(--aic-f-black);font-style:normal;font-weight:400;text-transform:none;color:var(--aic-side);font-stretch:100%}
.shead p{margin:8px 0 0;color:var(--aic-dim);max-width:56ch}
.calls{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start}
@media (max-width:900px){.calls{grid-template-columns:1fr}}
.soon{border:1px dashed var(--aic-line);padding:28px;color:var(--aic-dim)}

/* generic pages and posts */
.page-main{padding-top:48px;padding-bottom:64px;min-height:50vh}
.entry{max-width:72ch}
.entry-full{max-width:none}
.entry-content{margin-top:22px}
.entry-content > *{margin-top:0;margin-bottom:1.1em}
.entry-content h2,.entry-content h3{font-weight:900;font-stretch:78%;text-transform:uppercase;line-height:1.05;margin-top:1.6em}
.entry-content a{color:var(--aic-bone);text-decoration-color:var(--aic-side);text-decoration-thickness:2px;text-underline-offset:3px}
.entry-meta{font-family:var(--aic-f-mono);font-size:12px;color:var(--aic-dim);margin-top:10px}
.post-list{display:grid;gap:14px;margin-top:26px}
.post-list article{border:1px solid var(--aic-line);background:var(--aic-ink-2);padding:20px}
.post-list h2{margin:0;font-weight:900;font-stretch:78%;text-transform:uppercase;font-size:24px;line-height:1.05}
.post-list h2 a{text-decoration:none}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],input[type=url],select,textarea{background:var(--aic-ink-2);color:var(--aic-bone);border:1px solid var(--aic-line);padding:10px 12px;font:inherit;border-radius:0;max-width:100%}

/* WooCommerce: shop and product pages stay dark */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products.columns-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){.woocommerce ul.products,.woocommerce ul.products.columns-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.woocommerce ul.products,.woocommerce ul.products.columns-3{grid-template-columns:1fr}}
.woocommerce ul.products li.product{float:none;width:auto;margin:0;background:var(--aic-ink-2);border:1px solid var(--aic-line);padding:0 0 14px;display:flex;flex-direction:column;position:relative}
.woocommerce ul.products li.product a img{margin:0 0 12px;display:block;width:100%}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--aic-f-head);font-weight:800;font-size:17px;text-transform:uppercase;font-stretch:85%;line-height:1.1;padding:0 14px;color:var(--aic-bone)}
.woocommerce ul.products li.product .price{font-family:var(--aic-f-mono);font-size:15px;color:var(--aic-bone);padding:6px 14px 0;display:block}
.woocommerce ul.products li.product .button{margin:12px 14px 0;padding:8px 12px;font-size:12px;background:transparent;color:var(--aic-bone);align-self:flex-start;margin-top:auto}
.woocommerce ul.products li.product a{text-decoration:none}
.woocommerce span.onsale{background:var(--aic-side);color:#fff;border-radius:0;font-family:var(--aic-f-mono);font-weight:400;min-height:0;min-width:0;line-height:1;padding:6px 8px;top:10px;left:10px;right:auto;margin:0}
.woocommerce div.product .product_title{font-weight:900;font-stretch:72%;text-transform:uppercase;font-size:clamp(30px,4.4vw,48px);line-height:.95}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--aic-bone);font-family:var(--aic-f-mono)}
.woocommerce .woocommerce-breadcrumb,.woocommerce .woocommerce-result-count{color:var(--aic-dim);font-family:var(--aic-f-mono);font-size:12px}
.woocommerce .woocommerce-breadcrumb a{color:var(--aic-dim)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:var(--aic-ink-2);border-color:var(--aic-line);border-radius:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--aic-dim)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--aic-ink);border-bottom-color:var(--aic-ink)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--aic-bone)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,.woocommerce div.product .woocommerce-tabs .panel{border-color:var(--aic-line)}
.woocommerce .quantity .qty{width:5em}
.woocommerce-message,.woocommerce-info,.woocommerce-error{background:var(--aic-ink-2);color:var(--aic-bone);border-top-color:var(--aic-side)}

/* WooCommerce: cart, checkout and account sit on a light sheet so Woo's own form styles stay readable */
.woocommerce-cart .entry,.woocommerce-checkout .entry,.woocommerce-account .entry{max-width:none}
.woocommerce-cart .entry-content,.woocommerce-checkout .entry-content,.woocommerce-account .entry-content{background:var(--aic-bone);color:#14161f;padding:clamp(16px,3vw,32px);color-scheme:light}
.woocommerce-cart .entry-content a,.woocommerce-checkout .entry-content a,.woocommerce-account .entry-content a{color:#14161f}
.woocommerce-cart .entry-content input,.woocommerce-checkout .entry-content input,.woocommerce-account .entry-content input,
.woocommerce-cart .entry-content select,.woocommerce-checkout .entry-content select,.woocommerce-account .entry-content select,
.woocommerce-cart .entry-content textarea,.woocommerce-checkout .entry-content textarea,.woocommerce-account .entry-content textarea{background:#fff;color:#14161f;border-color:#b9b5a8}
.woocommerce-cart .entry-content .button,.woocommerce-checkout .entry-content .button,.woocommerce-account .entry-content .button{background:#14161f;border-color:#14161f;color:#fff}
.woocommerce-cart .entry-content .button.alt,.woocommerce-checkout .entry-content .button.alt{background:var(--aic-side);border-color:var(--aic-side)}

/* footer */
.site-foot{padding-top:40px;padding-bottom:60px}
.site-foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.big{font-family:var(--aic-f-black);font-size:clamp(40px,7vw,80px);line-height:.9}
.site-foot p{color:var(--aic-dim);font-size:13px;max-width:60ch;margin:8px 0 0}
.site-foot p a{color:var(--aic-dim)}
.site-foot p a:hover{color:var(--aic-bone)}
.foot-nav ul{display:flex;gap:16px;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:13px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.foot-nav a{color:var(--aic-dim);text-decoration:none}
.foot-nav a:hover{color:var(--aic-bone)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}