/*
Theme Name: Fine Web
Theme URI: https://finewebdesign.co.uk
Author: JM Web Solutions for BWAR
Description: Custom theme for Fine Web Design. Hand written templates and CSS driven by ACF fields. No page builder, no builder templates.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: fineweb
*/

/* ---------------------------------------------------------------
   Design tokens, measured off the live site element by element so
   the rebuild lines up with it. Font stacks and the families loaded
   in functions.php mirror the live ones exactly, which is what makes
   the text wrap on the same words and the buttons come out the same
   width.
   --------------------------------------------------------------- */
:root {
  --fw-black: #000;
  --fw-ink: #151316;
  --fw-grey: #ededed;
  --fw-white: #fff;
  --fw-magenta: #ff00ff;
  --fw-muted: #8c8c8c;
  --fw-rule: #333;

  --fw-row-max: 1240px;
  --fw-row-width: 80%;
  --fw-gutter: 5.5%;

  --fw-heading: Poppins, Helvetica, Arial, Lucida, sans-serif;
  --fw-body: Raleway, Helvetica, Arial, Lucida, sans-serif;
  --fw-alt: Roboto, Helvetica, Arial, Lucida, sans-serif;
  --fw-lato: Lato, Helvetica, Arial, Lucida, sans-serif;

  --fw-header-h: 112px;
  --fw-logo-h: 67px;
  --fw-panel-w: 320px;
}

/* --- reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fw-black);
  color: var(--fw-ink);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}
img { max-width: 100%; height: auto; border: 0; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* --- typography ---------------------------------------------- */
h1 {
  font-family: var(--fw-heading);
  font-size: 70px;
  line-height: 84px;
  font-weight: 700;
  color: var(--fw-ink);
  padding-bottom: 10px;
  max-width: 890px;
}
h2 {
  font-family: var(--fw-heading);
  font-size: 68px;
  line-height: 81.6px;
  font-weight: 700;
  padding-bottom: 10px;
}
h3 {
  font-family: var(--fw-heading);
  font-size: 25px;
  line-height: 35px;
  font-weight: 800;
  padding-bottom: 10px;
}
.fw-eyebrow {
  font-family: var(--fw-body);
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fw-ink);
  padding-bottom: 10px;
}
.fw-lede {
  font-family: var(--fw-body);
  font-size: 16px;
  line-height: 28.8px;
  color: var(--fw-ink);
}

/* --- layout --------------------------------------------------- */
.fw-section { padding: 4% 0; }
.fw-section--grey { background: var(--fw-grey); }
.fw-section--white { background: var(--fw-white); }
.fw-section--black { background: var(--fw-black); color: var(--fw-white); }
.fw-section--cta { padding: 6vw 0; background: var(--fw-black); }

.fw-row {
  width: var(--fw-row-width);
  max-width: var(--fw-row-max);
  margin: 0 auto;
  padding: 2% 0;
}
.fw-row--flush { padding: 0; }
/* The footer heading sits on a wider row than the rest of the content. */
.fw-row--wide { width: 90%; max-width: none; }

.fw-cols { display: flex; flex-wrap: wrap; }
.fw-cols > * { margin-right: var(--fw-gutter); }
.fw-cols > *:last-child { margin-right: 0; }
.fw-col--2-5 { width: 36.7%; }
.fw-col--3-5 { width: 57.8%; }
.fw-col--1-3 { width: 29.6667%; }
.fw-col--1-2 { width: 47.25%; }

/* --- buttons -------------------------------------------------- */
.fw-btn {
  display: inline-block;
  font-family: var(--fw-body);
  font-size: 14px;
  line-height: 23.8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 16px 24px;
  border-radius: 100px;
  border: 0 solid var(--fw-black);
  background: var(--fw-black);
  color: var(--fw-white);
  transition: opacity .2s ease;
}
.fw-btn:hover { opacity: .85; }
.fw-btn--outline {
  background: transparent;
  color: var(--fw-ink);
  border: 1px solid var(--fw-ink);
}
.fw-btn--solid-ink { background: var(--fw-ink); color: var(--fw-white); border: 0; }
.fw-btn--on-black {
  background: transparent;
  color: var(--fw-white);
  border: 1px solid var(--fw-white);
}

