/* =========================================================================
   uktg-texture.css
   Reusable surface texture for UK Therapy Guild.

   THE POINT OF THIS FILE
   ----------------------
   Flat fills are what makes the site read as unprofessional. This adds a slow
   aurora gradient and a fine grain to the surfaces that are currently flat.

   It attaches to the classes that ALREADY EXIST, so no markup changes are
   needed anywhere on the site. Load this file after the others and every navy
   and warm surface gains texture at once.

   There are two families of surface on this site and both are handled:

     site-wide   .uktg-section--navy                       (dark pop-card - the SECTION is the card;
                                                            .uktg-section-inner has no background)
                 .uktg-section--dark                       (full-width dark)
                 .uktg-page-hero                           (page hero)
                 .uktg-section--warm                       (warm alternating)

     home-only   .uktg-ripple                              (#1a2035 band)
                 .uktg-who                                 (#f9f7f4 band)

   TUNING
   ------
   Everything is driven by the custom properties below. Change them once here
   and every textured surface on the site follows. Set --uktg-tex-strength to 0
   to switch the whole effect off without removing the file.
   ========================================================================= */

:root {
  /* How visible the effect is overall.
     0   = off, the instant kill switch (see REVERSAL below)
     1   = as originally designed
     1.6 = chosen by Steve, 30 Sep 2026, after reviewing the preview

     REVERSAL: set this to 0 and purge LiteSpeed. That turns the whole effect
     off everywhere in one edit, with no PHP change and no risk. Do that first
     if anything looks wrong; full removal can wait until the cause is known. */
  --uktg-tex-strength: 1.6;

  /* Dark surfaces.
     Blue is the base, violet and rose give the pearlescent shift, gold is the
     undertone. Seven pools rather than three: with only a few, the eye resolves
     each gradient individually and it reads as "a blob in the corner" instead
     of texture. Tune the alpha, not the hue. */
  --uktg-tex-blue:   rgba(56, 96, 170, 0.30);
  --uktg-tex-indigo: rgba(88, 86, 176, 0.26);
  --uktg-tex-violet: rgba(126, 92, 170, 0.24);
  --uktg-tex-rose:   rgba(188, 118, 148, 0.17);
  --uktg-tex-gold:   rgba(191, 170, 124, 0.22);
  --uktg-tex-teal:   rgba(31, 95, 107, 0.22);
  --uktg-tex-green:  rgba(63, 107, 74, 0.20);

  /* The pearl sheen rotating over the pools. Meant to be felt, not seen. */
  --uktg-pearl-1: rgba(126, 92, 170, 0.14);
  --uktg-pearl-2: rgba(188, 118, 148, 0.10);
  --uktg-pearl-3: rgba(191, 170, 124, 0.12);
  --uktg-pearl-4: rgba(56, 96, 170, 0.14);

  /* Warm surfaces: much quieter, or it looks like a stain. */
  --uktg-tex-warm-1: rgba(191, 170, 124, 0.24);
  --uktg-tex-warm-2: rgba(143, 122, 79, 0.12);
  --uktg-tex-warm-3: rgba(26, 32, 53, 0.05);

  /* Solid gold surfaces (.uktg-highlights).
     Gold is a mid tone, so unlike the dark surfaces it needs BOTH a light bloom
     and a deeper bronze to get any depth - lightening alone just washes it out.
     The violet, rose and blue are the same pearl hues as the dark surfaces, at
     very low alpha, which is what ties the two together. */
  --uktg-tex-gold-light:  rgba(255, 246, 219, 0.55);
  --uktg-tex-gold-bronze: rgba(133, 112, 69, 0.48);
  --uktg-tex-gold-violet: rgba(126, 92, 170, 0.24);
  --uktg-tex-gold-rose:   rgba(188, 118, 148, 0.22);
  --uktg-tex-gold-blue:   rgba(56, 96, 170, 0.20);
  /* Dark grain on gold. The warm grain (0.04) is invisible on #BFAA7C. */
  --uktg-tex-grain-gold:  rgba(60, 45, 20, 0.10);

  /* Grain */
  --uktg-tex-grain-dark: rgba(255, 255, 255, 0.05);
  --uktg-tex-grain-warm: rgba(26, 32, 53, 0.04);
  --uktg-tex-grain-size: 3px;

  /* Motion */
  --uktg-tex-drift: 30s;
}

