/*
Theme Name: Fiero
Theme URI: https://fiero.uk
Author: Fiero Marketing & Public Relations
Author URI: https://fiero.uk
Description: Custom WordPress theme for Fiero Marketing & Public Relations, built from the Fiero Figma design system. Bespoke marketing site with home, about, services, work, blog and contact templates.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fiero
*/

/* -------------------------------------------------------------------- */
/* 1. Design tokens                                                     */
/* -------------------------------------------------------------------- */
:root{
  /* Brand colours, pulled from the Fiero Figma style guide */
  --color-dark:#0b0309;
  --color-dark-soft:rgba(11,3,9,.7);
  --color-dark-border:rgba(11,3,9,.15);
  --color-dark-border-50:rgba(11,3,9,.5);
  --color-white:#ffffff;
  --color-bg-soft:#f8f8f8;
  --color-accent:#ffe540;

  /* Signature gradient used on hero + feature sections */
  --gradient-fiero:linear-gradient(135deg,#552a82 0%,#9c3a9e 28%,#d6447f 48%,#ef7b3f 72%,#ffd34d 100%);

  /* Type */
  --font-display:'Tilt Warp', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;

  --text-tiny: clamp(0.75rem, 0.7rem + 0.1vw, 0.8125rem);
  --text-small: clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);
  --text-regular: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --text-medium: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --text-h6: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-h5: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-h4: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --text-h3: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
  --text-h2: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --text-h1: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
  --text-h1-lg: clamp(2.5rem, 1.8rem + 3vw, 4rem);

  /* Layout */
  --container-max:1280px;
  --page-padding:64px;
  --section-padding-lg:112px;
  --section-padding-md:80px;
  --radius:8px;
}

@media (max-width:1024px){
  :root{ --page-padding:40px; --section-padding-lg:72px; --section-padding-md:56px; }
}
@media (max-width:640px){
  :root{ --page-padding:20px; --section-padding-lg:56px; --section-padding-md:40px; }
}

/* -------------------------------------------------------------------- */
/* 2. Reset + base                                                      */
/* -------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-regular);
  line-height:1.6;
  color:var(--color-dark);
  background:var(--color-white);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:var(--text-regular); }
:focus-visible{ outline:2px solid var(--color-dark); outline-offset:2px; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.2;
  letter-spacing:0.01em;
  margin:0;
}
h1{ font-size:var(--text-h1); }
h2{ font-size:var(--text-h2); }
h3{ font-size:var(--text-h3); }
h4{ font-size:var(--text-h4); line-height:1.3; }
h5{ font-size:var(--text-h5); line-height:1.4; }
h6{ font-size:var(--text-h6); line-height:1.4; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.container{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--page-padding);
  width:100%;
}
.section{ padding-block:var(--section-padding-lg); }
.section--md{ padding-block:var(--section-padding-md); }
.section--soft{ background:var(--color-bg-soft); }
.section--white{ background:var(--color-white); }
.section--dark{ background:var(--color-dark); color:var(--color-white); }
.section--gradient{ background:var(--gradient-fiero); color:var(--color-white); position:relative; overflow:hidden; }

.accent-bar{ width:49px; height:12px; background:var(--color-accent); border:0; }

.screen-reader-text{
  position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden;
}

/* -------------------------------------------------------------------- */
/* 3. Buttons                                                            */
/* -------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 28px;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-weight:500;
  font-size:var(--text-regular);
  border:1px solid transparent;
  transition:transform .15s ease, opacity .15s ease;
  line-height:1.4;
}
.btn:hover{ opacity:.88; }
.btn:active{ transform:translateY(1px); }
.btn--light{ background:var(--color-white); color:var(--color-dark); border-color:var(--color-white); }
.btn--dark{ background:var(--color-dark); color:var(--color-white); border-color:var(--color-dark); }
.btn--outline-light{ background:transparent; color:var(--color-white); border-color:rgba(255,255,255,.6); }
.btn--outline-dark{ background:transparent; color:var(--color-dark); border-color:var(--color-dark-border-50); }
.btn--block{ width:100%; }

/* -------------------------------------------------------------------- */
/* 4. Site header / navbar                                              */
/* -------------------------------------------------------------------- */
.site-header{
  position:relative;
  z-index:50;
  background:var(--color-white);
  border-bottom:1px solid var(--color-dark-border);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px var(--page-padding);
  max-width:var(--container-max);
  margin-inline:auto;
}
.site-logo{ display:flex; align-items:center; }
.site-logo a{ display:inline-flex; align-items:baseline; gap:2px; }
.site-logo img{ height:32px; width:auto; }
.site-logo__text{
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--color-dark);
  letter-spacing:.01em;
}
.site-logo__dot{ color:var(--color-accent); margin-left:-2px; }
.site-logo--light .site-logo__text,
.site-logo__text--light{ color:var(--color-white); }

