/*
Theme Name:   Fosters Solicitors
Theme URI:    https://fosterssolicitors.co.uk
Description:  Custom WordPress parent theme for Fosters Solicitors. Built with ACF Pro, Swiper.js and a fully bespoke homepage template.
Author:       Coder Agency
Author URI:   https://coderagency.co.uk
Version:      1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License:      Proprietary
Text Domain:  fosters
*/

/* ==========================================================================
   GLOBAL RESET / BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: var(--font-body, 'Rubik', sans-serif);
  background: #fff;
  color: var(--color-text, #1E153D);
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
main { overflow-x: hidden; }


/* ==========================================================================
   Chat Widget
   ========================================================================== */
div#chat-widget-container {
    left: 0;
}

/* ==========================================================================
   SITE FOOTER — see footer.css (enqueued globally via functions.php)
   ========================================================================== */


/* ==========================================================================
   DESIGN TOKENS — extracted from Figma: INT Fosters Solicitors Website Design
   Source: https://www.figma.com/design/1wJrTYesYTIO0SMhzpDfBU/
   ========================================================================== */

:root {

  /* -------------------------------------------------------------------------
     Colours
     ------------------------------------------------------------------------- */

  /* Brand */
  --color-primary:        #071D49; /* Colour / Primary — deep navy */
  --color-teal:           #4FBEBE; /* Color 2 — teal accent */
  --color-accent:         #FFFFFF; /* Accent — white */

  /* Text */
  --color-text:           #1E153D; /* Text — deep purple-navy */
  --color-text-secondary: #1E153D; /* Text 2 — matches primary text */

  /* UI */
  --color-stroke:         #E8EDF6; /* Stroke — light blue-grey border */

  /* Legacy palette (kept for backwards compatibility) */
  --color-old-blue:       #99C1DC; /* Old Fosters blue */
  --color-old-pink:       #F68382; /* Old Fosters pink */
  --color-old-green:      #B3CB92; /* Old Fosters green */

  /* Hero Gradient */
  --hero-gradient: linear-gradient(180deg, rgba(7, 29, 73, 0.00) 0%, rgba(7, 29, 73, 0.80) 100%), linear-gradient(359deg, rgba(30, 21, 61, 0.00) 28.5%, rgba(7, 29, 73, 0.60) 95.48%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);


  /* -------------------------------------------------------------------------
     Typography — Fonts
     ------------------------------------------------------------------------- */

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Rubik', system-ui, sans-serif;

  /* -------------------------------------------------------------------------
     Typography — Desktop scale
     ------------------------------------------------------------------------- */

  /* Overhead (eyebrow label) */
  --fs-overhead:          16px;
  --lh-overhead:          0.96;
  --ls-overhead:          0.03em;
  --fw-overhead:          500; /* Rubik Medium */

  /* Display (hero headline) */
  --fs-display:           65px;
  --lh-display:           1.16;
  --ls-display:           0.02em;
  --fw-display:           600; /* Playfair Display SemiBold */

  /* H1 */
  --fs-h1:                54px;
  --lh-h1:                1.16;
  --ls-h1:                0.02em;
  --fw-h1:                600;

  /* H2 */
  --fs-h2:                44px;
  --lh-h2:                1.10;
  --ls-h2:                0.03em;
  --fw-h2:                600;

  /* H3 */
  --fs-h3:                32px;
  --lh-h3:                1.10;
  --ls-h3:                0.03em;
  --fw-h3:                600;

  /* H4 */
  --fs-h4:                24px;
  --lh-h4:                1.10;
  --ls-h4:                0.03em;
  --fw-h4:                700; /* Playfair Display Bold */

  /* H5 */
  --fs-h5:                18px;
  --lh-h5:                1.10;
  --ls-h5:                0.01em;
  --fw-h5:                500; /* Rubik Medium */

  /* Hero Body */
  --fs-hero-body:         20px;
  --lh-hero-body:         1.40;
  --ls-hero-body:         0.2px;
  --fw-hero-body:         300;

  /* Action (buttons / CTAs) */
  --fs-action:            16px;
  --lh-action:            1.00;
  --ls-action:            -0.01em;
  --fw-action:            400; /* Rubik Regular */

  /* Body */
  --fs-body:              18px;
  --lh-body:              1.40;
  --ls-body:              0.01em;
  --fw-body:              300; /* Rubik Light */

  /* Body small */
  --fs-body-s:            14px;
  --lh-body-s:            1.40;
  --ls-body-s:            0.01em;
  --fw-body-s:            300;

  /* -------------------------------------------------------------------------
     Typography — Mobile scale
     ------------------------------------------------------------------------- */

  --fs-overhead-mob:      14px;
 
  --fs-display-mob:       40px;
  --fs-h1-mob:            40px;
  --lh-h1-mob:            1.1;
  --fs-h2-mob:            32px;
  --fs-h3-mob:            22px;
  --fs-hero-body-mob:     14px;
  --fs-h4-mob:            18px;
  --fs-h5-mob:            16px;
  --fs-body-mob:          14px;

  /* -------------------------------------------------------------------------
     Shadows
     ------------------------------------------------------------------------- */

  --shadow-1: 0 0 12px rgba(0, 0, 0, 0.09);
  --shadow-2: 0 0 28px rgba(0, 0, 0, 0.10);

  /* -------------------------------------------------------------------------
     Layout — spacing tokens
     Used by .site-container, .site-section, .site-band.
     Template stylesheets may re-declare these tokens for local overrides;
     the last declaration in cascade order wins.
     -------------------------------------------------------------------------

     --site-px          Horizontal side padding for boxed containers.
     --site-py          Vertical padding when the adjacent section has a
                        DIFFERENT background colour (more breathing room).
     --site-py-flush    Vertical padding when the adjacent section shares the
                        SAME background colour (reduced — avoids doubling up).
     ------------------------------------------------------------------------- */

  --site-px:       118px;   /* desktop ≥ 1367px */
  --site-py:        80px;   /* desktop — different-bg  */
  --site-py-flush:  40px;   /* desktop — same-bg       */
  --site-band-px:   20px;  /* desktop ≥ 1367px */

}