/* --- site header ---------------------------------------------- */
.fw-shift { transition: transform .4s cubic-bezier(.4,0,.2,1); }
body.fw-menu-open .fw-shift { transform: translateX(calc(var(--fw-panel-w) * -1)); }

.fw-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--fw-header-h);
  background: var(--fw-black);
  z-index: 100;
}
/* The live header runs almost the full width, not inside the content row. */
.fw-header__inner {
  height: 100%;
  padding: 0 32px 0 33px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fw-logo img { height: var(--fw-logo-h); width: auto; }
.fw-header__spacer { height: var(--fw-header-h); background: var(--fw-black); }

.fw-toggle {
  width: 32px; height: 32px;
  border: 2px solid var(--fw-white);
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  padding: 0;
}
.fw-toggle span { display: block; width: 14px; height: 2px; background: var(--fw-white); }

/* --- slide in menu ------------------------------------------- */
.fw-panel {
  position: fixed;
  top: 0; right: 0;
  width: var(--fw-panel-w);
  height: 100%;
  background: var(--fw-black);
  z-index: 200;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  padding: 0 0 0 38px;
  overflow-y: auto;
}
body.fw-menu-open .fw-panel { transform: translateX(0); }

.fw-panel__top {
  height: var(--fw-header-h);
  display: flex;
  align-items: center;
  gap: 18px;
}
.fw-panel__social { display: flex; gap: 16px; align-items: center; }
.fw-panel__social a { color: var(--fw-white); display: inline-flex; }
.fw-panel__social svg { width: 19px; height: 19px; fill: currentColor; }

.fw-close {
  color: var(--fw-magenta);
  font-size: 26px;
  line-height: 1;
  margin-left: -20px;
  margin-right: 8px;
  padding: 4px;
}

.fw-panel__menu { list-style: none; margin: 0; padding: 26px 0 0; }
.fw-panel__menu li a {
  display: block;
  font-family: var(--fw-heading);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fw-white);
  padding: 20px 0;
  line-height: 1;
}
.fw-panel__menu li.current-menu-item > a,
.fw-panel__menu li.current_page_item > a { color: var(--fw-magenta); }
.fw-panel__menu li a:hover { color: var(--fw-magenta); }

.fw-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 150;
}
body.fw-menu-open .fw-overlay { opacity: 1; visibility: visible; }

/* --- hero ----------------------------------------------------- */
.fw-hero__image { width: 100%; }
.fw-hero__actions { margin-top: 31px; }

/* --- pricing -------------------------------------------------- */
/* Cards share a height and the buttons line up along the bottom, which is how
   the live packages read even though their feature lists differ in length. */
.fw-tier {
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
}
.fw-tier--featured { border: 2px solid var(--fw-rule); }
.fw-tier__name {
  font-family: var(--fw-heading);
  font-size: 19px;
  line-height: 26.6px;
  font-weight: 700;
  color: var(--fw-ink);
  padding-bottom: 10px;
}
.fw-tier__price {
  font-family: var(--fw-heading);
  font-size: 49px;
  line-height: 68.6px;
  font-weight: 700;
  color: var(--fw-ink);
  padding-bottom: 10px;
}
.fw-tier__note {
  font-family: var(--fw-alt);
  font-size: 16px;
  line-height: 25.6px;
  color: var(--fw-muted);
}
.fw-tier__desc {
  font-family: var(--fw-alt);
  font-size: 16px;
  line-height: 25.6px;
  color: var(--fw-ink);
  margin-top: 26px;
}
.fw-tier__features {
  font-family: var(--fw-alt);
  font-size: 16px;
  line-height: 26px;
  color: var(--fw-ink);
  list-style: disc;
  padding: 0 0 16px 16px;
  margin-top: 26px;
}
.fw-tier__cta { margin-top: auto; padding-top: 30px; }

/* --- cta box -------------------------------------------------- */
.fw-cta__box {
  position: relative;
  width: var(--fw-row-width);
  max-width: var(--fw-row-max);
  margin: 0 auto;
  border: 1px solid var(--fw-white);
}
.fw-cta__inner {
  position: relative;
  z-index: 2;
  padding: 60px 16%;
  text-align: center;
}
.fw-cta__inner h2 { color: var(--fw-white); text-align: center; }
.fw-cta__text {
  font-family: var(--fw-alt);
  font-size: 16px;
  line-height: 25.6px;
  color: var(--fw-white);
  text-align: center;
  margin-top: 21px;
}
.fw-cta__actions { margin-top: 21px; margin-bottom: 22px; }
/* The badge is a 115px circle sitting on the bottom left corner of the box,
   turned 45 degrees and nudged out, exactly as the live site places it. */
