/* ============================================
   DPG Global Styles - Site-wide Foundation
   ============================================

   PURPOSE:
   - Defines brand colours as CSS variables for consistency
   - Sets base typography and layout defaults
   - Provides global button and form styling
   - Contains site-wide utility classes

   USAGE:
   - Use CSS variables throughout the site: var(--dpg-purple)
   - Loaded before component-specific CSS files
   - Should not contain component-specific styles

   BRAND PALETTE (from DPG Brand Toolkit v1.0):
   - 7 colour pairs (lead + dark)
   - 3 neutrals
   - See Section 6 of DPG_Toolkit_Feb25_HR.pdf for full reference

   ============================================ */

/* ============================================
   CSS VARIABLES - Brand Colour Palette
   ============================================ */

:root {
  /* Blue */
  --dpg-blue: #5F62E1;
  --dpg-blue-dark: #1C074F;

  /* Yellow */
  --dpg-yellow: #E0F400;
  --dpg-yellow-dark: #7C662C;

  /* Pink */
  --dpg-pink: #F5A0F5;
  --dpg-pink-dark: #6F103C;

  /* Green */
  --dpg-green: #B4FF87;
  --dpg-green-dark: #3F512F;

  /* Teal */
  --dpg-teal: #35DECD;
  --dpg-teal-dark: #134D5B;

  /* Red */
  --dpg-red: #EF281A;
  --dpg-red-dark: #64160C;

  /* Neutrals */
  --dpg-neutral-1: #EEEEEE;
  --dpg-neutral-2: #CACAC0;
  --dpg-neutral-3: #524B48;
  --dpg-white: #FFFFFF;
  --dpg-black: #000000;

  /* Aliases (commonly used shorthand) */
  --dpg-purple: var(--dpg-blue-dark);
  --dpg-light-grey: var(--dpg-neutral-1);

  /* Typography */
  --dpg-font-primary: "Halyard", Arial;
  --dpg-font-fallback: "Halyard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;

  /* Font Size Scale (px - absolute values to override TNEW framework) */
  --dpg-font-size-sm: 14px;    /* nav links, secondary text */
  --dpg-font-size-base: 16px;  /* body text, headings, buttons */
  --dpg-font-size-md: 18px;    /* featured prices */
  --dpg-font-size-lg: 28px;    /* datepicker month display */

  /* Spacing */
  --dpg-spacing-xs: 10px;
  --dpg-spacing-sm: 15px;
  --dpg-spacing-md: 30px;
  --dpg-spacing-lg: 48px;
  --dpg-spacing-xl: 64px;

  /* Breakpoints (reference only — CSS variables cannot be used inside @media queries)
     Use 767px in all mobile media queries: @media (max-width: 767px) */
}

/* ============================================
   BASE TYPOGRAPHY
   ============================================ */

body {
  font-family: var(--dpg-font-primary), var(--dpg-font-fallback);
  font-size: var(--dpg-font-size-base) !important;
  color: var(--dpg-black);
  line-height: 1.6;
}

/* ============================================
   LAYOUT - Main Content Area
   ============================================ */

/* Default top padding for all TNEW page types.
   Individual page CSS files override where needed (e.g. events-listing sets all four sides). */
main[class*="tn-"] {
  padding-top: var(--dpg-spacing-md);
}

/* Membership purchase page (e.g. ArtPlay Club): cap and center the card so
   it reads as a single-item purchase flow rather than stretching full width,
   matching the same treatment applied to Development Event ticket pages
   (events-detail.css). No membership-levels.css file exists yet, so this
   lives here rather than in a new page-specific stylesheet. */
.tn-membership-levels-page .tn-membership-product {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   BUTTONS - Global Button Styling (updated)
   ============================================ */

/* Primary button: solid purple fill, yellow text.
   Mirrors the header nav / logo colour pairing so the
   main call-to-action (Log in, Create an account, etc.)
   carries the most visual weight on the page.
   Hover inverts to yellow fill / purple text. */
.btn.btn-primary {
  background-color: var(--dpg-purple);
  color: var(--dpg-white);
  border: 1.5px solid var(--dpg-purple);
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--dpg-font-size-base);
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  outline: none !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary:focus,
.btn.btn-primary:focus-visible {
  background-color: var(--dpg-yellow);
  border-color: var(--dpg-yellow);
  color: var(--dpg-purple);
  outline: none !important;
  text-decoration: none;
}

/* Secondary/utility button: quiet ghost style with a
   light neutral border. Used for lower-priority actions
   (e.g. "Need to reset your password?") so it doesn't
   compete with .btn-primary. */
.btn {
  background-color: transparent;
  color: var(--dpg-purple);
  border: 1.5px solid var(--dpg-neutral-2);
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--dpg-font-size-base);
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  outline: none !important;
}

