/*
Theme Name: TSG
Theme URI: https://theseriousgamers.com
Author: The Serious Gamers
Author URI: https://theseriousgamers.com
Description: Official WordPress theme for The Serious Gamers based on the TSG design system tokens, drawn geometry, marker highlights, and typography. Serious games put the fun in functional.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tsg
Tags: custom-colors, custom-logo, custom-menu, featured-images, two-columns, full-width-template
*/

/* --- TSG DESIGN SYSTEM TOKENS --- */
:root {
  /* Brand Palette */
  --tsg-teal: #00C3C6;
  --tsg-teal-dark: #00A0A3;
  --tsg-teal-tint: #CCF3F4;
  --tsg-green: #7FC241;
  --tsg-green-tint: #E5F3D9;
  --tsg-orange: #F7A600;
  --tsg-orange-tint: #FDEDCC;
  --tsg-pink: #EE7AA3;
  --tsg-pink-tint: #FCE4ED;
  --tsg-blue: #66B2E4;
  --tsg-blue-tint: #E0F0FA;
  --tsg-grey: #7F7F7F;
  --tsg-grey-tint: #E5E5E5;
  --tsg-black: #1D1D1D;
  --tsg-white: #F2F2F2;
  --tsg-paper: #FFFFFF;
  --tsg-paper-soft: #FAFAFA;

  /* Quadrant Aliases */
  --tsg-quad-interactions: #7FC241;
  --tsg-quad-practices: #F7A600;
  --tsg-quad-thoughts: #EE7AA3;
  --tsg-quad-principles: #66B2E4;

  /* Element Pastels */
  --tsg-pastel-boundaries: #FCE38A;
  --tsg-pastel-invite: #F7D3E4;
  --tsg-pastel-gameworld: #CFA6D6;
  --tsg-pastel-goal: #F8C9A0;
  --tsg-pastel-components: #DCD2BE;
  --tsg-pastel-rules: #B5DCA8;
  --tsg-pastel-debrief: #93DCEC;

  /* Font Families */
  --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Maven Pro", "Segoe UI", system-ui, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;

  /* Shape Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-drawn: 18px 22px 16px 24px;
  --radius-drawn-alt: 24px 16px 22px 18px;
  --radius-lozenge: 26px 20px 24px 22px / 22px 26px 20px 24px;
  --radius-egg: 38px 26px 34px 30px / 52% 44% 46% 38%;
  --radius-pebble: 34px 24px 32px 26px / 34px 42px 28px 38px;
  --radius-bean: 24px 16px 22px 18px / 20px 26px 16px 22px;

  /* Borders & Shadows — mirror the design-system tokens:
     widths live in --border-*-width, colours live in the --border-* names */
  --border-drawn-width: 2.5px;
  --border-thin: 1.5px;
  --border-marker-width: 8px;
  --border-drawn: var(--tsg-grey);
  --border-hairline: var(--tsg-grey-tint);
  --border-strong: var(--tsg-black);
  --shadow-soft: 0 2px 8px rgba(67, 69, 75, 0.08);
  --shadow-lifted: 0 8px 24px rgba(67, 69, 75, 0.12);
  --shadow-print: 0 12px 40px rgba(67, 69, 75, 0.18);
  --ring-focus: 0 0 0 3px rgba(0, 195, 198, 0.45);
}

/* Base Body & Reset */
body {
  font-family: var(--font-body);
  color: var(--tsg-black);
  background-color: #FFFFFF;
  margin: 0;
  padding: 0;
  line-height: 1.55;
  font-size: 16px;
}

/* --- GUTENBERG BLOCKS & TYPOGRAPHY STYLES --- */
h1, .h1, .wp-block-post-title, .entry-title, .wp-block-heading:is(h1) {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 38px !important;
  line-height: 1.12 !important;
  letter-spacing: 0.005em !important;
  color: var(--tsg-black);
  margin-top: 0.8em;
  margin-bottom: 0.4em;
  display: block;
}