.fw-cta__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 115px;
  transform: translate(-57.5px, 57.5px) rotate(45deg);
  z-index: 3;
}

/* --- footer --------------------------------------------------- */
.fw-footer { background: var(--fw-black); color: var(--fw-white); }
/* Sized in vw like the live site, so it tracks the viewport the same way. */
.fw-footer__title {
  font-family: var(--fw-heading);
  font-size: 6vw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fw-white);
  padding-bottom: 10px;
}
.fw-footer__contact h3 { color: var(--fw-white); }
.fw-footer__copyright {
  font-family: var(--fw-lato);
  font-size: 16px;
  line-height: 28.8px;
  color: var(--fw-white);
  margin-top: 31px;
}
.fw-footer__strip {
  padding: 4% 0;
  background: var(--fw-white) center center / cover no-repeat;
}

/* --- editor content fallback --------------------------------- */
.fw-prose { font-family: var(--fw-body); font-size: 16px; line-height: 28.8px; }
.fw-prose p { margin-bottom: 1.4em; }
.fw-prose h2, .fw-prose h3 { color: inherit; margin-top: 1.4em; }

/* --- post list / single -------------------------------------- */
.fw-post__meta {
  font-family: var(--fw-alt);
  font-size: 14px;
  color: var(--fw-muted);
  margin-bottom: 20px;
}
.fw-post-card { margin-bottom: 48px; }
.fw-post-card h2 { font-size: 34px; line-height: 1.2; }

/* --- tablet ---------------------------------------------------
   Values measured off the live site at 768px wide. Below 981px the
   header stops running full width and lines up with the content row.
   -------------------------------------------------------------- */
@media (max-width: 980px) {
  :root { --fw-header-h: 98px; --fw-logo-h: 53px; }

  .fw-header__inner {
    width: var(--fw-row-width);
    max-width: var(--fw-row-max);
    margin: 0 auto;
    padding: 0;
  }

  h1 { font-size: 70px; line-height: 84px; }
  h2 { font-size: 32px; line-height: 38.4px; }
  .fw-lede { font-size: 15px; line-height: 27px; }
  .fw-tier__price { font-size: 16px; line-height: 22.4px; }
  .fw-footer__contact h3 { font-size: 20px; line-height: 28px; }

  .fw-col--2-5, .fw-col--3-5, .fw-col--1-3, .fw-col--1-2 { width: 100%; margin-right: 0; }
  .fw-cols > * { margin-right: 0; margin-bottom: 30px; }
  .fw-cols > *:last-child { margin-bottom: 0; }
  .fw-cta__inner { padding: 60px 30px; }
  .fw-cta__badge { width: 90px; transform: translate(-45px, 45px) rotate(45deg); }
}

/* --- phone ----------------------------------------------------
   Values measured off the live site at 390px wide. Note the package
   name gets larger than the price here, the opposite of desktop.
   That is how the live site behaves.
   -------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --fw-header-h: 98px; --fw-logo-h: 33px; --fw-panel-w: 280px; }

  h1 { font-size: 50px; line-height: 60px; }
  h2 { font-size: 20px; line-height: 24px; }
  h3 { font-size: 22px; }
  .fw-lede { font-size: 14px; line-height: 25.2px; }
  .fw-tier__name { font-size: 30px; line-height: 42px; }
  .fw-tier__price { font-size: 15px; line-height: 21px; }
  .fw-tier__note { font-size: 15px; line-height: 24px; }
  .fw-tier__desc, .fw-tier__features { font-size: 15px; }
  .fw-footer__title { font-size: 66.3px; line-height: 66.3px; }
  .fw-footer__contact h3 { font-size: 16px; line-height: 22.4px; }

  .fw-cta__inner { padding: 40px 30px; }
  .fw-cta__badge { width: 74px; transform: translate(-37px, 37px) rotate(45deg); }
}