/* ==========================================================================
   Mobile overrides — switch heading scale at ≤767 px
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --fs-display: var(--fs-display-mob);
    --fs-h1:      var(--fs-h1-mob);
    --lh-h1:      var(--lh-h1-mob);
    --fs-h2:      var(--fs-h2-mob);
    --fs-h3:      var(--fs-h3-mob);
    --fs-h4:      var(--fs-h4-mob);
    --fs-h5:      var(--fs-h5-mob);
    --fs-hero-body: var(--fs-hero-body-mob);
    --fs-body:    var(--fs-body-mob);
    --fs-overhead: var(--fs-overhead-mob);
  }
}

/* -------------------------------------------------------------------------
   Layout token responsive overrides
   Breakpoints mirror the --site-px ladder so all tokens move
   together whenever the viewport changes size.

   Breakpoint  --site-px  --site-py  --site-py-flush
   ≤ 1366px    80px      64px      32px            (laptop)
   ≤ 1023px    40px      64px      32px            (tablet — same vertical as laptop)
   ≤  767px    20px      48px      24px            (mobile)
   ------------------------------------------------------------------------- */

@media (max-width: 1366px) {
  :root {
    --site-px:       80px;
    --site-py:       64px;
    --site-py-flush: 32px;
  }
}

@media (max-width: 1024px) {
  :root {
    --site-px:       40px;
    --site-band-px:  0px;
    /* --site-py and --site-py-flush intentionally unchanged from 1366px breakpoint */
  }
}

@media (max-width: 767px) {
  :root {
    --site-px:       20px;
    --site-py:       48px;
    --site-py-flush: 24px;
  }
}


/* ==========================================================================
   SERVICE THEME — accent colour tokens
   ─────────────────────────────────────────────────────────────────────────
   The body_class filter in functions.php adds one of these classes based
   on the sp_service_theme ACF field set on the top-level service page.
   --service-accent is then used in place of all hardcoded department
   colours throughout service-parent.css (and the future child CSS).
   ========================================================================== */