/* -------------------------------------------------------------------------
   1. Shared plumbing

   Every textured surface needs a stacking context and clipping, otherwise the
   oversized gradient layer escapes its box. `isolation` keeps the z-index:-1
   children from falling behind the section's own background.
   ------------------------------------------------------------------------- */

.uktg-section--navy,
.uktg-section--dark,
.uktg-page-hero,
.uktg-ripple,
.uktg-section--warm,
.uktg-who,
.uktg-highlights,
.uktg-hero-card,
.uktg-textured {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* The aurora layer. Oversized and blurred so the pools have no visible edge. */
.uktg-section--navy::before,
.uktg-section--dark::before,
.uktg-page-hero::before,
.uktg-ripple::before,
.uktg-section--warm::before,
.uktg-who::before,
.uktg-highlights::before,
.uktg-hero-card::before,
.uktg-textured::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -2;
  pointer-events: none;
  opacity: var(--uktg-tex-strength);
  animation: uktg-tex-drift var(--uktg-tex-drift) var(--uktg-ease-soft, ease-in-out) infinite alternate;
}

/* The grain layer. A 3px dot lattice, almost subliminal, which is what stops
   the gradient reading as a cheap blur. */
.uktg-section--navy::after,
.uktg-section--dark::after,
.uktg-page-hero::after,
.uktg-ripple::after,
.uktg-section--warm::after,
.uktg-who::after,
.uktg-highlights::after,
.uktg-hero-card::after,
.uktg-textured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--uktg-tex-strength);
  background-size: var(--uktg-tex-grain-size) var(--uktg-tex-grain-size);
}

/* -------------------------------------------------------------------------
   2. Dark surfaces
   ------------------------------------------------------------------------- */

.uktg-section--navy::before,
.uktg-section--dark::before,
.uktg-page-hero::before,
.uktg-ripple::before,
.uktg-hero-card::before,
.uktg-textured--dark::before {
  background:
    radial-gradient(32% 38% at 10% 26%, var(--uktg-tex-green) 0%, transparent 68%),
    radial-gradient(30% 36% at 30% 8%, var(--uktg-tex-teal) 0%, transparent 70%),
    radial-gradient(34% 42% at 56% 18%, var(--uktg-tex-blue) 0%, transparent 70%),
    radial-gradient(32% 40% at 86% 30%, var(--uktg-tex-indigo) 0%, transparent 72%),
    radial-gradient(30% 38% at 94% 68%, var(--uktg-tex-violet) 0%, transparent 72%),
    radial-gradient(28% 34% at 66% 86%, var(--uktg-tex-rose) 0%, transparent 74%),
    radial-gradient(42% 48% at 26% 92%, var(--uktg-tex-gold) 0%, transparent 74%),
    /* Pearlescent sheen, blended into the same layer rather than added as a
       third element, so this file still needs no markup changes. `screen` on a
       dark base lightens only where the sheen carries colour, which is what
       gives the oil-on-water shift instead of a flat purple wash. */
    conic-gradient(
      from 210deg at 58% 42%,
      var(--uktg-pearl-1) 0deg,
      var(--uktg-pearl-2) 80deg,
      var(--uktg-pearl-3) 160deg,
      var(--uktg-pearl-4) 250deg,
      var(--uktg-pearl-1) 360deg
    );
  background-blend-mode: screen;
  filter: blur(8px);
}

.uktg-section--navy::after,
.uktg-section--dark::after,
.uktg-page-hero::after,
.uktg-ripple::after,
.uktg-hero-card::after,
.uktg-textured--dark::after {
  background-image: radial-gradient(var(--uktg-tex-grain-dark) 1px, transparent 1px);
}

/* -------------------------------------------------------------------------
   3. Warm and light surfaces

   Deliberately weaker than the dark treatment. On a light fill the same
   intensity reads as a coffee stain rather than a texture.
   ------------------------------------------------------------------------- */

