/*
Theme Name: Fix It Nerds 2026
Theme URI: https://fixitnerds.co.uk
Author: BP Strategists
Description: Custom theme for Fix It Nerds — London computer repair & gaming. Built from Claude Design handoff, hand-coded for performance (no page builder).
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: fin2026
*/

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fffaf5;color:#42506b;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:400;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:#1e73be;text-decoration:none}
a:hover{color:#ea632f}
h1,h2,h3,p{margin:0}
input,textarea,button{font-family:inherit}

/* ---------- keyframes ---------- */
@keyframes fnPulse{0%{box-shadow:0 0 0 0 rgba(53,168,58,.5)}70%{box-shadow:0 0 0 7px rgba(53,168,58,0)}100%{box-shadow:0 0 0 0 rgba(53,168,58,0)}}

/* ---------- hover utilities (inline styles can't do :hover) ---------- */
.fnlink{transition:color .15s}
.fnlink:hover{color:#ea632f}
.fnlift{transition:transform .18s,box-shadow .18s}
.fnlift:hover{transform:translateY(-3px)}
.fnfab{transition:transform .15s}
.fnfab:hover{transform:scale(1.08)}
.fncard-nav{transition:background .15s,transform .15s}
.fncard-nav:hover{transform:translateY(-2px)}
.fntile:hover{background:rgba(255,255,255,.12)!important}

/* ---------- responsive helpers (breakpoint 920) ---------- */
@media (min-width:921px){.fnMob{display:none!important}}
@media (max-width:920px){
  .fnDesk{display:none!important}
  .fn2{grid-template-columns:minmax(0,1fr)!important}
  .fn2>*{min-width:0}
  .fnH{font-size:34px!important;line-height:1.12!important}
  .fnPad{padding-left:20px!important;padding-right:20px!important}
  .fnFoot{grid-template-columns:1fr 1fr!important;column-gap:24px}
  .fnFoot>div:first-child{grid-column:1/-1}
  .fn-band{padding-left:20px!important;padding-right:20px!important}
}

/* ---------- megamenu (JS toggles .open) ---------- */
.fn-mega{display:none}
.fn-mega.open{display:block}

/* ---------- mobile drawer (JS toggles .open) ---------- */
.fn-drawer{display:none}
.fn-drawer.open{display:block}
.fn-acc{display:none}
.fn-acc.open{display:block}

/* ---------- FAQ (JS toggles) ---------- */
.fn-faq-a{display:none}
.fn-faq.open .fn-faq-a{display:block}

/* ---------- hero slider (homepage) ---------- */
.fn-hs-img{opacity:0;transition:opacity .8s ease}
.fn-hs-img.on{opacity:1}
#fn-hs-caption{display:inline-block;transition:opacity .3s ease}
#fn-hs-caption.fade{opacity:0}

/* ---------- ported-copy typography (.fn-content) ---------- */
.fn-content h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:27px;line-height:1.15;color:#0f172a;margin:34px 0 14px}
.fn-content h2:first-child{margin-top:0}
.fn-content h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:19px;line-height:1.25;color:#0f172a;margin:26px 0 10px}
.fn-content p{font-size:15.5px;line-height:1.7;color:#42506b;margin:0 0 16px}
.fn-content ul,.fn-content ol{margin:0 0 18px;padding-left:0;list-style:none}
.fn-content li{position:relative;padding-left:28px;margin-bottom:9px;font-size:15px;line-height:1.6;color:#42506b}
.fn-content li::before{content:"✓";position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;background:#e8f4e9;color:#2e8f33;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.fn-content a{font-weight:700}
.fn-content strong{color:#0f172a}
.fn-card-copy p{font-size:13px;line-height:1.6;margin:0 0 10px}
.fn-card-copy p:last-child{margin-bottom:0}
.fn-navy-copy p{color:#aeb9cc}
.fn-navy-copy strong{color:#fff}
.fn-navy-copy li{color:#aeb9cc}
.fn-navy-copy li::before{background:rgba(53,168,58,.18);color:#8fd694}

/* ---------- top bar: single slim line on mobile ---------- */
@media (max-width:920px){
  .fn-topbar{padding:6px 16px !important;font-size:12px !important;gap:10px !important}
}

/* ---------- nav: true page-center on wide screens ---------- */
@media (min-width:1360px){
  .fn-navcenter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;flex-wrap:nowrap!important;white-space:nowrap}
}

/* ---------- WooCommerce, themed ---------- */
.fn-woo .woocommerce-products-header__title,
.fn-woo .product_title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:#0f172a;letter-spacing:-.01em}
.fn-woo .product_title{font-size:34px;line-height:1.1}
.fn-woo p.price,.fn-woo span.price{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:#0f172a;font-size:26px}
.fn-woo ul.products li.product{background:#fff;border-radius:18px;padding:18px;box-shadow:0 8px 22px -14px rgba(15,23,42,.14);transition:transform .18s}
.fn-woo ul.products li.product:hover{transform:translateY(-3px)}
.fn-woo ul.products li.product img{border-radius:12px;background:#f6f1ea;object-fit:contain;aspect-ratio:4/3}
.fn-woo .button,.fn-woo button.button,.fn-woo .single_add_to_cart_button,
.fn-woo .wc-block-components-button,.fn-woo .checkout-button{
  background:#ea632f !important;color:#fff !important;border:0 !important;border-radius:99px !important;
  font-weight:800 !important;font-size:13.5px !important;padding:13px 24px !important;
  box-shadow:0 10px 24px -10px rgba(234,99,47,.5);text-transform:none}
.fn-woo .button:hover{background:#d5581f !important}
.fn-woo .onsale{background:#35a83a;border-radius:99px;font-weight:800}
.fn-woo .woocommerce-breadcrumb{display:none}
.fn-woo div.product div.images img{border-radius:18px;background:#fff}
.fn-woo div.product{background:#fff;border-radius:20px;padding:28px;box-shadow:0 10px 26px -16px rgba(15,23,42,.16)}
.fn-woo .woocommerce-tabs ul.tabs li.active a{color:#ea632f}
.fn-woo .woocommerce-message,.fn-woo .woocommerce-info{border-top-color:#35a83a;border-radius:12px;background:#e8f4e9}
.fn-woo table.shop_table{border-radius:14px;border:1.5px solid #f0e5d8}
.fn-woo .quantity .qty{border:1.5px solid #ece3d6;border-radius:10px;padding:10px}
.fn-woo form .form-row input.input-text,.fn-woo form .form-row textarea{border:1.5px solid #ece3d6;border-radius:10px;padding:11px 13px}

/* ---------- burger (mobile) ---------- */
.fn-burger{background:#fffaf5}
.fn-burger.open{background:#0f172a}
.fn-burger span{background:#0f172a}
.fn-burger.open span{background:#fff}
.fn-burger .b1,.fn-burger .b3{transition:transform .2s}
.fn-burger .b2{transition:opacity .15s}
.fn-burger.open .b1{transform:translateY(7px) rotate(45deg)}
.fn-burger.open .b2{opacity:0}
.fn-burger.open .b3{transform:translateY(-7px) rotate(-45deg)}

@media (min-width:900px){.fn-cols2{columns:2;column-gap:32px}}