/*
Theme Name: Find Nutrition
Theme URI: https://find-nutrition.co.uk/
Author: Brace Creative Agency
Author URI: https://brace.co.uk/
Description: Custom theme for Find Nutrition — personalised macro tracking & fuelling app. Classic PHP theme with pixel-for-pixel custom page templates (home, affiliate program, newsroom, contact, privacy, terms). Contact Form 7 ready.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: find-nutrition
*/

/* =========================================================================
   SHARED CHROME
   Loaded on every page. Individual page templates carry their own
   page-specific CSS inline; this file holds only what is common to all:
   fonts, brand tokens, base reset, buttons, the fixed nav and the footer.
   ========================================================================= */

/* ---------- LOCAL FONT: Albra (serif accent) ---------- */
@font-face{
  font-family:'Albra';
  src:url('assets/fonts/RL-Albra-Light.woff2') format('woff2'),
      url('assets/fonts/RL-Albra-Light.otf') format('opentype');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Albra';
  src:url('assets/fonts/RL-Albra-Light-Italic.woff2') format('woff2'),
      url('assets/fonts/RL-Albra-Light-Italic.otf') format('opentype');
  font-weight:300;font-style:italic;font-display:swap;
}

/* ---------- BRAND TOKENS ---------- */
:root{
  --ink:#1a1614; --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --deep:#b5451f; --main:#e97050; --soft:#f4c9b3; --soft2:#fbe4d8;
  --pale:#faf2ec; --bink:#2c1a12; --bmute:#9c8579;
  --radius:22px; --pad-x:clamp(24px,6vw,90px);
}

/* ---------- BASE RESET ---------- */
*{box-sizing:border-box;margin:0;padding:0}
a{text-decoration:none}
img{max-width:100%}
body{
  font-family:"Albert Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;
  background:#ffffff;min-height:100vh;display:flex;flex-direction:column;padding:10px;
}

/* ---------- BUTTONS ---------- */
.btn{
  font:inherit;font-size:13px;font-weight:500;cursor:pointer;border:none;
  padding:12px 22px;border-radius:12px;text-decoration:none;display:inline-block;
  letter-spacing:.03em;transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn-light{background:#fff;color:#161311;box-shadow:0 6px 16px -8px rgba(0,0,0,.3)}
.btn-dark{background:#272628;color:#fff}
.btn-dark:hover{background:#161311}
.btn-lg{font-size:15px;padding:15px 30px;border-radius:14px}

/* ---------- SHARED SECTION HEADERS ---------- */
.sec-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#b89080;margin-bottom:12px;}
.sec-title{font-size:clamp(28px,4vw,48px);font-weight:500;letter-spacing:-.03em;line-height:1.05;color:#2c1a12;max-width:20ch;}

/* ---------- NAV ---------- */
.ss-header{position:fixed;top:30px;left:10px;right:10px;z-index:200;font-family:"Albert Sans",sans-serif}
.ss-main .in{
  position:relative;max-width:1320px;margin:0 auto;
  padding:9px 12px 9px 24px;display:flex;align-items:center;gap:16px;border-radius:52px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 8px 30px -12px rgba(60,30,10,.28);
}
.ss-brand{color:#272628;font-family:"Albert Sans",sans-serif;font-weight:550;font-size:18px;letter-spacing:-.01em}
.ss-nav{display:inline-flex;align-items:center;gap:10px;margin-left:auto}
.ss-nav a{
  color:#3a3638;font-size:15px;font-weight:400;
  display:inline-flex;align-items:center;gap:5px;padding:9px 16px;border-radius:30px;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.ss-nav a .car{font-size:8px;opacity:.6}
.ss-nav a:hover{color:#272628;background:rgba(0,0,0,.06)}
.ss-nav a.active,.ss-nav a.active:hover{background:rgba(0,0,0,.08);color:#272628}
.ss-quote{
  border:none;color:#fff;font-weight:450;font-size:13px;
  padding:11px 22px;border-radius:88px;background:#272628;cursor:pointer;
  display:inline-block;transition:.3s var(--ease);
}
.ss-quote:hover{background:#000;transform:translateY(-1px)}
.ss-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto}
.ss-burger span{width:24px;height:2px;background:#272628}

/* ---------- FOOTER ---------- */
.site-footer{margin-top:10px;border-radius:16px;background:#2c1a12;color:#fff;padding:clamp(48px,6vw,72px) clamp(28px,6vw,72px) clamp(28px,4vw,40px);}
.footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer-brand{max-width:320px}
.footer-brand .name{font-size:22px;font-weight:600;letter-spacing:-.01em;margin-bottom:12px}
.footer-brand p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.55)}
.footer-cols{display:flex;gap:clamp(40px,7vw,90px);flex-wrap:wrap}
.footer-col h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:18px;font-weight:600}
.footer-col a{display:block;color:rgba(255,255,255,.78);font-size:15px;margin-bottom:12px;transition:color .2s ease}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:13px;color:rgba(255,255,255,.4);}
.footer-bottom .fb-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-bottom a{color:rgba(255,255,255,.4);transition:color .2s ease}
.footer-bottom a:hover{color:rgba(255,255,255,.8)}
@media(max-width:640px){.footer-top{flex-direction:column;gap:36px}.footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}}

/* ---------- NAV RESPONSIVE ---------- */
@media(max-width:900px){
  .ss-nav,.ss-quote{display:none}
  .ss-burger{display:flex}
  .ss-main .in{padding:8px 16px 8px 22px}
  .ss-header{left:16px;right:16px}
  .ss-main.open .ss-brand{display:none}
  .ss-main.open .ss-nav{display:inline-flex}
  .ss-main.open .ss-quote{display:inline-block}
  .ss-main.open .ss-burger{margin-left:0}
  .ss-main.open .ss-nav a{font-size:13px;padding:7px 10px}
  .ss-main.open .ss-quote{font-size:12px;padding:9px 14px}
}