/*
Theme Name: SFS Pallets
Theme URI: https://sfspallets.co.za
Author: SFS Pallets
Author URI: https://sfspallets.co.za
Description: A modern industrial WordPress theme for second-hand, recycled and custom pallet suppliers. Built for lead generation via quotes, WhatsApp and phone calls, with local SEO landing pages for Gauteng service areas.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sfs-pallets
Tags: e-commerce, custom-menu, featured-images, threaded-comments, translation-ready, one-column, two-columns, right-sidebar, custom-colors, custom-logo, sticky-post
*/

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */
:root{
  /* Industrial / wood palette */
  --sfs-wood-900:#2b1d10;
  --sfs-wood-700:#4a3320;
  --sfs-wood-500:#7a5230;
  --sfs-wood-300:#b98a54;
  --sfs-wood-100:#f0e0c8;

  --sfs-ink-900:#14181c;
  --sfs-ink-700:#2a3238;
  --sfs-ink-500:#525f68;
  --sfs-ink-300:#9aa5ab;

  --sfs-steel-900:#1c2b33;
  --sfs-steel-700:#2e4650;

  --sfs-white:#ffffff;
  --sfs-off-white:#f7f5f1;

  /* Almond - replaces the near-black "raisin black" tone on the footer and hero */
  --sfs-almond:#e9d7c7;
  --sfs-almond-text:#2b1d10;

  --sfs-accent:#e08a2c;       /* CTA orange - industrial / hazard-adjacent */
  --sfs-accent-dark:#b76a17;
  --sfs-whatsapp:#25d366;
  --sfs-whatsapp-dark:#1ea952;

  --sfs-success:#2f8f4e;
  --sfs-danger:#c0392b;

  --sfs-radius-sm:4px;
  --sfs-radius-md:8px;
  --sfs-radius-lg:16px;

  --sfs-shadow-sm:0 1px 3px rgba(20,24,28,.08);
  --sfs-shadow-md:0 6px 20px rgba(20,24,28,.12);
  --sfs-shadow-lg:0 14px 40px rgba(20,24,28,.18);

  --sfs-container:1220px;
  --sfs-header-h:76px;
  --sfs-mobile-bar-h:60px;

  --sfs-font-heading:"Barlow Condensed","Arial Narrow",sans-serif;
  --sfs-font-body:"Inter","Segoe UI",Arial,sans-serif;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--sfs-font-body);
  color:var(--sfs-ink-900);
  background:var(--sfs-off-white);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
  padding-bottom:var(--sfs-mobile-bar-h);
}
@media (min-width:900px){ body{ padding-bottom:0; } }

img{max-width:100%;height:auto;display:block;}
a{color:var(--sfs-steel-900);text-decoration:none;}
a:hover{color:var(--sfs-accent-dark);}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;font-size:1rem;}

h1,h2,h3,h4{
  font-family:var(--sfs-font-heading);
  font-weight:700;
  letter-spacing:.3px;
  color:var(--sfs-ink-900);
  line-height:1.15;
  margin:0 0 .5em;
}
h1{font-size:clamp(2rem,5vw,3.2rem);text-transform:uppercase;}
h2{font-size:clamp(1.5rem,3.4vw,2.3rem);text-transform:uppercase;}
h3{font-size:1.3rem;}

.sfs-container{max-width:var(--sfs-container);margin:0 auto;padding:0 20px;}
.sfs-section{padding:64px 0;}
.sfs-section--alt{background:var(--sfs-white);}
.sfs-section--dark{background:var(--sfs-almond);color:var(--sfs-ink-700);}
.sfs-section--dark h2,.sfs-section--dark h3{color:var(--sfs-almond-text);}
.sfs-eyebrow{
  display:inline-block;color:var(--sfs-accent-dark);font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;font-size:.8rem;margin-bottom:8px;
}
.sfs-section-head{max-width:720px;margin:0 0 36px;}
.sfs-section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* Screen-reader only */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--sfs-accent);color:#fff;
  padding:10px 16px;z-index:100000;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0;}

/* Focus states for accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--sfs-accent);outline-offset:2px;
}

/* ==========================================================================
   3. BUTTONS / CTAs
   ========================================================================== */