.uktg-section--warm::before,
.uktg-who::before,
.uktg-textured--warm::before {
  background:
    radial-gradient(40% 48% at 12% 18%, var(--uktg-tex-warm-1) 0%, transparent 72%),
    radial-gradient(36% 44% at 88% 26%, var(--uktg-tex-warm-2) 0%, transparent 72%),
    radial-gradient(52% 58% at 70% 92%, var(--uktg-tex-warm-3) 0%, transparent 74%);
  filter: blur(8px);
}

.uktg-section--warm::after,
.uktg-who::after,
.uktg-textured--warm::after {
  background-image: radial-gradient(var(--uktg-tex-grain-warm) 1px, transparent 1px);
}

/* -------------------------------------------------------------------------
   3b. Solid gold surfaces

   .uktg-highlights is the gold stats strip used on course pages. It is a mid
   tone, so it needs a light bloom AND a bronze shadow to gain depth; the pearl
   hues then sit on top at very low alpha.
   ------------------------------------------------------------------------- */

.uktg-highlights::before,
.uktg-textured--gold::before {
  background:
    radial-gradient(40% 58% at 12% 18%, var(--uktg-tex-gold-light) 0%, transparent 70%),
    radial-gradient(34% 50% at 46% 6%, var(--uktg-tex-gold-rose) 0%, transparent 72%),
    radial-gradient(38% 54% at 82% 24%, var(--uktg-tex-gold-violet) 0%, transparent 72%),
    radial-gradient(36% 52% at 96% 72%, var(--uktg-tex-gold-blue) 0%, transparent 72%),
    radial-gradient(46% 62% at 66% 96%, var(--uktg-tex-gold-bronze) 0%, transparent 74%),
    radial-gradient(42% 58% at 22% 92%, var(--uktg-tex-gold-light) 0%, transparent 74%),
    /* Same pearl sheen as the dark surfaces. On a mid tone `overlay` shows the
       shift in both directions, where `screen` would only lighten. */
    conic-gradient(
      from 30deg at 40% 60%,
      var(--uktg-pearl-3) 0deg,
      var(--uktg-pearl-4) 90deg,
      var(--uktg-pearl-1) 190deg,
      var(--uktg-pearl-2) 280deg,
      var(--uktg-pearl-3) 360deg
    );
  background-blend-mode: overlay;
  /* Less blur than the dark bands: this strip is short, and at 10px the pools
     smeared into one flat wash, which is why it read as untextured. */
  filter: blur(6px);
}

.uktg-highlights::after,
.uktg-textured--gold::after {
  background-image: radial-gradient(var(--uktg-tex-grain-gold) 1px, transparent 1px);
}

/* -------------------------------------------------------------------------
   3c. Tutor LMS lesson cards

   Lesson pages are a THIRD component family (uktg-lesson.css) that shares no
   class names with the rest of the site, which is why the texture did not
   reach them at first. `.uktg-lesson__card` is the navy "screamer" card and is
   the only genuinely filled dark surface there. The course listing's
   `.uktg-menucard__card` is white, so it is deliberately left alone.

   DELIBERATELY CHEAPER than the big bands:
     - no drift animation
     - no blur filter
     - 55% of the master strength

   There are 36 of these cards on a single lesson page. Two blurred, animated
   layers times 36 would stutter on the phones and iPads students actually use,
   and at card size the gradient reads as a blob rather than as depth.

   The plumbing selector is tripled to match uktg-lesson.css's own specificity
   convention (it uses 0-4-0 throughout to beat Tutor's stylesheet).
   ------------------------------------------------------------------------- */

.uktg-lesson.uktg-lesson.uktg-lesson .uktg-lesson__card {
  position: relative;
  isolation: isolate;
  /* overflow:hidden and border-radius are already set by uktg-lesson.css */
}

.uktg-lesson__card::before,
.uktg-lesson__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Scaled down from the master control, so setting --uktg-tex-strength to 0
     still switches these off with everything else. */
  opacity: calc(var(--uktg-tex-strength) * 0.55);
}