.primary-nav{ display:flex; }
.primary-nav ul{ display:flex; align-items:center; gap:32px; list-style:none; }
.primary-nav a{
  font-size:var(--text-regular);
  color:var(--color-dark);
  position:relative;
}
.primary-nav a:hover{ opacity:.65; }
.primary-nav .current-menu-item > a{ font-weight:600; }

.nav-toggle{
  display:none;
  background:none;
  border:none;
  width:40px;
  height:40px;
  position:relative;
}
.nav-toggle span{
  position:absolute; left:8px; right:8px; height:2px; background:var(--color-dark);
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span:nth-child(1){ top:14px; }
.nav-toggle span:nth-child(2){ top:20px; }
.nav-toggle span:nth-child(3){ top:26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .primary-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--color-white);
    border-bottom:1px solid var(--color-dark-border);
    box-shadow:0 12px 24px -12px rgba(11,3,9,.15);
  }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{ flex-direction:column; align-items:flex-start; gap:0; padding:8px var(--page-padding) 24px; }
  .primary-nav li{ width:100%; }
  .primary-nav a{ display:block; padding:12px 0; width:100%; }
}

/* -------------------------------------------------------------------- */
/* 5. Hero / page header banners                                        */
/* -------------------------------------------------------------------- */
.hero{
  background:var(--gradient-fiero);
  color:var(--color-white);
  padding:var(--section-padding-lg) var(--page-padding);
  position:relative;
}
.hero__inner{ max-width:var(--container-max); margin-inline:auto; }
.hero--split{ display:flex; align-items:center; gap:64px; }
.hero__brandmark{ font-family:var(--font-display); font-size:2.75rem; color:var(--color-white); margin-bottom:24px; display:inline-flex; }
.hero__brandmark .site-logo__dot{ color:var(--color-accent); }
.hero__text{ flex:1 1 0; }
.hero__text p{ font-size:var(--text-medium); margin-top:24px; max-width:560px; }
.hero__actions{ margin-top:32px; }
.hero__media{ flex:1 1 0; position:relative; min-height:320px; }
.hero__media .placeholder-block{ position:absolute; }
.hero__media .placeholder-block--main{ inset:0 92px; }
.hero__media .placeholder-block--top{ right:0; top:0; width:38%; aspect-ratio:1/1; }
.hero__media .placeholder-block--bottom{ left:0; bottom:0; width:48%; aspect-ratio:3/2; }

@media (max-width:900px){
  .hero--split{ flex-direction:column; }
  .hero__media{ width:100%; min-height:260px; }
}

.page-banner{
  background:var(--gradient-fiero);
  color:var(--color-white);
  text-align:center;
  padding:var(--section-padding-lg) var(--page-padding);
}
.page-banner__inner{ max-width:768px; margin-inline:auto; }
.page-banner h1{ font-size:var(--text-h1-lg); margin-bottom:24px; }
.page-banner p{ font-size:var(--text-medium); }

/* -------------------------------------------------------------------- */
/* 6. Section title pattern                                             */
/* -------------------------------------------------------------------- */
.section-title{ display:flex; flex-direction:column; gap:16px; }
.section-title--center{ align-items:center; text-align:center; margin-inline:auto; max-width:768px; }
.section-title__tagline{ font-weight:600; font-size:var(--text-regular); }
.section-title h2{ font-size:var(--text-h2); margin-bottom:8px; }
.section-title p{ font-size:var(--text-medium); }
.section-title__icon{ width:80px; height:80px; margin-bottom:8px; }
.section-title__icon svg{ width:100%; height:100%; }