@media (min-width: 768px) {
  h1, .h1, .wp-block-post-title, .entry-title, .wp-block-heading:is(h1) {
    font-size: 48px !important;
  }
}

h2, .h2, .wp-block-heading:is(h2) {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  line-height: 1.18 !important;
  letter-spacing: 0.005em !important;
  color: var(--tsg-black);
  margin-top: 1em;
  margin-bottom: 0.4em;
  display: block;
}

@media (min-width: 768px) {
  h2, .h2, .wp-block-heading:is(h2) {
    font-size: 34px !important;
  }
}

h3, .h3, .wp-block-heading:is(h3) {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 1.18 !important;
  color: var(--tsg-black);
  margin-top: 0.9em;
  margin-bottom: 0.3em;
  display: block;
}

@media (min-width: 768px) {
  h3, .h3, .wp-block-heading:is(h3) {
    font-size: 26px !important;
  }
}

h4, .h4, .wp-block-heading:is(h4) {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1.18 !important;
  color: var(--tsg-black);
  margin-top: 0.8em;
  margin-bottom: 0.3em;
  display: block;
}

h5, h6, .wp-block-heading:is(h5, h6) {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--tsg-black);
  display: block;
}

p, .wp-block-paragraph {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tsg-black);
  margin-top: 0;
  margin-bottom: 1.25em;
}

a {
  color: var(--tsg-teal-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Gutenberg block margins & alignment */
.wp-block-image img {
  border-radius: var(--radius-md);
  height: auto;
  max-width: 100%;
}

.wp-block-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.wp-block-button__link {
  font-family: var(--font-display);
  font-weight: 700;
  padding: 9px 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* TSG Buttons with Drawn Tilt Shapes & Spring Hover */
.tsg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  border-style: solid;
  transition: transform 180ms cubic-bezier(.34,1.4,.5,1), background-color 180ms cubic-bezier(.22,.8,.32,1), border-color 180ms cubic-bezier(.22,.8,.32,1), box-shadow 180ms cubic-bezier(.22,.8,.32,1);
  user-select: none;
  line-height: 1.2;
  --tsg-btn-tilt: 0deg;
  transform: rotate(var(--tsg-btn-tilt));
}

.tsg-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.tsg-btn:active {
  transform: scale(0.97) rotate(0deg) !important;
}

.tsg-btn-sm { font-size: 14px; padding: 6px 20px; }
.tsg-btn-md { font-size: 16px; padding: 9px 26px; }
.tsg-btn-lg { font-size: 19px; padding: 11px 34px; }

.tsg-btn-primary {
  background-color: var(--tsg-teal);
  color: #FFFFFF !important;
  border: var(--border-drawn-width) solid var(--tsg-teal);
  border-radius: var(--radius-egg);
  --tsg-btn-tilt: -1.6deg;
}
.tsg-btn-primary:hover {
  background-color: var(--tsg-teal-dark);
  border-color: var(--tsg-teal-dark);
  transform: rotate(0deg);
}

.tsg-btn-green {
  background-color: var(--tsg-green);
  color: #FFFFFF !important;
  border: var(--border-drawn-width) solid var(--tsg-green);
  border-radius: var(--radius-egg);
  --tsg-btn-tilt: -1.6deg;
}
.tsg-btn-green:hover {
  background-color: #6ea838;
  border-color: #6ea838;
  transform: rotate(0deg);
}

.tsg-btn-secondary {
  background-color: #FFFFFF;
  color: var(--tsg-teal-dark) !important;
  border: var(--border-drawn-width) solid var(--tsg-teal);
  border-radius: var(--radius-pebble);
  --tsg-btn-tilt: 1.4deg;
}
.tsg-btn-secondary:hover {
  background-color: var(--tsg-teal-tint);
  transform: rotate(0deg);
}

.tsg-btn-drawn {
  background-color: #FFFFFF;
  color: var(--tsg-black) !important;
  border: var(--border-drawn-width) solid var(--tsg-grey);
  border-radius: var(--radius-pebble);
  --tsg-btn-tilt: 1.4deg;
}
.tsg-btn-drawn:hover {
  background-color: var(--tsg-paper-soft);
  transform: rotate(0deg);
}

/* Drawn Cards */
.tsg-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-drawn);
  padding: 24px;
  position: relative;
  transition: transform 180ms cubic-bezier(.22,.8,.32,1), box-shadow 180ms cubic-bezier(.22,.8,.32,1);
}

