/**
 * #.#  Client Custom Styles
 *
 * Theme specific styles
*/

/* =============================
  # Fonts
============================= */

/* SELF HOSTED FONTS HERE */

@font-face {
  font-family: 'Satoshi Variable';
  src: url('../../fonts/satoshi/satoshi-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi Variable';
  src: url('../../fonts/satoshi/satoshi-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi Variable';
  src: url('../../fonts/satoshi/satoshi-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi Variable';
  src: url('../../fonts/satoshi/satoshi-black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/*@font-face {
  font-family: 'Marcellus';
  src: url('../../fonts/marcellus/marcellus-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}*/

/* =============================
  # Theme Colours
============================= */


:root {
  --black: rgba(29, 29, 29, 1);
  --main-color: rgba(0, 188, 138, 1);
  --green: rgba(0, 188, 138, 1);
  --grey: rgba(227, 227, 227, 1);
  --dark-grey:rgba(142, 142, 142, 1);
  --white: rgba(255, 255, 255, 1);

  --content: "Guggenheim Sans", serif;
  --header:  "Guggenheim Sans", serif;
  --semi:  "Guggenheim Sans Semi", serif;
  --regular:  "Guggenheim Sans Regular", serif;

  /* Farani Taylor brand (page-builder modules) */
  --farani-burgundy: #401115;
  --farani-orange: #e95a3a;
  --farani-salmon-grey: #fff2ef;
  --farani-salmon-dark:#F0C7BE;
  --farani-text-grey: #585858;
  --farani-offwhite: #fffcfb;
  --farani-heading-font: "Marcellus", serif;
  --farani-body-font: 'Satoshi Variable', sans-serif;
}

/* =============================
  # Dark Mode Colours
============================= */

/*@media (prefers-color-scheme: dark) {
  :root {
    --black: rgba(255, 255, 255, 1);      
    --white: rgba(29, 29, 29, 1);
    --grey: rgba(80, 80, 80, 1);
    --dark-grey: rgba(200, 200, 200, 1);
    --main-color: rgba(0, 188, 138, 1);  
  }
}*/

/* =============================
  # Site Defaults
============================= */

body,html {font-family:var(--farani-body-font)}

/* =============================
  # Content Blocks
============================= */

.content-block h1,
.content-block h2,
.content-block h3,
.content-block h4,
.content-block h5,
.content-block h6,
.content-block p,
.content-block li { color:var(--black)}

.content-block {}
.content-block h1,
.content-block h2 { font-size: 40px; line-height: 48px; font-weight: 600; padding-bottom: 30px; text-transform: uppercase; }
.content-block h3 { font-size: 30px; line-height: 32px; font-weight: 600; padding-bottom: 5px; text-transform: uppercase; }
.content-block h4 { font-size: 18px; line-height: 22px; }
.content-block p {padding-bottom:25px}
.content-block p,
.content-block li { font-size: 20px; line-height: 26px; }
.content-block ul { list-style-position: inside; list-style-type: disc;padding-bottom: 25px; }
.content-block ol { list-style-position: inside; list-style-type: decimal; padding-bottom: 25px;}

/* =============================
  # Slick Slider
============================= */

.slick-prev { left: calc(50% + 40px); background-image: url(../../../img/slick-left.svg); transform: rotate(135deg);}
.slick-next { right: calc(50% - 182px); background-image: url(../../../img/slick-right.svg); transform:  rotate(-45deg);}
.events_module .slick-prev:hover, .events_module .slick-next:hover {border:solid 1px var(--black);opacity:1}
.events_module .slick-prev.slick-disabled {opacity: 0.1;border:solid 1px var(--green)!important;pointer-events: none; cursor: default;}

/* =============================
  # Buttons
============================= */
.btn {
  --bs-btn-padding-x: .75rem;
  --bs-btn-padding-y: .375rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: #212529;
  --bs-btn-bg: transparent;
  --bs-btn-border-width: 1px;
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: .375rem;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-disabled-opacity: .65;
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center; text-decoration: none; vertical-align: middle;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: 0px;
  background-color: var(--bs-btn-bg);
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.wpcf7-list-item {
  display: inline-block;
  margin: 0;
}

/* =============================
  # Sitewide Floating Widgets
============================= */

/* Review Solicitors — fixed to the right edge, vertically centred, on
   every page (see inc/frontend.php). The widget script may already
   position itself; this wrapper is a fallback so it sits correctly
   even if it doesn't. Adjust once the real embed code is in hand. */
.review-solicitors-widget {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 90;
}



/* =============================
  # Scroll Reveal
============================= */

/* Fade + slide-up on scroll, driven by IntersectionObserver in main.js.
   .js-reveal wraps each Page Builder module (page-builder.php). Starts
   hidden only once JS confirms it's controlling this page (js-reveal-ready
   on <html>), so content is never stuck invisible if JS fails to load. */
html.js-reveal-ready .js-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
html.js-reveal-ready .js-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveal-ready .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Heading wipe reveal — every h1/h2 in the main content area wipes in
   left-to-right as it scrolls into view, driven by IntersectionObserver
   in main.js. clip-path sweeps open rather than a translate, so the
   heading un-covers in place instead of sliding.

   The hidden state is gated on html.js-heading-reveal-ready, which is
   added by a blocking inline script in <head> (site-header.php) — NOT by
   main.js, which only loads in the footer. If the gate were applied by
   footer JS, the heading would already have painted visible at least
   once (a real FOUC), and on Chrome/Edge that first visible paint,
   combined with IntersectionObserver delivering its first callback for
   an already-in-view heading almost immediately, could collapse the
   hidden-state paint and the reveal into the same frame — so the text
   flashed once then either never got a distinct "closed" state to
   transition from, or looked stuck. Gating in <head> means the hidden
   clip-path is the very first thing painted, well before main.js/the
   observer even exist, so there's no race left. Selector matches main.js
   directly (no .js-heading-reveal marker class needed) since that class
   is likewise only added by footer JS and can't gate the base hidden
   rule without reintroducing the same FOUC.

   The clip-path itself lives on an inner .js-heading-reveal-inner span
   (wrapped around the heading's contents by main.js), not the h1/h2
   element that main.js observes. Chrome/Edge have a bug where once an
   IntersectionObserver target's OWN clip-path has clipped it down to
   (near) zero visible area, the browser can permanently report a
   zero-area target rect for it, so the intersection ratio never reaches
   the threshold and .is-revealed never gets added. Firefox doesn't have
   this bug. Keeping the clip-path off the observed element avoids it. */
html.js-heading-reveal-ready main h1 .js-heading-reveal-inner,
html.js-heading-reveal-ready main h2 .js-heading-reveal-inner {
  display: block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}
html.js-heading-reveal-ready main h1.is-revealed .js-heading-reveal-inner,
html.js-heading-reveal-ready main h2.is-revealed .js-heading-reveal-inner {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  html.js-heading-reveal-ready main h1 .js-heading-reveal-inner,
  html.js-heading-reveal-ready main h2 .js-heading-reveal-inner {
    clip-path: none;
    transition: none;
  }
}

/* =============================
  # Media Queries
============================= */

@media (max-width: 1536px) {

}

@media (max-width: 1366px) {

}

@media (max-width: 1280px) {

}

@media (max-width: 1080px) {

}

@media (max-width: 992px) {

}

@media (max-width: 768px) {

  /* Hide the floating review widget on small screens by default —
     revisit once the real embed code/behaviour is known. */
  .review-solicitors-widget { display: none; }

}

@media (max-width: 600px) {

}