.sfs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--sfs-radius-sm);font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;font-size:.92rem;border:2px solid transparent;
  transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease;
  min-height:48px;
}
.sfs-btn:active{transform:translateY(1px);}
.sfs-btn-primary{background:var(--sfs-accent);color:#fff;box-shadow:var(--sfs-shadow-sm);}
.sfs-btn-primary:hover{background:var(--sfs-accent-dark);color:#fff;}
.sfs-btn-whatsapp{background:var(--sfs-whatsapp);color:#fff;}
.sfs-btn-whatsapp:hover{background:var(--sfs-whatsapp-dark);color:#fff;}
.sfs-btn-outline{background:transparent;border-color:currentColor;color:inherit;}
.sfs-btn-outline:hover{background:rgba(255,255,255,.08);}
.sfs-btn-dark{background:var(--sfs-ink-900);color:#fff;}
.sfs-btn-dark:hover{background:var(--sfs-steel-900);color:#fff;}
.sfs-btn-sm{padding:9px 16px;font-size:.8rem;min-height:auto;}
.sfs-btn-block{width:100%;}
.sfs-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;}

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.sfs-topbar{background:var(--sfs-ink-900);color:var(--sfs-off-white);font-size:.85rem;}
.sfs-topbar .sfs-container{display:flex;justify-content:space-between;align-items:center;padding-top:6px;padding-bottom:6px;flex-wrap:wrap;gap:6px;}
.sfs-topbar a{color:var(--sfs-off-white);}
.sfs-topbar a:hover{color:var(--sfs-accent);}
.sfs-topbar-contact{display:flex;gap:18px;flex-wrap:wrap;}

.sfs-header{
  position:sticky;top:0;z-index:999;background:var(--sfs-white);
  box-shadow:var(--sfs-shadow-sm);
}
.sfs-header .sfs-container{
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--sfs-header-h);gap:20px;
}
.sfs-logo{display:flex;align-items:center;gap:10px;font-family:var(--sfs-font-heading);font-weight:700;font-size:1.5rem;color:var(--sfs-ink-900);}
.sfs-logo img{max-height:52px;width:auto;}

.sfs-primary-nav{display:none;}
@media (min-width:1024px){
  .sfs-primary-nav{display:flex;align-items:center;gap:26px;}
  .sfs-primary-nav ul{display:flex;gap:22px;}
  .sfs-primary-nav a{font-weight:600;font-size:.95rem;text-transform:uppercase;letter-spacing:.3px;color:var(--sfs-ink-700);}
  .sfs-primary-nav a:hover{color:var(--sfs-accent-dark);}
}

.sfs-header-cta{display:flex;align-items:center;gap:10px;}
.sfs-header-cta .sfs-btn{padding:11px 16px;font-size:.8rem;}
.sfs-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--sfs-off-white);
}
@media (max-width:1023px){
  .sfs-header-cta .sfs-btn-label{display:none;}
}

.sfs-menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:none;border:none;
}
@media (min-width:1024px){ .sfs-menu-toggle{display:none;} }
.sfs-menu-toggle span,.sfs-menu-toggle span::before,.sfs-menu-toggle span::after{
  content:"";display:block;width:24px;height:3px;background:var(--sfs-ink-900);border-radius:2px;
  position:relative;transition:.2s;
}
.sfs-menu-toggle span::before{position:absolute;top:-8px;}
.sfs-menu-toggle span::after{position:absolute;top:8px;}

.sfs-mobile-nav{
  position:fixed;inset:0 0 0 auto;width:min(320px,86vw);height:100vh;background:var(--sfs-white);
  transform:translateX(100%);transition:transform .25s ease;z-index:1100;overflow-y:auto;
  box-shadow:var(--sfs-shadow-lg);
}
.sfs-mobile-nav.is-open{transform:translateX(0);}
.sfs-mobile-nav-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid #eee;}
.sfs-mobile-nav ul{padding:10px 0;}
.sfs-mobile-nav a{display:block;padding:14px 20px;font-weight:600;border-bottom:1px solid #f1efeb;}
.sfs-mobile-nav-cta{padding:20px;display:flex;flex-direction:column;gap:10px;}
.sfs-nav-overlay{position:fixed;inset:0;background:rgba(20,24,28,.5);z-index:1050;opacity:0;pointer-events:none;transition:opacity .2s;}
.sfs-nav-overlay.is-open{opacity:1;pointer-events:auto;}

/* Sticky mobile bottom bar */
.sfs-mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;display:flex;
  background:var(--sfs-ink-900);height:var(--sfs-mobile-bar-h);
}
@media (min-width:900px){ .sfs-mobile-bar{display:none;} }
.sfs-mobile-bar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:#fff;font-size:.72rem;font-weight:700;text-transform:uppercase;
}
.sfs-mobile-bar a:nth-child(2){background:var(--sfs-whatsapp);}
.sfs-mobile-bar a:nth-child(3){background:var(--sfs-accent);}

/* ==========================================================================
   5. HERO
   ========================================================================== */