/* Opt-in drawn frame (e.g. the Gutenberg "drawn card" block style). */
.is-style-tsg-drawn-card {
  background-color: #FFFFFF;
  border: var(--border-drawn-width) solid var(--border-drawn);
  border-radius: var(--radius-drawn);
  padding: 24px;
  position: relative;
  transition: transform 180ms cubic-bezier(.22,.8,.32,1), box-shadow 180ms cubic-bezier(.22,.8,.32,1);
}

.tsg-card-interactive:hover {
  transform: translateY(-1px) rotate(-0.6deg);
  box-shadow: var(--shadow-soft);
}

/* Marker Highlight Devices */
.tsg-marker-l {
  position: relative;
}

.tsg-marker-l::after {
  content: '';
  position: absolute;
  bottom: -4px;
  right: -4px;
  left: 0;
  height: 8px;
  background-color: var(--marker-color, var(--tsg-orange));
  border-radius: 4px;
  z-index: 1;
  pointer-events: none;
}

.tsg-marker-l::before {
  content: '';
  position: absolute;
  bottom: -4px;
  right: -4px;
  top: 0;
  width: 8px;
  background-color: var(--marker-color, var(--tsg-orange));
  border-radius: 4px;
  z-index: 1;
  pointer-events: none;
}

mark,
mark.tsg-marker-swipe,
span.tsg-marker-swipe,
.tsg-marker-swipe {
  position: relative;
  display: inline;
  background: transparent;
  color: inherit;
  z-index: 0;
  padding: 0 4px;
}

mark::before,
mark.tsg-marker-swipe::before,
span.tsg-marker-swipe::before,
.tsg-marker-swipe::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 50%;
  background-color: var(--marker-color, var(--tsg-green-tint));
  z-index: -1;
  border-radius: 4px;
  transform: rotate(-1deg);
}

.tsg-handnote,
.is-style-tsg-handwritten,
.is-style-handwritten,
.has-handwritten-font {
  font-family: var(--font-hand) !important;
  color: var(--tsg-teal-dark) !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
  transform: rotate(-3deg);
  display: inline-block;
}

.tsg-callout {
  border-left: 8px solid var(--callout-accent, var(--tsg-teal));
  background-color: var(--callout-bg, var(--tsg-teal-tint));
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
}

.is-style-tsg-callout-teal {
  border-left: 8px solid var(--tsg-teal) !important;
  background-color: var(--tsg-teal-tint) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 16px 20px !important;
}

.is-style-tsg-callout-pink {
  border-left: 8px solid var(--tsg-pink) !important;
  background-color: var(--tsg-pink-tint) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 16px 20px !important;
}

.is-style-tsg-callout-green {
  border-left: 8px solid var(--tsg-green) !important;
  background-color: var(--tsg-green-tint) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 16px 20px !important;
}

.is-style-tsg-callout-orange {
  border-left: 8px solid var(--tsg-orange) !important;
  background-color: var(--tsg-orange-tint) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 16px 20px !important;
}

.tsg-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  line-height: 1.2;
}

