/* ==========================================================================
   BULLY BRAND — theme shell
   Typography, page furniture and the markup WordPress and WooCommerce output
   on their own. Component styling lives in the BULLY plugin, so the two never
   fight over the same selectors.
   ========================================================================== */

:root{
  --bully-ink:#070503;
  --bully-bone:#FFFFFF;
  --bully-line:rgba(var(--m-glow,232,200,106),.20);
  --bully-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --bully-body:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bully-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body.bully-body{
  margin:0; color:var(--bully-bone);
  background:var(--bully-ink);
  background-image:
    radial-gradient(90% 55% at 50% 0%, rgba(var(--m-glow,232,200,106),.07), transparent 60%),
    radial-gradient(70% 45% at 100% 100%, rgba(var(--m-glow,232,200,106),.045), transparent 62%);
  background-attachment:fixed;
  font-family:var(--bully-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* `overflow-x:hidden` on body makes it a scroll container and kills
     position:sticky for every descendant — `clip` contains the overflow
     without that side effect. */
  overflow-x:clip;
}
/* Scoped away from .bully-scope: a blanket `height:auto` here was beating
   the plugin's logo sizing and rendering the footer mark at full size. */
body.bully-body img{max-width:100%}
body.bully-body :not(.bully-scope):not(.bully-scope *) > img{height:auto}
body.bully-body a{color:inherit; text-decoration:none}
::selection{background:var(--m-mid,#9AA7B4); color:var(--m-on,#08090B)}

.bully-skip{
  position:absolute; left:-9999px; top:0; z-index:200; padding:14px 22px;
  background:var(--bully-ink); color:var(--bully-bone);
  font-family:var(--bully-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
}
.bully-skip:focus{left:12px; top:12px}

.bully-main{display:block; min-height:40svh}
.bully-container{max-width:var(--bully-max,1200px); margin-inline:auto; padding-inline:clamp(18px,4vw,64px)}

/* ---------- headings outside Elementor ---------- */
.bully-arch{padding-block:clamp(40px,6vw,90px) clamp(20px,3vw,40px)}
.bully-arch__t{
  margin:0; font-family:var(--bully-display); font-weight:800; font-variation-settings:'wdth' 112;
  font-size:clamp(2rem,5vw,4rem); line-height:.96; text-transform:uppercase; letter-spacing:-.02em;
}

.bully-prose{padding-block:clamp(40px,6vw,90px)}
.bully-prose > *{max-width:74ch}
/* WooCommerce pages skip the 74ch prose measure but must keep the container:
   `max-width:none` here was cancelling .bully-container and letting the
   coupon row and the form run the full width of the viewport. */
.bully-page--wide > *{max-width:none}
.bully-prose h2,.bully-prose h3,.bully-prose h4{
  font-family:var(--bully-display); font-weight:800; font-variation-settings:'wdth' 108;
  text-transform:uppercase; letter-spacing:-.01em; line-height:1.05; margin:2em 0 .6em;
}
.bully-prose h2{font-size:clamp(1.4rem,2.6vw,2.2rem)}
.bully-prose h3{font-size:clamp(1.15rem,2vw,1.6rem)}
.bully-prose p,.bully-prose li{color:rgba(255,255,255,.78); font-weight:300}
.bully-prose a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--m-mid,#9AA7B4)}
.bully-prose blockquote{
  margin:2em 0; padding-left:24px; border-left:1px solid var(--m-mid,#9AA7B4);
  font-family:var(--bully-display); font-weight:700; font-size:1.2rem; text-transform:uppercase;
}
.bully-prose__media{margin:0 0 32px}
.bully-prose__media img{width:100%; filter:grayscale(1) contrast(1.04); transition:filter .8s}
.bully-prose__media:hover img{filter:none}
.bully-prose ul,.bully-prose ol{padding-left:1.2em}
.bully-prose code,.bully-prose pre{font-family:var(--bully-mono); font-size:.85em; background:#141417; padding:.2em .4em}
.bully-prose pre{padding:18px; overflow:auto}

/* ---------- post list ---------- */
.bully-posts{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
  gap:clamp(22px,3vw,44px); padding-bottom:clamp(40px,6vw,90px);
}
.bully-post{display:flex; flex-direction:column; gap:14px}
.bully-post__media{position:relative; display:block; overflow:hidden; aspect-ratio:16/10; background:#101013}
.bully-post__media img{
  width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.9);
  transition:transform 1.1s cubic-bezier(.19,1,.22,1), filter .8s;
}
.bully-post:hover .bully-post__media img{transform:scale(1.05); filter:none}
.bully-post__t{
  margin:0; font-family:var(--bully-display); font-weight:700; font-variation-settings:'wdth' 106;
  font-size:1.15rem; text-transform:uppercase; line-height:1.15;
}
.bully-post__t a:hover{color:var(--m-spec,#fff)}
.bully-post .bully-frame__ph{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--bully-mono); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.3);
}

/* ---------- pagination ---------- */
.bully-body .navigation.pagination{padding-bottom:clamp(40px,6vw,80px)}
.bully-body .nav-links{display:flex; gap:6px; justify-content:center; flex-wrap:wrap}
.bully-body .page-numbers{
  min-width:40px; height:40px; display:grid; place-items:center; padding:0 10px;
  border:1px solid var(--bully-line); color:rgba(255,255,255,.75);
  font-family:var(--bully-mono); font-size:.68rem; transition:.35s;
}
.bully-body .page-numbers:hover{border-color:var(--m-mid,#9AA7B4); color:var(--m-spec,#fff)}
.bully-body .page-numbers.current{background:var(--m-fill,#ccc); color:var(--m-on,#000); border-color:transparent}

.bully-404{padding-block:clamp(70px,12vw,180px)}

/* ---------- comments ---------- */
.bully-prose .comment-list{list-style:none; padding:0}
.bully-prose .comment-body{padding:22px 0; border-top:1px solid var(--bully-line)}
.bully-prose .comment-form input,
.bully-prose .comment-form textarea{
  width:100%; background:transparent; color:var(--bully-bone);
  border:1px solid var(--bully-line-2,rgba(232,200,106,.34)); padding:13px 15px; font:inherit;
}
.bully-prose .comment-form .submit{
  padding:15px 28px; border:0; cursor:pointer;
  background:var(--m-fill,#ccc); color:var(--m-on,#000);
  font-family:var(--bully-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
}

/* ---------- fallback header/footer (plugin inactive) ---------- */
.bully-fallback-hd,.bully-fallback-ft{padding-block:22px; border-bottom:1px solid var(--bully-line)}
.bully-fallback-ft{border-bottom:0; border-top:1px solid var(--bully-line); margin-top:60px}
.bully-fallback-hd .bully-container,
.bully-fallback-ft .bully-container{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.bully-fallback-hd ul{
  display:flex; gap:22px; list-style:none; margin:0; padding:0;
  font-family:var(--bully-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
}
.bully-fallback-hd__brand{font-family:var(--bully-display); font-weight:900; letter-spacing:.22em; text-transform:uppercase}
.bully-no-plugin .bully-fallback-ft a{text-decoration:underline}

/* ---------- WooCommerce shell ---------- */
.bully-body.woocommerce .bully-main,
.bully-body.woocommerce-page .bully-main{padding-block:clamp(30px,5vw,70px) clamp(50px,8vw,120px)}
.bully-body .woocommerce-notices-wrapper:empty{display:none}
.bully-body .screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .bully-post__media img,.bully-prose__media img{transition:none}
}