.uktg-lesson__card::before {
  z-index: -2;
  background:
    radial-gradient(70% 90% at 6% 10%, var(--uktg-tex-blue) 0%, transparent 62%),
    radial-gradient(60% 80% at 96% 24%, var(--uktg-tex-violet) 0%, transparent 64%),
    radial-gradient(56% 74% at 80% 96%, var(--uktg-tex-rose) 0%, transparent 66%),
    radial-gradient(64% 84% at 22% 98%, var(--uktg-tex-gold) 0%, transparent 66%);
}

.uktg-lesson__card::after {
  z-index: -1;
  background-image: radial-gradient(var(--uktg-tex-grain-dark) 1px, transparent 1px);
  background-size: var(--uktg-tex-grain-size) var(--uktg-tex-grain-size);
}

/* -------------------------------------------------------------------------
   3d. Page hero as a card

   uktg-components.css draws .uktg-page-hero as a full-bleed band: square top
   corners under the site header, rounded bottom (border-radius: 0 0 10px 10px),
   and radius 0 on every corner when a .uktg-highlights strip follows it. That
   was fine for a flat band. Now the hero carries texture it reads as a card,
   and a card with square top corners looks unfinished - this is the "top
   corners have no radius but the bottoms do" Steve spotted on the Level 5 page.

   So: the hero gets the same side margins as the .uktg-section--navy pop-card
   and all four corners rounded. When the gold strip follows, the hero keeps the
   top corners and the strip takes the bottom pair, so the two form one rounded
   block. Selectors are identical to the originals, so this wins on source order.
   ------------------------------------------------------------------------- */

.uktg-page-hero {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  border-radius: 10px;
}

.uktg-page-hero:has(+ .uktg-highlights) {
  border-radius: 10px 10px 0 0;
}

.uktg-page-hero + .uktg-highlights {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  border-radius: 0 0 10px 10px;
}

@media (max-width: 640px) {
  .uktg-page-hero,
  .uktg-page-hero + .uktg-highlights {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .uktg-page-hero {
    border-radius: 8px;
  }

  .uktg-page-hero:has(+ .uktg-highlights) {
    border-radius: 8px 8px 0 0;
  }

  .uktg-page-hero + .uktg-highlights {
    border-radius: 0 0 8px 8px;
  }
}

/* -------------------------------------------------------------------------
   3e. Page-hero CTAs as ghost buttons

   Steve, 30 Sep 2026, on the three gold buttons in the Level 5 hero: "I would
   prefer if they were not the gold style but the transparent and white outline
   style like the book a call back button on the home page."

   .uktg-page-hero__ctas is the framework's standard hero CTA container, so this
   restyles hero CTAs on every page, with no markup change. Every .uktg-page-hero
   is navy, so a ghost button is always on a dark surface here.

   Only background, colour and border are overridden. Size, type, uppercase
   tracking, the scale-on-hover and the gold focus ring all stay as
   uktg-components.css defines them. Specificity 0-2-0 / 0-3-0 beats the base
   .uktg-btn (0-1-0) and .uktg-btn:hover (0-2-0), and this file loads later.
   ------------------------------------------------------------------------- */

.uktg-page-hero__ctas .uktg-btn {
  background: transparent;
  color: #f9f7f4;
  border: 1px solid rgba(249, 247, 244, 0.32);
}

.uktg-page-hero__ctas .uktg-btn:hover,
.uktg-page-hero__ctas .uktg-btn:focus-visible {
  background: rgba(249, 247, 244, 0.1);
  color: #f9f7f4;
  border-color: var(--uktg-gold, #BFAA7C);
}

/* -------------------------------------------------------------------------
   4. Motion
   ------------------------------------------------------------------------- */

/* A little rotation as well as drift, so the conic sheen shifts hue across the
   surface over time rather than sitting still. */
@keyframes uktg-tex-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.06) rotate(4deg); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.03) rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .uktg-section--navy::before,
  .uktg-section--dark::before,
  .uktg-page-hero::before,
  .uktg-ripple::before,
  .uktg-section--warm::before,
  .uktg-who::before,
  .uktg-highlights::before,
  .uktg-hero-card::before,
  .uktg-textured::before {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   5. Hero card

   The home page hero is currently a flat full-bleed band. This turns it into a
   dark card floating on the page, which is the same idea as the existing
   .uktg-section--navy pop-card, so it reads as the same design language.
   ------------------------------------------------------------------------- */

.uktg-hero-wrap {
  /* Transparent, not white: the live hero sits over the page's gold-lotus
     background and a white band would cover it. The card supplies the contrast. */
  background: transparent;
  padding: clamp(1.25rem, 4vw, 2.75rem) clamp(1rem, 4vw, 2.5rem);
}

.uktg-hero-card {
  max-width: 1160px;
  margin-inline: auto;
  background: var(--uktg-navy, #0f172a);
  color: #f9f7f4;
  border-radius: var(--uktg-radius-md, 12px);
  padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  box-shadow: var(--uktg-shadow-lg, 0 2px 14px rgba(0, 0, 0, 0.07), 0 6px 24px rgba(0, 0, 0, 0.1));
}

.uktg-hero-card__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 62em) {
  .uktg-hero-card__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.uktg-hero-card__eyebrow {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--uktg-gold, #BFAA7C);
  margin-bottom: 20px;
}

.uktg-hero-card__title {
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0 0 20px;
  text-wrap: balance;
}

.uktg-hero-card__title em,
.uktg-hero-card__title span {
  font-style: normal;
  color: var(--uktg-gold, #BFAA7C);
}

.uktg-hero-card__lead {
  font-family: Arial, sans-serif;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.7;
  color: rgba(249, 247, 244, 0.8);
  max-width: 34rem;
  margin: 0 0 32px;
}

/* Trust row under the hero copy */
.uktg-hero-card__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
}

.uktg-hero-card__trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: Arial, sans-serif;
  font-size: 13.5px;
  color: rgba(249, 247, 244, 0.72);
}

.uktg-hero-card__trust svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--uktg-gold, #BFAA7C);
}

