/*
Theme Name: SoftForBiz Offers
Theme URI: https://softforbiz.com/
Author: SoftForBiz
Description: A simple affiliate offers theme. Each offer is a banner or image with a tracked link. No cart, no checkout.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: softforbiz-offers
*/
:root{--bg:#E8EDEF;--ink:#10202B;--muted:#4A5B66;--tag:#FFD23F;--teal:#0F6E6E;--logo-blue:#1F4A80;--line:#C3CED4;--white:#fff;--wrap:1120px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 "Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-underline-offset:.18em}
a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
h1,h2,h3{font-family:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;line-height:1.1;letter-spacing:-.02em;margin:0 0 .5em}
.sfo-wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.sfo-skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--white);padding:.6rem 1rem;z-index:100}
.sfo-skip:focus{left:0}

.sfo-header{border-bottom:2px solid var(--ink)}
.sfo-header .sfo-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:18px}
.sfo-brand{display:inline-flex;align-items:center;gap:.65rem;font:800 1.5rem "Bricolage Grotesque","Arial Black",system-ui,sans-serif;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.sfo-logo{height:48px;width:auto}
.sfo-nav ul{list-style:none;display:flex;gap:1.5rem;margin:0;padding:0}
.sfo-nav a{color:var(--ink);font-weight:600;text-decoration:none}
.sfo-nav a:hover{text-decoration:underline}

.sfo-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center;padding-block:4rem 3.5rem}
.sfo-hero h1{font-size:clamp(2.3rem,5.2vw,3.7rem);font-weight:800;max-width:15ch}
.sfo-hero p{max-width:46ch;color:var(--muted);font-size:1.15rem}

.sfo-btn{display:inline-block;background:var(--ink);color:var(--white);padding:.75rem 1.25rem;border-radius:4px;font-weight:600;text-decoration:none}
.sfo-btn:hover{background:var(--logo-blue);color:var(--white)}

.sfo-tag{position:relative;background:var(--tag);padding:2.75rem 1.25rem 1.4rem;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%)}
.sfo-tag::before{content:"";position:absolute;top:14px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--ink)}
.sfo-tag .sfo-media{background:var(--white);margin-bottom:1rem}
.sfo-tag-title{font-size:1.35rem;margin-bottom:.4rem}
.sfo-tag p{margin:0 0 .9rem;color:var(--ink)}

.sfo-section{padding-block:2.5rem 4rem}
.sfo-section h2{font-size:1.9rem;margin-bottom:1.25rem}
.sfo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem;list-style:none;margin:0;padding:0}
.sfo-card{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;height:100%}
.sfo-card .sfo-media{background:var(--line)}
.sfo-card-body{padding:1.1rem 1.25rem 1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.sfo-card-title{font-size:1.25rem;margin:0}
.sfo-card-title a{color:var(--ink);text-decoration:none}
.sfo-card-title a:hover{text-decoration:underline}
.sfo-card p{margin:0;color:var(--muted)}
.sfo-card .sfo-btn{margin-top:auto;align-self:flex-start}
.sfo-media{display:block}
.sfo-empty{padding:1.5rem;border:2px dashed var(--line);color:var(--muted)}

.sfo-single{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3rem;padding-block:3.5rem;align-items:start}
.sfo-single h1,.sfo-page h1{font-size:clamp(2rem,4vw,2.8rem)}
.sfo-page{padding-block:3.5rem 4rem}
.sfo-prose{max-width:62ch}
.sfo-prose>*+*{margin-top:1em}
.sfo-note{font-size:.95rem;color:var(--muted);border-left:4px solid var(--tag);padding-left:.9rem;margin-top:1.5rem;max-width:62ch}

.sfo-footer{border-top:2px solid var(--ink);padding-block:2rem 3rem;color:var(--muted);font-size:.95rem}
.sfo-footer p{max-width:70ch;margin:0 0 .6rem}

@media(max-width:780px){
.sfo-hero,.sfo-single{grid-template-columns:1fr;gap:2rem}
.sfo-hero{padding-block:2.5rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}