body.service-personal { --service-accent: var(--color-old-green, #B3CB92); }
body.service-property  { --service-accent: var(--color-old-pink,  #F68382); }
body.service-business  { --service-accent: var(--color-old-blue,  #99C1DC); }


/* ==========================================================================
   GLOBAL LAYOUT UTILITIES
   site-container  — boxed content constraint (width + horizontal padding only)
   site-section    — vertical rhythm for <section> elements
   site-band       — full-width safe-zone (horizontal padding only, no max-width)
   ========================================================================== */

/* ── Boxed container ────────────────────────────────────────────────────────
   Apply to an inner <div> inside a full-width <section>.
   Constrains content to 1440px and provides responsive side padding.
   Never sets vertical padding — that's the section's responsibility.

   Usage:
     <section class="site-section">
       <div class="site-container"> … </div>
     </section>
   -------------------------------------------------------------------------- */

.site-container {
  max-width: 1440px;
  margin-left:  auto;
  margin-right: auto;
  padding-left:  var(--site-px);
  padding-right: var(--site-px);
}


/* ── Vertical rhythm ────────────────────────────────────────────────────────
   Apply to the <section> element itself (never to .site-container).

   .site-section             Adjacent sections have DIFFERENT backgrounds.
                           Uses the larger --site-py token (more separation).

   .site-section--same-bg    Adjacent sections share the SAME background.
                           Uses --site-py-flush (half of --site-py) to avoid
                           visually doubling the space between sections.

   Both variants can be combined with any background/colour class — they only
   control top and bottom padding, nothing else.
   -------------------------------------------------------------------------- */

.site-section {
  padding-top:    var(--site-py);
  padding-bottom: var(--site-py);
}

.site-section--same-bg {
  padding-top:    var(--site-py-flush);
  padding-bottom: var(--site-py-flush);
}


/* ── Full-width band ────────────────────────────────────────────────────────
   Apply directly to a <section> that must fill the full viewport width
   (e.g. mid-page gradient banners, hero cards, full-bleed imagery).
   Provides a small horizontal safe-zone so content never touches the
   viewport edge, but deliberately has NO max-width and NO centering.

   Desktop  40px side padding keeps rounded cards away from the edge.
   Mobile    0px — cards typically fill the screen edge-to-edge on small
             screens where the border-radius already provides spacing.

   Usage:
     <section class="site-band"> … </section>
   -------------------------------------------------------------------------- */

.site-band {
  padding-left:  40px;
  padding-right: 40px;
}

@media (max-width: 1024px) {
  .site-band {
    padding-left:  0;
    padding-right: 0;
  }
}

/* ----------------------------------------------------------------
   ASK WILLIAM BUTTON — gradient-outline pill
   ---------------------------------------------------------------- */

/* @property must be declared before use */
@property --angle {
  syntax: '<angle>';
  initial-value: 180deg;
  inherits: true;
}

button.ask-william-btn {
  border: 0;
  padding: 0;
  border-radius: 99px;
  cursor: pointer;
  background: transparent;
  width: fit-content;
}

.gradient-outline-pill {
  position: relative;
  padding: 12px 24px;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
  white-space: nowrap;
  justify-content: center;
  color: var(--color-text);
}

.primary-text {
  color: #1E153D;
}

.white-text {
  color: #fff;
}

/* Static gradient border */
.gradient-outline-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 3px;
  border-radius: inherit;
  background: linear-gradient(135deg, #29f5ea, #6200ee);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Rotating gradient border (hover) */
.gradient-outline-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 3px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--angle, 0deg),
    #29f5ea,
    #6200ee,
    #29f5ea
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gradient-outline-pill:hover::before { opacity: 0; }
.gradient-outline-pill:hover::after  {
  opacity: 1;
  animation: rotateGradient 8s linear infinite;
}

.gradient-outline-pill:hover {
  box-shadow:
    0 0 10px rgba(41, 245, 234, 0.2),
    0 0 10px rgba(98, 0, 238, 0.2),
    0 0 10px rgba(41, 245, 234, 0.2);
}

@keyframes rotateGradient {
  0%   { --angle: 0deg; }
  100% { --angle: 360deg; }
}

@media (min-width:1024px) {
  .desktop-only {
    display: block;
  }
  
  .tab-mob-only {
    display: none;
  }
}

/* ----------------------------------------------------------------
   Responsive Display Classes
   ---------------------------------------------------------------- */
@media (max-width: 1023px) {
  .tab-mob-only {
    display: block;
  }
  
  .desktop-only {
    display: none;
  }
}