/*
Theme Name:   Supply & Brand
Theme URI:    https://supplyandbrand.com.au
Author:       Supply & Brand
Description:  Request-a-quote merch catalogue theme for Supply & Brand — Our Merch. Your Brand. Built as a starting template: homepage, category catalogue, and single product layouts with an inline artwork-upload step. Quote-cart and artwork-upload are front-end mockups; wire them up to real cart/upload handling (or a plugin such as WooCommerce + a file-upload add-on) before going live.
Version:      1.0
Requires PHP: 7.4
Text Domain:  supplyandbrand
*/

/* ==========================================================================
   1. Variables & reset
   ========================================================================== */
:root{
  --ink:#231F20;
  --yellow:#FFF200;
  --paper:#FFFEFA;
  --grey:#6E6A63;
  --line:#E8E4D8;
  --white:#FFFFFF;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Poppins',sans-serif;
  font-size:16px;
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:'Sifonn',sans-serif;
  font-weight:400;
  margin:0;
  line-height:1.1;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%; height:auto;}
ul{margin:0; padding:0;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
.wide{max-width:1280px;}

@font-face{
  font-family:'Sifonn';
  src:url('assets/fonts/sifonn_basic.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
/* Sifonn ships as a single display weight — never let the browser fake-bold it */
h1,h2,h3,h4,.logo-word,.btn-primary,.btn-secondary,.cart-btn{
  font-weight:400 !important;
}

/* ==========================================================================
   2. Buttons (shared across every template)
   ========================================================================== */
.btn-primary{
  background:var(--yellow); color:var(--ink); font-size:15px;
  padding:16px 28px; border:2px solid var(--ink); cursor:pointer;
  border-radius:100px; font-family:'Sifonn',sans-serif; display:inline-block;
}
.btn-primary:hover{background:var(--ink); color:var(--yellow);}
.btn-secondary{
  background:transparent; color:var(--ink); font-size:15px;
  padding:16px 28px; border:2px solid var(--ink); cursor:pointer;
  border-radius:100px; font-family:'Sifonn',sans-serif; display:inline-block;
}
.btn-secondary:hover{background:var(--ink); color:var(--yellow); border-color:var(--ink);}

/* ==========================================================================
   3. Site header (header.php) — used on every page
   ========================================================================== */
.hazard{
  height:8px;
  background:repeating-linear-gradient(-45deg, var(--ink) 0 14px, var(--yellow) 14px 28px);
}
.ticker{
  background:var(--ink); color:var(--yellow);
  font-family:'Poppins',sans-serif; font-size:12.5px;
  padding:8px 0; overflow:hidden; white-space:nowrap;
}
.ticker span{padding:0 22px; opacity:.95;}
.ticker span::after{content:"●"; margin-left:22px; font-size:8px; opacity:.6;}

.site-header{background:var(--paper); border-bottom:3px solid var(--ink); position:sticky; top:0; z-index:50;}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.logo-lockup{display:flex; align-items:center; gap:12px;}
.logo-lockup img{height:46px; width:auto;}
.logo-word{font-family:'Sifonn',sans-serif; font-size:21px; line-height:1.05;}
.logo-tag{font-size:10.5px; font-family:'Poppins',sans-serif; color:var(--grey); letter-spacing:.02em;}
.main-nav ul{list-style:none; display:flex; gap:30px; font-size:14.5px; font-weight:600;}
.main-nav a{padding:6px 0; border-bottom:3px solid transparent;}
.main-nav a:hover{border-color:var(--yellow);}
.nav-actions{display:flex; align-items:center; gap:18px;}
.phone{font-family:'Poppins',sans-serif; font-size:13.5px;}
.cart-btn{
  display:flex; align-items:center; gap:8px; background:var(--ink); color:var(--yellow);
  padding:10px 18px; font-size:13.5px; border:2px solid var(--ink);
  border-radius:100px; cursor:pointer; font-family:'Sifonn',sans-serif;
}
.cart-count{
  background:var(--yellow); color:var(--ink); border-radius:50%; width:19px; height:19px;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-family:'Poppins',sans-serif; font-weight:700;
}
.cat-strip{padding:11px 0; border-top:1px solid var(--line); font-size:13px; color:var(--grey); overflow-x:auto;}
.cat-strip ul{display:flex; gap:26px; list-style:none; white-space:nowrap;}
.cat-strip a:hover, .cat-strip a.current{color:var(--ink); font-weight:700;}
.cat-strip a.current{border-bottom:2px solid var(--yellow);}
.breadcrumb{padding:16px 0; font-size:13px; color:var(--grey);}
.breadcrumb a:hover{color:var(--ink); text-decoration:underline;}

/* ==========================================================================
   4. Site footer (footer.php)
   ========================================================================== */
.site-footer{background:var(--paper); color:var(--grey); padding:56px 0 26px; border-top:3px solid var(--ink);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line);}
.foot-logo img{height:34px; margin-bottom:14px;}
.foot-grid p{font-size:13.5px; line-height:1.6; max-width:260px;}
.foot-grid h5{color:var(--ink); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; font-weight:600;}
.foot-grid ul{list-style:none;}
.foot-grid li{margin-bottom:10px; font-size:14px;}
.foot-grid a:hover{color:var(--ink); font-weight:600;}
.foot-bottom{display:flex; justify-content:space-between; padding-top:22px; font-size:12.5px; font-family:'Poppins',sans-serif;}

@media (max-width: 860px){
  .main-nav{display:none;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}