/* -------------------------------------------------------------------- */
/* 7. Media + text split layout                                         */
/* -------------------------------------------------------------------- */
.split{ display:flex; align-items:stretch; }
.split__media{ flex:1 1 0; position:relative; min-height:480px; }
.split__media img,.split__media .placeholder-block{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.split__content{ flex:1 1 0; display:flex; align-items:center; padding:var(--section-padding-lg) var(--page-padding); }
.split__content > div{ max-width:560px; }
.split--reverse{ flex-direction:row-reverse; }
.split--reverse .split__content{ justify-content:flex-end; }

@media (max-width:900px){
  .split{ flex-direction:column; }
  .split--reverse{ flex-direction:column; }
  .split__media{ min-height:280px; }
  .split__content{ padding:48px var(--page-padding); }
}

/* -------------------------------------------------------------------- */
/* 8. Placeholder image block (swap-out art for client photography)     */
/* -------------------------------------------------------------------- */
.placeholder-block{
  background:
    repeating-linear-gradient(135deg, rgba(11,3,9,.05) 0 2px, transparent 2px 14px),
    var(--color-bg-soft);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-dark-soft);
  min-height:200px;
  position:relative;
}
.placeholder-block svg{ width:32px; height:32px; opacity:.35; }
.placeholder-block--square{ aspect-ratio:1/1; }
.placeholder-block--tall{ aspect-ratio:2/3; }
.placeholder-block--wide{ aspect-ratio:16/9; }

/* -------------------------------------------------------------------- */
/* 9. Icon grid (services / lists)                                      */
/* -------------------------------------------------------------------- */
.icon-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.icon-list--2col{ grid-template-columns:repeat(2,1fr); }
.icon-item{ display:flex; flex-direction:column; gap:16px; }
.icon-item__icon{ width:48px; height:48px; }
.icon-item__icon svg{ width:100%; height:100%; }
.icon-item h3,.icon-item h5{ font-size:var(--text-h5); margin-bottom:0; }
.icon-item p{ font-size:var(--text-regular); }
.icon-item ul{ font-size:var(--text-regular); line-height:1.7; list-style:none; padding-left:0; }
.icon-item ul li{ padding-left:1em; position:relative; }
.icon-item ul li::before{ content:"•"; position:absolute; left:0; }
.icon-item--on-dark{ color:var(--color-white); }

@media (max-width:900px){
  .icon-list{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .icon-list,.icon-list--2col{ grid-template-columns:1fr; }
}

/* -------------------------------------------------------------------- */
/* 10. Logo strip                                                       */
/* -------------------------------------------------------------------- */
.logo-strip{ text-align:center; }
.logo-strip p{ font-weight:800; font-size:var(--text-medium); max-width:560px; margin-inline:auto; margin-bottom:32px; }
.logo-strip__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:40px; }
.logo-strip__row span{
  font-family:var(--font-display);
  font-size:1.1rem;
  color:var(--color-dark-soft);
  opacity:.55;
}

/* -------------------------------------------------------------------- */
/* 11. Gallery (Work page)                                              */
/* -------------------------------------------------------------------- */
.gallery{ position:relative; }
.gallery__track{
  display:flex;
  gap:32px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:8px;
  scrollbar-width:none;
}
.gallery__track::-webkit-scrollbar{ display:none; }
.gallery__item{
  flex:0 0 clamp(220px, 32vw, 405px);
  aspect-ratio:1/1;
  scroll-snap-align:start;
}
.gallery__nav{ display:flex; justify-content:center; gap:16px; margin-top:24px; }
.gallery__nav button{
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--color-dark-border-50);
  background:var(--color-bg-soft);
  display:flex; align-items:center; justify-content:center;
}
.gallery__nav button svg{ width:20px; height:20px; }