.tsg-tag-teal { background-color: var(--tsg-teal-tint); color: #007678; }
.tsg-tag-green { background-color: var(--tsg-green-tint); color: #4e8020; }
.tsg-tag-orange { background-color: var(--tsg-orange-tint); color: #9c6700; }
.tsg-tag-pink { background-color: var(--tsg-pink-tint); color: #ad3d67; }
.tsg-tag-blue { background-color: var(--tsg-blue-tint); color: #2d73a4; }

.tsg-globe-bg {
  background-image: url('assets/backgrounds/slide-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Customer Logo Ticker (Large Prominent Display) */
@keyframes logo-ticker {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.logo-ticker-track {
  display: flex;
  width: max-content;
  gap: 80px;
  align-items: center;
  animation: logo-ticker 32s linear infinite;
}

.logo-ticker-track:hover {
  animation-play-state: paused;
}

.logo-ticker-item img {
  height: 110px;
  width: auto;
  max-width: 340px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.85;
  transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

@media (min-width: 768px) {
  .logo-ticker-item img {
    height: 150px;
    max-width: 420px;
  }
}

.logo-ticker-item img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.08);
}

/* --- TSG ELEMENTOR WIDGET ATOMS (design-system components) --- */

/* Section heading eyebrow (spaced-caps line above the title) */
.tsg-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tsg-teal-dark);
  display: block;
  margin-bottom: 8px;
}

/* Tag: neutral tone + outlined variant */
.tsg-tag-neutral {
  background-color: var(--tsg-grey-tint);
  color: var(--tsg-black);
}

.tsg-tag-outlined {
  background-color: transparent !important;
  border: 2px solid currentColor;
}

/* Button: tertiary (bean) + ghost (bean) */
.tsg-btn-tertiary {
  background-color: transparent;
  color: var(--tsg-black) !important;
  border: var(--border-drawn-width) solid transparent;
  border-radius: var(--radius-bean);
  --tsg-btn-tilt: 1.4deg;
}
.tsg-btn-tertiary:hover {
  background-color: var(--tsg-teal-tint);
  color: var(--tsg-teal-dark) !important;
  transform: rotate(0deg);
}

.tsg-btn-ghost {
  background-color: transparent;
  color: var(--tsg-black) !important;
  border: var(--border-drawn-width) solid transparent;
  border-radius: var(--radius-bean);
  --tsg-btn-tilt: 1.4deg;
}
.tsg-btn-ghost:hover {
  background-color: var(--tsg-paper-soft);
  transform: rotate(0deg);
}

/* Callout band (full-width coloured band — design-system Callout) */
.tsg-callout-band {
  border-radius: var(--radius-lg);
  padding: 18px 26px;
}
.tsg-callout-band-teal   { background-color: var(--tsg-teal);   color: #fff; }
.tsg-callout-band-green  { background-color: var(--tsg-green);  color: var(--tsg-black); }
.tsg-callout-band-orange { background-color: var(--tsg-orange); color: var(--tsg-black); }
.tsg-callout-band-pink   { background-color: var(--tsg-pink);   color: #fff; }
.tsg-callout-band-blue   { background-color: var(--tsg-blue);   color: #fff; }
.tsg-callout-band-title {
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 4px;
}
.tsg-callout-band-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}

/* List: the canonical "›" chevron bullet — TSG never uses a round bullet.
   Mirrors design-system tokens/base.css; --tsg-list-bullet lets widgets
   recolour the chevron per instance. */
ul.tsg-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
ul.tsg-list > li {
  position: relative;
  padding-left: 16px;
}
ul.tsg-list > li::before {
  content: "\203A";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--tsg-list-bullet, var(--tsg-teal));
  font-weight: 700;
}
ul.tsg-list a {
  color: inherit;
}
ul.tsg-list a:hover {
  text-decoration: underline;
}

/* Wheel of Debrief */
.tsg-wheel {
  position: relative;
}
.tsg-wheel .axis-label {
  position: absolute;
  white-space: nowrap;
  z-index: 20;
}
.tsg-wheel .wheel-quadrant {
  position: relative;
}
.tsg-wheel .wheel-quadrant::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
  transition: opacity 180ms ease;
  pointer-events: none;
}
.tsg-wheel .wheel-quadrant:hover::after {
  opacity: 0;
}