.sfs-hero{
  position:relative;background:var(--sfs-almond);
  color:var(--sfs-almond-text);overflow:hidden;padding:70px 0 90px;
}
.sfs-hero::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg,rgba(43,29,16,.05) 0 2px,transparent 2px 40px);
  pointer-events:none;
}
.sfs-hero-grid{display:grid;gap:40px;position:relative;z-index:1;}
@media (min-width:900px){ .sfs-hero-grid{grid-template-columns:1.1fr .9fr;align-items:center;} }
.sfs-hero-eyebrow{color:var(--sfs-wood-700);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:.85rem;}
.sfs-hero h1{color:var(--sfs-almond-text);margin-bottom:.4em;}
.sfs-hero p{font-size:1.15rem;color:var(--sfs-ink-700);max-width:60ch;}
.sfs-hero-media{border-radius:var(--sfs-radius-lg);overflow:hidden;box-shadow:var(--sfs-shadow-lg);}
.sfs-hero-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.sfs-hero-trustbar{display:flex;flex-wrap:wrap;gap:22px;margin-top:34px;color:var(--sfs-ink-700);font-size:.85rem;}
.sfs-hero-trustbar span{display:flex;align-items:center;gap:6px;}

/* ==========================================================================
   6. CARDS / GRIDS
   ========================================================================== */
.sfs-grid{display:grid;gap:24px;}
.sfs-grid-2{grid-template-columns:1fr;}
.sfs-grid-3{grid-template-columns:1fr;}
.sfs-grid-4{grid-template-columns:1fr;}
@media (min-width:640px){
  .sfs-grid-2{grid-template-columns:repeat(2,1fr);}
  .sfs-grid-3{grid-template-columns:repeat(2,1fr);}
  .sfs-grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1024px){
  .sfs-grid-3{grid-template-columns:repeat(3,1fr);}
  .sfs-grid-4{grid-template-columns:repeat(4,1fr);}
}

.sfs-card{
  background:var(--sfs-white);border-radius:var(--sfs-radius-md);overflow:hidden;
  box-shadow:var(--sfs-shadow-sm);border:1px solid #ece8e0;
  display:flex;flex-direction:column;transition:box-shadow .15s ease,transform .15s ease;
}
.sfs-card:hover{box-shadow:var(--sfs-shadow-md);transform:translateY(-3px);}
.sfs-card-media{aspect-ratio:16/10;overflow:hidden;background:var(--sfs-wood-100);}
.sfs-card-media img{width:100%;height:100%;object-fit:cover;}
.sfs-card-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1;}
.sfs-card-body h3{margin-bottom:0;}
.sfs-card-body p{margin:0;color:var(--sfs-ink-500);font-size:.95rem;flex:1;}
.sfs-card-tag{
  display:inline-block;align-self:flex-start;background:var(--sfs-wood-100);color:var(--sfs-wood-700);
  padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:700;text-transform:uppercase;
}
.sfs-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}

.sfs-icon-card{padding:26px 22px;text-align:left;}
.sfs-icon-card .sfs-icon{
  width:52px;height:52px;border-radius:var(--sfs-radius-md);background:var(--sfs-wood-100);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:1.5rem;
}
.sfs-section--dark .sfs-icon-card{background:rgba(43,29,16,.05);border-color:rgba(43,29,16,.12);}

/* Steps */
.sfs-steps{counter-reset:sfs-step;}
.sfs-step{position:relative;padding-left:56px;}
.sfs-step::before{
  counter-increment:sfs-step;content:counter(sfs-step);
  position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  background:var(--sfs-accent);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-family:var(--sfs-font-heading);font-size:1.2rem;
}