.btn:hover,
.btn:active,
.btn.active,
.btn:focus,
.btn:focus-visible {
  background-color: var(--dpg-white);
  border-color: var(--dpg-neutral-2);
  color: var(--dpg-purple);
  outline: none !important;
  text-decoration: none;
}

/* ============================================
   FORM ELEMENTS - Radio Buttons
   ============================================ */

/* Radio button checked state: matches brand purple
   Used in ticket booking and event selection forms */
.tn-radio-button-list__input:checked + .tn-radio-button-list__button {
  background-color: var(--dpg-purple);
  color: var(--dpg-white);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text color utilities */
.text-dpg-purple {
  color: var(--dpg-purple);
}

.text-dpg-yellow {
  color: var(--dpg-yellow);
}

/* Background color utilities */
.bg-dpg-purple {
  background-color: var(--dpg-purple);
}

.bg-dpg-light-grey {
  background-color: var(--dpg-light-grey);
}

/* Hide TNEW utility nav globally */
.tn-utility-nav {
  display: none !important;
}

/* Shared page heading — overridden per-page for size/case variations */
.h1, h1,
.h2, h2  {
  font-size: var(--dpg-font-size-lg);
  font-weight: 700;
  color: var(--dpg-purple);
}

.h3, h3 {
  font-size: var(--dpg-font-size-base);
  font-weight: 700;
  color: var(--dpg-purple);
}

.h4, h4 {
  font-size: var(--dpg-font-size-base);
  color: var(--dpg-purple);
  font-weight: 700;
}

.h5, h5 {
  font-size: var(--dpg-font-size-base);
  font-weight: 700;
  color: var(--dpg-black);
}

/* ============================================
   LINKS - Base Anchor Styling
   ============================================ */

a {
  color: var(--dpg-purple);
  text-decoration: underline;
  text-decoration-color: var(--dpg-purple);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  text-decoration-color: var(--dpg-purple);
  color: var(--dpg-purple);
}

a:focus-visible {
  color: var(--dpg-purple);
  outline: 2px solid var(--dpg-purple);
  outline-offset: 2px;
  text-decoration-color: var(--dpg-purple);
}

.tn-required-field {
  display: none !important;
}

.form-control {
  border: 1.5px solid var(--dpg-neutral-2) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-size: var(--dpg-font-size-base) !important;
  padding: 0.6rem 0.75rem !important;
  transition: border-color 0.15s ease;
  height: 36px !important;
}

.form-control:focus {
  border-color: var(--dpg-purple) !important;
  box-shadow: 0 0 0 2px rgba(28, 7, 79, 0.1) !important;
  outline: none !important;
}

input.form-control,
select.form-control,
textarea.form-control {
  color: var(--dpg-black) !important;
}

/* Product type badge (e.g. "Ages 0-8", "Under-5 event") — brand identity shared across all pages */
.tn-product-type-name {
  background-color: var(--dpg-neutral-1) !important;
  color: var(--dpg-purple) !important;
  border: none !important;
  border-radius: 4px;
  font-size: var(--dpg-font-size-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================
   MAINTENANCE PAGE
   ============================================ */

.tn-maintenance-page .tn-header-component {
  text-align: center;
  padding: 5rem 1rem;
}

.tn-maintenance-page .tn-header-component__sub-text h2 {
  font-family: var(--dpg-font-primary), var(--dpg-font-fallback);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 700;
  color: var(--dpg-purple);
  line-height: 1.2;
  margin: 0 0 0.75rem;
  text-transform: none !important;
}


/* Hide TNEW icon/toggle element in card header */
.tn-component-contact-permissions__settings__item__header > div:first-child {
  display: none;
}

/* Hide help-block descriptions */
[id^="tn-cust-category-help-block"] {
  display: none;
}

.tn-component-contact-permissions .tn-component__fieldset-radio {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
}


.tn-component-contact-permissions .tn-component__radio-group {
  display: flex;
  flex-direction: row !important;
  gap: 1.5rem;
  align-items: center;
}

.tn-component-contact-permissions .tn-component__radio-group > div {
  display: inline-flex !important;
  align-items: center;
}

.tn-component-contact-permissions .tn-component__radio-group .radio {
  margin: 0;
  display: inline-flex;
  align-items: center;
}

.tn-component-contact-permissions .tn-component__radio-group label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--dpg-font-size-base);
  color: var(--dpg-neutral-3);
  cursor: pointer;
  margin: 0;
  font-weight: 400;
}

.tn-component-contact-permissions .tn-component__radio-group input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--dpg-neutral-2);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s ease;
}


.tn-component-contact-permissions .tn-component__radio-group input[type="radio"]:checked::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dpg-purple);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}