/* The side panel inside the hero card */
.uktg-hero-panel {
  background: rgba(249, 247, 244, 0.06);
  border: 1px solid rgba(249, 247, 244, 0.14);
  border-radius: var(--uktg-radius-md, 12px);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.uktg-hero-panel h2 {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 6px;
}

.uktg-hero-panel > p {
  font-family: Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(249, 247, 244, 0.62);
  margin: 0 0 20px;
}

.uktg-hero-panel__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 13px;
}

.uktg-hero-panel__list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(249, 247, 244, 0.82);
}

.uktg-hero-panel__list svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
  color: var(--uktg-gold, #BFAA7C);
}

/* -------------------------------------------------------------------------
   6. Hero card buttons

   Self-contained on purpose. The site's .uktg-btn-group is NOT the flex row
   the design framework describes: in uktg-components.css it is a white card
   (background #fff, padding, border, shadow) with stacked full-width buttons.
   Inside a dark hero card that renders as a white box, which is exactly the
   "no cta-box inside a navy card" mistake the framework warns about. So the
   hero owns its own row and buttons and depends on nothing else.
   ------------------------------------------------------------------------- */

.uktg-hero-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.uktg-hero-btn {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--uktg-gold, #BFAA7C);
  color: #1a2035;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 30px;
  border: 1px solid var(--uktg-gold, #BFAA7C);
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s var(--uktg-ease-soft, ease), transform 0.3s var(--uktg-ease-soft, ease);
}

.uktg-hero-btn:hover {
  background: var(--uktg-gold-hover, #a8935e);
  color: #1a2035;
  transform: translateY(-1px);
}

.uktg-hero-btn--ghost {
  background: transparent;
  color: #f9f7f4;
  border-color: rgba(249, 247, 244, 0.32);
}

.uktg-hero-btn--ghost:hover {
  background: rgba(249, 247, 244, 0.1);
  border-color: var(--uktg-gold, #BFAA7C);
  color: #f9f7f4;
}

.uktg-hero-btn--block {
  width: 100%;
}