/*
Theme Name: Sucker Punch
Author: Sucker Punch AB
Description: A dark, responsive company theme featuring Enjoy TV. Supports ordinary WordPress pages and the Enjoy TV Compatibility shortcode.
Version: 1.1.5
Requires at least: 6.0
Requires PHP: 7.4
License: MIT
Text Domain: suckerpunch
*/
:root { --bg:#081419; --panel:#0e2027; --line:#25404a; --ink:#f1f7f5; --muted:#a6bac1; --accent:#8fe8ce; --blue:#71c5f3; --radius:20px; color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,"Segoe UI",Arial,sans-serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; text-underline-offset:5px; }
a:hover { color:var(--accent); }
a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid var(--blue); outline-offset:6px; }
img { max-width:100%; height:auto; }
p,h1,h2,h3 { margin-top:0; }
p { color:var(--muted); }
h1,h2,h3 { font-weight:600; letter-spacing:-.045em; line-height:1.12; }
h1 { font-size:clamp(48px,6.5vw,88px); }
h2 { font-size:clamp(36px,4.5vw,60px); }
h3 { font-size:24px; letter-spacing:-.025em; }
.shell { width:min(1240px,calc(100% - 80px)); margin-inline:auto; }
.skip-link { position:absolute; left:16px; top:-100px; background:var(--accent); color:var(--bg); padding:12px; z-index:100; }
.skip-link:focus { top:12px; }
.site-header { position:sticky; top:0; z-index:30; background:rgba(8,20,25,.96); border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:center; justify-content:space-between; min-height:98px; gap:30px; }
.wordmark { position:relative; display:inline-block; font-size:22px; line-height:.85; letter-spacing:-.065em; font-weight:900; color:var(--ink); }
.wordmark span { color:var(--accent); }
.wordmark small { position:absolute; right:-20px; bottom:0; font-size:9px; letter-spacing:.02em; font-weight:600; }
.custom-logo-link img { display:block; width:auto; max-height:54px; max-width:180px; }
.nav-links { list-style:none; padding:0; margin:0; display:flex; gap:36px; }
.nav-links a { font-size:14px; color:var(--muted); }
.nav-links a:hover { color:var(--ink); }
.header-contact { border:1px solid var(--line); border-radius:100px; padding:10px 20px; font-size:14px; }
.header-contact span { margin-left:20px; color:var(--accent); }
.mobile-menu { display:none; }
.eyebrow { color:var(--muted); font-size:11px; letter-spacing:.15em; font-weight:600; line-height:1.5; }
.signal { display:inline-block; width:7px; height:7px; margin-right:8px; background:var(--accent); border-radius:50%; }
.hero { display:grid; grid-template-columns:1fr 1.08fr; align-items:center; gap:48px; padding-block:94px 100px; min-height:680px; }
.hero-copy h1 { margin:28px 0; }
.lead { font-size:19px; line-height:1.7; max-width:520px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:24px; align-items:center; margin-top:32px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:24px; padding:16px 24px; color:#082126; background:var(--accent); border:1px solid var(--accent); border-radius:8px; font-size:14px; font-weight:700; line-height:1.5; }
.button:hover { color:#082126; background:#b4f5df; border-color:#b4f5df; }
.button-outline { background:transparent; color:var(--accent); border-color:var(--line); }
.button-outline:hover { background:var(--accent); }
.text-link { font-size:14px; border-bottom:1px solid var(--line); padding-bottom:5px; }
.text-link span { margin-left:12px; }
.small-note { font-size:12px; margin-top:22px; }
.product-visual { position:relative; padding:32px 0 0; min-width:0; }
.visual-top { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:9px; letter-spacing:.14em; margin:0 8px 18px; }
.oled-tv { transform:perspective(1400px) rotateY(14deg) rotateX(2deg); transform-style:preserve-3d; filter:drop-shadow(0 28px 25px #0006); }
.tv-frame { position:relative; background:#07090a; border:1px solid #8a9296; border-radius:3px; padding:3px 3px 5px; box-shadow:inset 0 -2px 0 #272c30,0 0 0 1px #111619; }
.tv-screen { aspect-ratio:16/9; border-radius:1px; overflow:hidden; background:#030609; }
.tv-screen img { display:block; width:100%; height:100%; object-fit:contain; }
.tv-stand { position:relative; width:38%; height:36px; margin:0 auto; }
.tv-stand::before { content:''; position:absolute; top:0; left:40%; width:20%; height:85%; background:linear-gradient(90deg,#14191d,#535c63 45%,#20272c); }
.tv-stand::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:8px; background:linear-gradient(#677077,#252b30); clip-path:polygon(14% 0,85% 0,100% 65%,98% 100%,2% 100%,0 65%); }
.visual-caption { text-align:center; font-size:10px; margin-top:14px; letter-spacing:.04em; }
.product-section { background:var(--panel); border-block:1px solid var(--line); padding-block:70px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:50px; }
.section-head p { margin:0; }
.status-pill { border:1px solid #30534d; color:var(--accent); border-radius:50px; padding:6px 12px; font-size:11px; }
.product-intro { display:grid; grid-template-columns:1fr 1fr; gap:70px; margin-bottom:48px; align-items:center; }
.product-name { display:flex; align-items:center; gap:18px; }
.product-name img { width:70px; height:70px; object-fit:contain; }
.product-name h2 { font-size:46px; margin:0; }
.product-name h2 span { display:block; font-size:15px; line-height:2; color:var(--muted); font-weight:400; letter-spacing:0; }
.product-intro>p { max-width:510px; margin:0; }
.feature-lines article { display:grid; grid-template-columns:60px 1fr 60px; gap:20px; align-items:center; border-top:1px solid var(--line); padding:30px 0; }
.feature-number { color:var(--muted); font-size:12px; }
.feature-lines h3 { margin:0 0 10px; }
.feature-lines p { margin:0; max-width:740px; font-size:15px; }
.feature-symbol { font-size:30px; color:var(--accent); justify-self:end; font-weight:300; }
.product-next { border-top:1px solid var(--line); padding-top:36px; display:flex; align-items:center; justify-content:space-between; gap:36px; }
.product-next h3 { font-size:23px; margin-bottom:10px; }
.product-next p { margin-bottom:0; font-size:14px; max-width:600px; }
.product-next .button { flex-shrink:0; }
.about-section { display:grid; grid-template-columns:1fr 1fr; gap:70px; padding-block:100px; border-bottom:1px solid var(--line); }
.about-section h2 { margin:28px 0 0; }
.about-section h2 span { color:var(--accent); }
.about-copy { padding-top:40px; }
.about-copy .lead { color:var(--ink); }
.about-copy p:not(.lead) { font-size:15px; }
.about-copy .text-link { display:inline-block; margin-top:12px; }
.support-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; padding-block:95px 110px; }
.support-heading h2 { margin:28px 0; }
.contact-link { color:var(--accent); font-size:14px; overflow-wrap:anywhere; }
.faq details { border-bottom:1px solid var(--line); }
.faq details:first-child { border-top:1px solid var(--line); }
.faq summary { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; cursor:pointer; list-style:none; font-size:17px; font-weight:500; }
summary::-webkit-details-marker { display:none; }
.faq summary span { font-size:24px; color:var(--accent); }
.faq details[open] summary span { transform:rotate(45deg); }
.faq details p { font-size:14px; max-width:540px; }
.faq details a { display:inline-block; color:var(--accent); font-size:14px; margin-bottom:24px; }
.site-footer { border-top:1px solid var(--line); background:#061014; padding:48px 0 24px; }
.footer-main { display:flex; align-items:center; justify-content:space-between; gap:40px; padding-bottom:40px; }
.footer-main p { font-size:14px; margin:0; }
.footer-main>a:last-child { color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.footer-bottom { border-top:1px solid var(--line); padding-top:22px; display:flex; gap:28px; flex-wrap:wrap; color:#9bb0b8; font-size:11px; }
.footer-bottom>span:last-child { margin-left:auto; }
.page-content { padding-block:80px 100px; min-height:60vh; }
.page-content h1 { font-size:clamp(36px,6vw,68px); max-width:1000px; margin:24px 0 40px; overflow-wrap:anywhere; }
.entry-content { max-width:900px; color:var(--muted); font-size:17px; overflow-wrap:anywhere; }
.entry-content h2,.entry-content h3 { color:var(--ink); margin-top:40px; }
.entry-content a { color:var(--accent); text-decoration:underline; }
.entry-content>p { max-width:760px; }
.entry-content figure { margin-inline:0; }
.entry-content table { width:100%; border-collapse:collapse; }
.entry-content th,.entry-content td { border:1px solid var(--line); text-align:left; padding:12px; }
.enjoy-tv-compatibility>h2 { font-size:30px; }
.enjoy-tv-compatibility section { margin-top:28px; padding:24px 28px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.enjoy-tv-compatibility section h3 { color:var(--accent); margin:0 0 18px; font-size:22px; }
.enjoy-tv-compatibility ul { padding-left:20px; margin-bottom:0; display:grid; gap:10px; }
.post-entry { padding-bottom:40px; border-bottom:1px solid var(--line); margin-bottom:40px; }
.post-entry h2 { max-width:900px; }
.screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media(min-width:783px) { body.admin-bar .site-header { top:32px; } }
@media(min-width:601px) and (max-width:782px) { body.admin-bar .site-header { top:46px; } }
@media(max-width:1000px) { .hero { gap:28px; padding-block:70px; }.hero h1 { font-size:64px; }.hero .lead { font-size:17px; }.product-intro,.about-section { gap:40px; }.support-section { gap:50px; } }
@media(max-width:760px) {
  html { scroll-padding-top:95px; }.shell { width:calc(100% - 40px); }.header-inner { min-height:80px; gap:20px; }.wordmark { font-size:20px; }
  .desktop-nav,.header-contact { display:none; }.mobile-menu { display:block; }.mobile-menu>summary { font-size:14px; cursor:pointer; border:1px solid var(--line); border-radius:6px; padding:8px 14px; list-style:none; }
  .mobile-menu nav { position:absolute; left:0; right:0; top:100%; padding:24px; background:var(--panel); border-bottom:1px solid var(--line); }.mobile-menu .nav-links { flex-direction:column; gap:20px; }
  .hero { grid-template-columns:1fr; gap:34px; padding-block:50px 48px; min-height:auto; }.hero h1 { font-size:clamp(46px,11vw,72px); margin-block:24px; }.hero .lead { max-width:550px; font-size:17px; }.eyebrow { font-size:10px; }.hero-actions { gap:20px; margin-top:26px; }
  .product-visual { max-width:600px; width:100%; justify-self:center; padding-top:10px; }.oled-tv { transform:perspective(1400px) rotateY(8deg); }.visual-top { font-size:8px; }.tv-stand { height:26px; }
  .product-section { padding-block:45px; }.section-head { margin-bottom:32px; }.product-intro { grid-template-columns:1fr; gap:24px; margin-bottom:34px; }.product-name h2 { font-size:38px; }.product-name img { width:56px; height:56px; }.product-name h2 span { font-size:14px; }
  .feature-lines article { grid-template-columns:25px 1fr; gap:14px; padding-block:24px; }.feature-lines h3 { font-size:23px; }.feature-symbol { display:none; }.product-next { flex-direction:column; align-items:flex-start; gap:24px; }.product-next .button { width:100%; }
  .about-section { grid-template-columns:1fr; gap:26px; padding-block:60px; }.about-copy { padding-top:0; }.about-section h2 { font-size:44px; }.support-section { grid-template-columns:1fr; gap:30px; padding-block:60px; }.support-heading h2 { font-size:44px; }.faq summary { font-size:16px; }
  .footer-main { align-items:flex-start; flex-direction:column; gap:26px; }.footer-bottom { gap:14px 22px; }.footer-bottom>span:last-child { margin-left:0; }.page-content { padding-block:50px 70px; }.entry-content { font-size:16px; }
}
@media(max-width:360px) { .hero-actions>.button { width:100%; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Company and product pages share the same visual language. */
.language-switch { display:flex; gap:4px; flex-shrink:0; }
.language-switch a { font-size:12px; padding:7px; border-radius:5px; color:var(--muted); }
.language-switch a[aria-current] { color:var(--bg); background:var(--accent); }
.company-hero { grid-template-columns:1.2fr 1fr; }
.company-art { position:relative; isolation:isolate; min-height:420px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:24px; background:radial-gradient(ellipse at 70% 25%,#234b51,transparent 65%),#0b1c24; border:1px solid var(--line); }
.art-word { font-size:clamp(48px,6vw,82px); line-height:.85; font-weight:900; letter-spacing:-.075em; transform:rotate(-8deg); z-index:1; }
.art-word span { color:var(--accent); }
.art-orbit { position:absolute; width:380px; height:240px; border:1px solid #71c5f360; border-radius:50%; transform:rotate(-35deg); }
.orbit-two { transform:rotate(50deg); border-color:#8fe8ce50; }
.art-caption { position:absolute; bottom:24px; font-size:9px; letter-spacing:.2em; color:var(--muted); }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; }
.project-card { padding:42px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(135deg,#102c33,var(--panel)); }
.vamos-card { background:linear-gradient(135deg,#16372e,var(--panel)); }
.project-card h2 { font-size:clamp(30px,3.5vw,46px); overflow-wrap:anywhere; margin-bottom:20px; }
.project-card p { min-height:110px; max-width:440px; }
.project-mark { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:42px; }
.project-mark>span:last-child { font-size:10px; letter-spacing:.12em; color:var(--muted); }
.vamos-mark { font-size:64px; line-height:72px; font-weight:900; color:var(--accent); font-style:italic; }
.football-art { min-width:0; transform:rotate(-4deg); }
.football-art>p { text-align:center; font-size:10px; letter-spacing:.3em; margin-top:22px; }
.pitch { position:relative; aspect-ratio:1.3; border:2px solid #8fe8ce80; border-radius:18px; background:repeating-linear-gradient(90deg,#153e34 0%,#153e34 16.66%,#19483b 16.66%,#19483b 33.33%); display:grid; place-items:center; overflow:hidden; }
.pitch:before { content:''; position:absolute; inset:0 50% 0 auto; border-left:1px solid #8fe8ce80; }
.pitch-centre { position:absolute; width:28%; aspect-ratio:1; border:1px solid #8fe8ce80; border-radius:50%; }
.pitch-box { position:absolute; top:25%; height:50%; width:17%; border:1px solid #8fe8ce80; }
.box-left { left:-1px; }.box-right { right:-1px; }
.pitch b { z-index:1; font-size:clamp(44px,5vw,70px); font-style:italic; letter-spacing:-.06em; text-shadow:0 5px 20px #081419; }
.pitch b span { color:var(--accent); }
@media(max-width:1100px) { .header-inner { gap:18px; }.nav-links { gap:20px; }.header-contact { display:none; } }
@media(max-width:760px) { .company-hero,.project-grid { grid-template-columns:1fr; }.company-art { min-height:300px; }.project-card { padding:28px; }.project-card p { min-height:0; }.header-inner { gap:16px; }.language-switch { margin-left:auto; }.football-art { margin:10px 5px; }.art-word { font-size:64px; } }