/* -------------------------------------------------------------------- */
/* 12. Testimonials                                                      */
/* -------------------------------------------------------------------- */
.testimonials__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:48px; }
.testimonial{ display:flex; flex-direction:column; gap:32px; }
.testimonial__stars{ display:flex; gap:4px; color:var(--color-accent); }
.testimonial__stars svg{ width:20px; height:20px; }
.testimonial blockquote{ margin:0; font-family:var(--font-display); font-size:var(--text-h6); line-height:1.4; }
.testimonial__author{ display:flex; align-items:center; gap:16px; }
.testimonial__avatar{ width:56px; height:56px; border-radius:50%; background:var(--color-bg-soft); flex-shrink:0; }
.testimonial__author strong{ display:block; font-weight:600; }
@media (max-width:800px){ .testimonials__grid{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------------- */
/* 13. Blog cards                                                        */
/* -------------------------------------------------------------------- */
.blog-feature{ display:flex; gap:32px; align-items:flex-start; }
.blog-feature__main{ flex:1 1 0; display:flex; flex-direction:column; gap:24px; }
.blog-feature__main .placeholder-block{ aspect-ratio:624/416; }
.blog-feature__list{ flex:1 1 0; display:flex; flex-direction:column; gap:32px; }
.blog-feature__list .blog-card{ flex-direction:row; align-items:center; }
.blog-feature__list .blog-card .placeholder-block{ width:250px; height:250px; flex-shrink:0; aspect-ratio:auto; }

.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px 32px; row-gap:64px; }
.blog-card{ display:flex; flex-direction:column; gap:24px; }
.blog-card .placeholder-block{ aspect-ratio:405/270; }
.blog-card__meta{ display:flex; flex-direction:column; gap:8px; }
.blog-card__category{ font-weight:600; font-size:var(--text-regular); }
.blog-card__title{ font-family:var(--font-display); font-size:var(--text-h5); line-height:1.4; }
.blog-card a{ display:block; }
.blog-card a:hover .blog-card__title{ text-decoration:underline; }
.blog-card__excerpt{ font-size:var(--text-regular); }
.byline{ display:flex; align-items:center; gap:16px; }
.byline__avatar{ width:48px; height:48px; border-radius:50%; background:var(--color-bg-soft); flex-shrink:0; object-fit:cover; }
.byline__meta{ display:flex; flex-direction:column; }
.byline__name{ font-weight:600; font-size:var(--text-regular); }
.byline__sub{ display:flex; gap:8px; align-items:center; font-size:var(--text-small); color:var(--color-dark-soft); }

@media (max-width:900px){
  .blog-feature{ flex-direction:column; }
  .blog-feature__list .blog-card{ flex-direction:column; }
  .blog-feature__list .blog-card .placeholder-block{ width:100%; height:auto; aspect-ratio:405/270; }
  .blog-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .blog-grid{ grid-template-columns:1fr; }
}

.pagination-links{ display:flex; justify-content:space-between; gap:16px; margin-top:64px; font-weight:600; }
.pagination-links a{ padding:12px 20px; border:1px solid var(--color-dark-border); border-radius:var(--radius); }
.pagination-links a:hover{ background:var(--color-bg-soft); }

/* -------------------------------------------------------------------- */
/* 14. Single post                                                       */
/* -------------------------------------------------------------------- */
.post-hero{ background:var(--gradient-fiero); color:var(--color-white); padding:var(--section-padding-md) var(--page-padding); }
.post-hero__inner{ max-width:768px; margin-inline:auto; text-align:center; }
.post-hero__category{ font-weight:600; margin-bottom:16px; display:inline-block; }
.post-hero h1{ font-size:var(--text-h2); margin-bottom:16px; }
.post-hero .byline{ justify-content:center; margin-top:24px; color:var(--color-white); }
.post-hero .byline__avatar{ background:rgba(255,255,255,.3); }

.entry-content{ max-width:720px; margin:0 auto; padding:var(--section-padding-md) var(--page-padding); font-size:var(--text-medium); }
.entry-content p{ margin-bottom:1.4em; }
.entry-content h2{ font-size:var(--text-h3); margin-top:1.6em; margin-bottom:.6em; }
.entry-content h3{ font-size:var(--text-h4); margin-top:1.4em; margin-bottom:.6em; }
.entry-content img{ border-radius:var(--radius); margin:1.6em 0; }
.entry-content ul,.entry-content ol{ padding-left:1.4em; margin-bottom:1.4em; }
.entry-content a{ text-decoration:underline; }
.entry-content blockquote{ border-left:3px solid var(--color-accent); padding-left:24px; font-family:var(--font-display); font-size:var(--text-h6); margin:1.6em 0; }

.post-nav{ display:flex; justify-content:space-between; gap:24px; max-width:720px; margin:0 auto var(--section-padding-md); padding-inline:var(--page-padding); font-weight:600; }
.post-nav a{ flex:1 1 0; }
.post-nav a:hover{ text-decoration:underline; }
.post-nav__next{ text-align:right; }

/* -------------------------------------------------------------------- */
/* 15. Forms (contact page)                                              */
/* -------------------------------------------------------------------- */
.form-field{ margin-bottom:24px; }
.form-field label{ display:block; font-weight:600; font-size:var(--text-regular); margin-bottom:8px; }
.form-field input[type=text],
.form-field input[type=email],
.form-field input[type=tel],
.form-field select,
.form-field textarea{
  width:100%;
  padding:13px 16px;
  border:1px solid var(--color-dark-border-50);
  border-radius:var(--radius);
  background:var(--color-white);
  color:var(--color-dark);
}
.form-field textarea{ min-height:150px; resize:vertical; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{ border-color:var(--color-dark); }
.form-honeypot{ position:absolute; left:-9999px; top:-9999px; }
.form-notice{ padding:16px 20px; border-radius:var(--radius); margin-bottom:24px; font-size:var(--text-regular); }
.form-notice--success{ background:#eafbe9; color:#1c5e21; }
.form-notice--error{ background:#fdeceb; color:#7a2018; }

.contact-info{ display:flex; flex-direction:column; gap:32px; }
.contact-info__item h3{ font-size:var(--text-h6); margin-bottom:8px; }
.contact-info__item p,.contact-info__item a{ font-size:var(--text-regular); }
.contact-info .social-links{ margin-top:8px; }

/* -------------------------------------------------------------------- */
/* 16. Social links + footer                                            */
/* -------------------------------------------------------------------- */
.social-links{ display:flex; gap:12px; }
.social-links a{
  width:24px; height:24px; display:flex; align-items:center; justify-content:center; opacity:.85;
}
.social-links a:hover{ opacity:1; }
.social-links svg{ width:100%; height:100%; }

.site-footer{ background:var(--color-white); padding:var(--section-padding-md) var(--page-padding); }
.site-footer__inner{ max-width:var(--container-max); margin-inline:auto; display:flex; flex-direction:column; gap:80px; }
.site-footer__top{ display:flex; gap:64px; flex-wrap:wrap; }
.site-footer__brand{ flex:1 1 320px; display:flex; flex-direction:column; gap:32px; }
.site-footer__brand .site-logo__text{ font-size:1.75rem; }
.site-footer__tagline{ font-family:var(--font-body); font-weight:700; font-size:1.6rem; line-height:1.35; max-width:540px; }
.site-footer__contact{ display:flex; flex-direction:column; gap:24px; }
.site-footer__contact h4{ font-family:var(--font-body); font-weight:600; font-size:var(--text-regular); margin-bottom:4px; }
.site-footer__contact p,.site-footer__contact a{ font-size:var(--text-small); }
.site-footer__contact a{ text-decoration:underline; }
.site-footer__links{ flex:1 1 320px; display:flex; gap:24px; max-width:400px; }
.site-footer__links nav{ flex:1 1 0; }
.site-footer__links ul{ list-style:none; display:flex; flex-direction:column; }
.site-footer__links a{ display:block; padding:8px 0; font-weight:600; font-size:var(--text-regular); }
.site-footer__links a:hover{ text-decoration:underline; }
.site-footer__credits{ display:flex; flex-direction:column; gap:32px; }
.site-footer__divider{ height:1px; background:var(--color-dark-border); border:0; margin:0; }
.site-footer__row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:var(--text-small); }
.site-footer__legal{ display:flex; gap:24px; }
.site-footer__legal a{ text-decoration:underline; }

@media (max-width:760px){
  .site-footer__top{ flex-direction:column; gap:48px; }
  .site-footer__row{ flex-direction:column; }
}

/* -------------------------------------------------------------------- */
/* 17. 404 + misc pages                                                  */
/* -------------------------------------------------------------------- */
.error-404{ text-align:center; padding:var(--section-padding-lg) var(--page-padding); max-width:600px; margin-inline:auto; }
.error-404 h1{ font-size:var(--text-h1-lg); margin-bottom:16px; }
.error-404 .btn{ margin-top:32px; }

.generic-page__header{ padding:64px var(--page-padding) 0; max-width:768px; margin-inline:auto; text-align:center; }
.generic-page__content{ max-width:720px; margin-inline:auto; padding:48px var(--page-padding) var(--section-padding-lg); font-size:var(--text-medium); }
.generic-page__content h2{ font-size:var(--text-h3); margin:1.4em 0 .6em; }