/* FAQ accordion */
.sfs-faq-item{border-bottom:1px solid #e6e1d8;}
.sfs-faq-q{
  width:100%;text-align:left;background:none;border:none;padding:18px 0;
  display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:1.02rem;
  color:var(--sfs-ink-900);
}
.sfs-faq-q::after{content:"+";font-size:1.4rem;color:var(--sfs-accent-dark);transition:transform .2s;}
.sfs-faq-item.is-open .sfs-faq-q::after{transform:rotate(45deg);}
.sfs-faq-a{max-height:0;overflow:hidden;color:var(--sfs-ink-500);transition:max-height .25s ease;}
.sfs-faq-item.is-open .sfs-faq-a{padding-bottom:18px;}

/* Service area chip list */
.sfs-area-chips{display:flex;flex-wrap:wrap;gap:10px;}
.sfs-area-chips a{
  background:var(--sfs-white);border:1px solid #e6e1d8;padding:9px 16px;border-radius:999px;
  font-weight:600;font-size:.88rem;
}
.sfs-area-chips a:hover{border-color:var(--sfs-accent);color:var(--sfs-accent-dark);}

/* Breadcrumbs */
.sfs-breadcrumbs{font-size:.85rem;color:var(--sfs-ink-500);padding:14px 0;}
.sfs-breadcrumbs a{color:var(--sfs-ink-500);}
.sfs-breadcrumbs a:hover{color:var(--sfs-accent-dark);}

/* Page header (inner pages) */
.sfs-page-header{background:var(--sfs-ink-900);color:#fff;padding:48px 0;}
.sfs-page-header h1{color:#fff;margin:0;}
.sfs-page-header p{color:#d8d6d1;max-width:70ch;margin-top:10px;}

/* ==========================================================================
   7. FORMS
   ========================================================================== */
.sfs-form-wrap{background:var(--sfs-white);border-radius:var(--sfs-radius-md);padding:30px;box-shadow:var(--sfs-shadow-sm);border:1px solid #ece8e0;}
.sfs-form-row{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px;}
@media (min-width:640px){ .sfs-form-row.two{grid-template-columns:1fr 1fr;} .sfs-form-row.three{grid-template-columns:1fr 1fr 1fr;} }
.sfs-field label{display:block;font-weight:700;font-size:.85rem;margin-bottom:6px;color:var(--sfs-ink-700);}
.sfs-field input[type=text],.sfs-field input[type=email],.sfs-field input[type=tel],
.sfs-field input[type=date],.sfs-field input[type=number],.sfs-field select,.sfs-field textarea{
  width:100%;padding:12px 14px;border:1px solid #d8d3c9;border-radius:var(--sfs-radius-sm);
  background:var(--sfs-off-white);
}
.sfs-field textarea{min-height:110px;resize:vertical;}
.sfs-field-check{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;}
.sfs-field-check input{margin-top:4px;}
.sfs-form-msg{padding:14px 16px;border-radius:var(--sfs-radius-sm);margin-bottom:16px;font-weight:600;}
.sfs-form-msg.success{background:#e7f6ec;color:var(--sfs-success);}
.sfs-form-msg.error{background:#fbeae7;color:var(--sfs-danger);}
.sfs-hp-field{position:absolute!important;left:-9999px!important;top:-9999px;}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.sfs-footer{background:var(--sfs-almond);color:var(--sfs-ink-700);padding:56px 0 20px;}
.sfs-footer h4{color:var(--sfs-almond-text);font-size:1rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px;}
.sfs-footer a{color:var(--sfs-ink-700);}
.sfs-footer a:hover{color:var(--sfs-accent-dark);}
.sfs-footer-grid{display:grid;gap:32px;grid-template-columns:1fr;}
@media (min-width:768px){ .sfs-footer-grid{grid-template-columns:2fr 1fr 1fr 1.2fr;} }
.sfs-footer-grid li{margin-bottom:8px;}
.sfs-footer-bottom{
  border-top:1px solid rgba(43,29,16,.15);margin-top:40px;padding-top:20px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.82rem;color:var(--sfs-ink-500);
}
.sfs-footer-social{display:flex;gap:12px;margin-top:10px;}
.sfs-footer-social a{
  width:38px;height:38px;border-radius:50%;background:rgba(43,29,16,.08);color:var(--sfs-almond-text);
  display:flex;align-items:center;justify-content:center;
}

/* ==========================================================================
   9. SINGLE PRODUCT / ARCHIVE
   ========================================================================== */
.sfs-product-hero{display:grid;gap:30px;grid-template-columns:1fr;}
@media (min-width:900px){ .sfs-product-hero{grid-template-columns:1fr 1fr;align-items:start;} }
.sfs-spec-table{width:100%;border-collapse:collapse;margin:20px 0;}
.sfs-spec-table th,.sfs-spec-table td{text-align:left;padding:10px 12px;border-bottom:1px solid #e6e1d8;font-size:.92rem;}
.sfs-spec-table th{width:40%;color:var(--sfs-ink-500);font-weight:600;}
.sfs-price-tag{font-family:var(--sfs-font-heading);font-size:1.6rem;color:var(--sfs-wood-700);font-weight:700;}
.sfs-condition-badge{
  display:inline-block;background:var(--sfs-wood-100);color:var(--sfs-wood-700);padding:4px 12px;
  border-radius:999px;font-size:.75rem;font-weight:700;text-transform:uppercase;
}
.sfs-filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px;background:var(--sfs-white);
  padding:16px;border-radius:var(--sfs-radius-md);border:1px solid #ece8e0;}
.sfs-filter-bar select{padding:9px 10px;border:1px solid #d8d3c9;border-radius:var(--sfs-radius-sm);}

/* Quote cart bar */
.sfs-quotecart-bar{
  position:fixed;bottom:var(--sfs-mobile-bar-h);left:0;right:0;background:var(--sfs-wood-700);color:#fff;
  padding:12px 20px;display:none;align-items:center;justify-content:space-between;z-index:998;gap:12px;flex-wrap:wrap;
}
.sfs-quotecart-bar.is-visible{display:flex;}
@media (min-width:900px){ .sfs-quotecart-bar{bottom:0;} }

/* Utility */
.sfs-mt-0{margin-top:0;}
.sfs-text-center{text-align:center;}
.sfs-muted{color:var(--sfs-ink-500);}