/*
 * alcoholblenders.com - Ultra Pure
 * Site stylesheet. Loaded by the ABL Styles plugin on every front-end page.
 * Rev 2 - client edits of 16 Sept 2026 applied.
 *
 * TO RESKIN: change the brand values in :root below. Nothing else needs editing.
 * After editing, bump ABL_STYLES_VER in abl-styles.php - WP Engine serves static
 * assets with a 365-day browser cache and only the version string busts it.
 */

/* ==========================================================================
   alcoholblenders.com — Ultra Pure
   Same structural system as uspalcohol.com so the family reads as one house,
   with a copper accent instead of gold so it is a sibling, not a clone.
   SWAP THE FIVE BRAND VALUES BELOW and the whole page reskins.
   ========================================================================== */
:root{
  --abl-navy:#16293D;      /* headings, dark sections, nav */
  --abl-navy-2:#24405C;    /* secondary navy */
  --abl-copper:#B35C2E;    /* accent, CTA, rules */
  --abl-ink:#1B2430;       /* body copy */
  --abl-mute:#5B6B7C;      /* secondary copy */
  --abl-line:#DCE3EA;
  --abl-panel:#F7F5F2;     /* warm panel — the beverage cue */
  --abl-panel-2:#EFEAE4;
  --abl-white:#FFFFFF;
  --abl-ok:#1B7F4B;
  --abl-warn:#9A6B00;
}
.abl{color:var(--abl-ink);font:16px/1.65 "Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.abl *{box-sizing:border-box}
.abl-wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.abl-sec p a,.abl-note p a,.abl-base a,.abl-faq a{color:var(--abl-copper);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.abl-sec p a:hover,.abl-note p a:hover{color:var(--abl-navy)}

/* --- anchor nav --- */
.abl-nav{position:sticky;top:0;z-index:50;background:var(--abl-navy);border-bottom:3px solid var(--abl-copper)}
.abl-nav .abl-wrap{display:flex;align-items:center;gap:26px;height:60px;overflow-x:auto}
.abl-nav a{color:#D8E2EC;text-decoration:none;font-size:13.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.abl-nav a:hover{color:#fff;border-bottom-color:var(--abl-copper)}
.abl-nav .abl-brand{color:#fff;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin-right:auto}
.abl-nav .abl-brand span{color:var(--abl-copper)}
.abl-nav .abl-tel{color:var(--abl-copper);font-weight:700;font-size:13.5px}

/* --- hero --- */
.abl-hero{background:linear-gradient(160deg,var(--abl-navy) 0%,var(--abl-navy-2) 100%);color:#fff;padding:76px 0 68px}
.abl-hero .abl-eyebrow{color:var(--abl-copper);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin:0 0 14px}
.abl-hero h1{font-size:44px;line-height:1.14;margin:0 0 18px;font-weight:700;letter-spacing:-.02em;color:#fff;max-width:20ch}
.abl-hero h1 em{font-style:normal;color:var(--abl-copper)}
.abl-hero p.abl-sub{font-size:19px;line-height:1.55;color:#C9D6E2;max-width:62ch;margin:0 0 30px}
.abl-btn{display:inline-block;background:var(--abl-copper);color:#fff !important;padding:14px 28px;border-radius:3px;font-weight:700;text-decoration:none;font-size:15px;letter-spacing:.01em;border:2px solid var(--abl-copper)}
.abl-btn:hover{background:#C86D3B;border-color:#C86D3B}
.abl-btn-ghost{display:inline-block;background:transparent;color:#fff !important;padding:14px 28px;border:2px solid rgba(255,255,255,.42);border-radius:3px;font-weight:700;text-decoration:none;font-size:15px;margin-left:10px}
.abl-btn-ghost:hover{border-color:#fff}
.abl-hero .abl-tel-line{margin:18px 0 0;font-size:14px;color:#9FB2C4}
.abl-hero .abl-tel-line a{color:var(--abl-copper);text-decoration:none;font-weight:700}

/* --- section frame --- */
.abl-sec{padding:64px 0;border-bottom:1px solid var(--abl-line)}
.abl-sec.abl-alt{background:var(--abl-panel)}
.abl-sec.abl-dark{background:var(--abl-navy);color:#D8E2EC;border-bottom:none}
.abl-sec.abl-dark h2{color:#fff}
.abl-kicker{color:var(--abl-copper);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin:0 0 10px}
.abl-sec h2{font-size:31px;line-height:1.22;color:var(--abl-navy);margin:0 0 14px;font-weight:700;letter-spacing:-.015em;max-width:26ch}
.abl-sec h2 em{font-style:normal;color:var(--abl-copper)}
.abl-lede{font-size:17.5px;color:var(--abl-mute);max-width:74ch;margin:0 0 30px;line-height:1.6}
.abl-sec.abl-dark .abl-lede{color:#A9BCCD}
.abl-sec h3{font-size:19px;color:var(--abl-navy);margin:26px 0 8px;font-weight:700}
.abl-sec.abl-dark h3{color:#fff}
.abl-sec p{margin:0 0 14px}

/* --- cards --- */
.abl-grid{display:grid;gap:18px}
.abl-grid-3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.abl-grid-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
@media(min-width:900px){.abl-grid-2{grid-template-columns:repeat(2,1fr)}}
.abl-grid-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.abl-card{background:var(--abl-white);border:1px solid var(--abl-line);border-top:4px solid var(--abl-copper);border-radius:4px;padding:24px 24px 26px}
.abl-card h3{margin:0 0 4px;font-size:20px;color:var(--abl-navy)}
.abl-card .abl-mono{font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-size:12.5px;color:var(--abl-copper);letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin:0 0 12px}
.abl-card p{font-size:14.5px;color:var(--abl-mute);margin:0 0 12px}
.abl-card ul{margin:0;padding-left:18px;font-size:14px;color:var(--abl-ink)}
.abl-card li{margin-bottom:5px}

/* --- tables --- */
.abl-tablewrap{overflow-x:auto;border:1px solid var(--abl-line);border-radius:4px;background:#fff}
.abl-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.abl-table th{background:var(--abl-navy);color:#fff;text-align:left;padding:12px 16px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.abl-table td{padding:12px 16px;border-bottom:1px solid var(--abl-line);vertical-align:top}
.abl-table tbody tr:nth-child(even) td{background:var(--abl-panel)}
.abl-table td:first-child{font-weight:600;color:var(--abl-navy)}
.abl-table .abl-num{font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-size:13.5px}
.abl-cap{font-size:13px;color:var(--abl-mute);margin:10px 0 0;font-style:italic}

/* --- callouts --- */
.abl-note{border-left:4px solid var(--abl-copper);background:var(--abl-panel);padding:20px 24px;border-radius:0 4px 4px 0;margin:26px 0}
.abl-note > strong:first-child{color:var(--abl-navy);display:block;margin-bottom:6px;font-size:15.5px}
.abl-note p strong{display:inline;font-size:inherit;color:inherit}
.abl-note p{margin:0 0 10px;font-size:15px}.abl-note p:last-child{margin:0}
.abl-note.abl-flag{border-left-color:#B42318;background:#FDF2F0}
.abl-note.abl-flag > strong:first-child{color:#B42318}

/* --- numbered steps --- */
.abl-steps{counter-reset:s;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.abl-step{counter-increment:s;position:relative;padding-top:44px}
.abl-step::before{content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;font-size:26px;font-weight:700;color:var(--abl-copper);font-family:"SFMono-Regular",Consolas,monospace}
.abl-step h3{margin:0 0 6px;font-size:17px}
.abl-step p{font-size:14.5px;color:var(--abl-mute);margin:0}

/* --- FAQ --- */
.abl-faq details{border-bottom:1px solid var(--abl-line);padding:18px 0}
.abl-faq summary{cursor:pointer;font-weight:700;color:var(--abl-navy);font-size:16.5px;list-style:none;display:flex;gap:14px;align-items:flex-start}
.abl-faq summary::-webkit-details-marker{display:none}
.abl-faq summary::before{content:"+";color:var(--abl-copper);font-weight:700;font-size:20px;line-height:1.1;flex:none}
.abl-faq details[open] summary::before{content:"\2013"}
.abl-faq details > *:not(summary){margin-top:12px;padding-left:28px;font-size:15px;color:var(--abl-mute)}

/* --- CTA / form --- */
.abl-cta{background:var(--abl-navy);color:#fff;padding:68px 0}
.abl-cta h2{color:#fff;font-size:32px;margin:0 0 12px;max-width:24ch}
.abl-cta h2 em{font-style:normal;color:var(--abl-copper)}
.abl-cta p{color:#B4C4D3;font-size:17px;max-width:60ch;margin:0 0 26px}
.abl-formbox{background:#fff;border-radius:5px;padding:30px}
.abl-formbox h3{color:var(--abl-navy);margin:0 0 6px;font-size:20px}
.abl-formbox p.abl-formsub{color:var(--abl-mute);font-size:14.5px;margin:0 0 20px}

/* --- footer --- */
.abl-foot{background:#0F1D2B;color:#8DA2B6;padding:52px 0 30px;font-size:14px}
.abl-foot a{color:#C3D2E0;text-decoration:none}
.abl-foot a:hover{color:var(--abl-copper)}
.abl-foot h4{color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.abl-foot ul{list-style:none;margin:0;padding:0}
.abl-foot li{margin-bottom:8px}
.abl-foot .abl-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:20px;font-size:12.5px;color:#6F869C}

/* --- comparison matrix: highlighted own-product columns --- */
.abl-table th.abl-own{background:#0F2136;position:relative}
.abl-table th.abl-own::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--abl-copper)}
.abl-table td.abl-own{background:#FBF6F1 !important;font-weight:600}
.abl-table td.abl-win{color:var(--abl-ok);font-weight:700}
.abl-table td.abl-lose{color:#B42318}
.abl-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--abl-mute);margin-top:12px}
.abl-legend span{display:flex;align-items:center;gap:6px}
.abl-swatch{width:14px;height:14px;border-radius:3px;display:inline-block;border:1px solid var(--abl-line)}

/* --- the tax cliff diagram --- */
.abl-cliff{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;margin:26px 0;border:1px solid var(--abl-line);border-radius:6px;overflow:hidden}
.abl-cliff .abl-side{padding:24px 26px;background:var(--abl-panel)}
.abl-cliff .abl-side.abl-bad{background:#FDF2F0}
.abl-cliff .abl-mid{background:var(--abl-navy);color:#fff;display:flex;align-items:center;justify-content:center;padding:0 22px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:center;line-height:1.5}
.abl-cliff h4{margin:0 0 6px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--abl-mute)}
.abl-cliff .abl-fig{font-size:30px;font-weight:700;color:var(--abl-navy);line-height:1.1;font-variant-numeric:tabular-nums;margin-bottom:8px}
.abl-cliff .abl-bad .abl-fig{color:#B42318}
.abl-cliff p{font-size:14px;color:var(--abl-mute);margin:0}
@media(max-width:740px){.abl-cliff{grid-template-columns:1fr}.abl-cliff .abl-mid{padding:12px}}

/* --- base picker cards --- */
.abl-base{background:#fff;border:1px solid var(--abl-line);border-radius:5px;padding:0;overflow:hidden;display:flex;flex-direction:column}
.abl-base .abl-head{background:var(--abl-navy);color:#fff;padding:16px 20px;min-height:88px;display:flex;flex-direction:column;justify-content:center}
.abl-base .abl-head .abl-tax{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--abl-copper);font-weight:700;margin-bottom:3px}
.abl-base .abl-head h3{margin:0;font-size:19px;color:#fff}
.abl-base .abl-body{padding:18px 20px 20px;flex:1}
.abl-base dl{margin:0 0 14px;font-size:14px}
.abl-base dt{color:var(--abl-mute);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin-top:10px}
.abl-base dd{margin:2px 0 0;color:var(--abl-ink)}
.abl-base .abl-for{border-top:1px solid var(--abl-line);padding-top:12px;font-size:14px;color:var(--abl-mute)}
.abl-base .abl-for strong{color:var(--abl-navy)}

@media(max-width:780px){
  .abl-hero h1{font-size:32px}
  .abl-sec h2{font-size:25px}
  .abl-sec{padding:46px 0}
  .abl-btn-ghost{margin:10px 0 0;display:block;text-align:center}
}