/* Why Oh WiFi - Cal.com Brand Override */
/* Injected by calcom-start.sh at container startup */
/* Last updated: 9 February 2026 */
/* Supports: Light mode, Dark mode, Signal O circle motifs */

/* ============================================
   PLUS JAKARTA SANS - Self-hosted (variable font, latin subset)
   Single woff2 file covers weights 400-800
   Source: Google Fonts v12, downloaded 9 Feb 2026
   ============================================ */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================
   CSS VARIABLE OVERRIDES
   Override Cal.com's font stack and brand colours
   ============================================ */
:root {
  /* Font stack overrides */
  --font-sans: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
  --font-cal: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;

  /* Brand colours - light mode */
  --brand-default: #0066CC !important;
  --brand-emphasis: #003366 !important;
  --brand-subtle: #E6F0FF !important;
  --brand-text: #FFFFFF !important;
}

/* Dark mode brand colour adjustments */
html.dark {
  --brand-default: #3399FF !important;
  --brand-emphasis: #66B3FF !important;
  --brand-subtle: #0D2240 !important;
  --brand-text: #FFFFFF !important;
}

/* ============================================
   GLOBAL FONT OVERRIDE
   Ensure Plus Jakarta Sans is used everywhere
   ============================================ */
html, body {
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Override the Inter font-family class generated by Next.js */
[class*="inter_"], [class*="__className"] {
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Cal Sans heading font override - use Plus Jakarta Sans 800 */
[class*="font-cal"], .font-cal, [class*="calfont_"], [class*="calFont"] {
  font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
  font-weight: 800 !important;
}

/* ============================================
   DECORATIVE CIRCLE MOTIFS (Hestia Design System)
   "Signal O" pattern - overlapping translucent ring outlines
   Represents WiFi signals from the "O" in "Why Oh WiFi"
   Green top-right, Orange bottom-left
   ============================================ */

/* Green circle - top right (Highlight Green #6EE7B7) */
body::before {
  content: '';
  position: fixed;
  top: -120px;
  right: -120px;
  width: 400px;
  height: 400px;
  border: 60px solid rgba(110, 231, 183, 0.08);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Orange circle - bottom left (Signal Orange #FF6B35) */
body::after {
  content: '';
  position: fixed;
  bottom: -60px;
  left: -60px;
  width: 250px;
  height: 250px;
  border: 45px solid rgba(255, 107, 53, 0.07);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Dark mode circles - slightly more visible against dark navy */
html.dark body::before {
  border-color: rgba(110, 231, 183, 0.05);
}

html.dark body::after {
  border-color: rgba(255, 107, 53, 0.05);
}

/* ============================================
   LIGHT MODE - PAGE STYLING
   Light Blue (#F8FBFF) background from Brand Bible
   ============================================ */

body {
  background-color: #F8FBFF !important;
}

/* ============================================
   DARK MODE - BRANDED NAVY THEME
   Deep blue-tinted dark mode (not generic grey/black)
   Aligns with Connection Blue brand colour family
   ============================================ */

html.dark body {
  background-color: #0D1B2A !important;
}

/* Main content areas */
html.dark main,
html.dark [data-testid="main"] {
  background-color: transparent !important;
}

/* Default backgrounds → branded navy */
html.dark [class*="bg-default"]:not(button):not(a) {
  background-color: #0D1B2A !important;
}

/* Muted/secondary backgrounds → slightly lighter navy */
html.dark [class*="bg-muted"]:not(button):not(a) {
  background-color: #132A43 !important;
}

/* Subtle backgrounds (sidebars, secondary panels) */
html.dark [class*="bg-subtle"]:not(button):not(a) {
  background-color: #0F2236 !important;
}

/* Emphasis backgrounds (inverted sections) */
html.dark [class*="bg-emphasis"]:not(button):not(a) {
  background-color: #1A3654 !important;
}

/* Border colours → branded navy borders */
html.dark [class*="border-default"] {
  border-color: #1E3A5F !important;
}

html.dark [class*="border-subtle"] {
  border-color: #162D4A !important;
}

/* Text - ensure readability on navy background */
html.dark [class*="text-default"],
html.dark [class*="text-emphasis"] {
  color: #F0F4F8 !important;
}

html.dark [class*="text-subtle"],
html.dark [class*="text-muted"] {
  color: #8899AA !important;
}

/* Dark mode inverted text */
html.dark [class*="text-inverted"] {
  color: #0D1B2A !important;
}

/* ============================================
   BRAND COLOUR OVERRIDES (both modes)
   Connection Blue: #0066CC
   Signal Orange: #FF6B35 (accent)
   Deep Blue: #003366 (emphasis)
   ============================================ */

/* Primary buttons and interactive elements */
button[data-testid="confirm-book-button"],
button[class*="bg-brand"],
[class*="bg-brand-default"] {
  background-color: #0066CC !important;
}

button[data-testid="confirm-book-button"]:hover,
button[class*="bg-brand"]:hover {
  background-color: #005AB5 !important;
}

/* Dark mode buttons - slightly brighter blue for contrast */
html.dark button[data-testid="confirm-book-button"],
html.dark button[class*="bg-brand"],
html.dark [class*="bg-brand-default"] {
  background-color: #0077EE !important;
}

html.dark button[data-testid="confirm-book-button"]:hover,
html.dark button[class*="bg-brand"]:hover {
  background-color: #0066CC !important;
}

/* Selected time slot highlight */
button[data-testid*="time"][aria-pressed="true"],
button[data-testid*="time"][class*="bg-brand"] {
  background-color: #0066CC !important;
  border-color: #0066CC !important;
}

html.dark button[data-testid*="time"][aria-pressed="true"],
html.dark button[data-testid*="time"][class*="bg-brand"] {
  background-color: #0077EE !important;
  border-color: #0077EE !important;
}

/* Accent colour for links and brand text */
[class*="text-brand-default"] {
  color: #0066CC !important;
}

html.dark [class*="text-brand-default"] {
  color: #3399FF !important;
}

/* ============================================
   DARK MODE - CALENDAR WIDGET
   ============================================ */

/* Calendar date cells */
html.dark [data-testid*="calendar"] button {
  color: #F0F4F8 !important;
}

/* Calendar disabled/unavailable dates */
html.dark [data-testid*="calendar"] button:disabled {
  color: #3D5A80 !important;
}

/* Calendar today indicator */
html.dark [data-testid*="calendar"] [class*="today"] {
  background-color: #1A3654 !important;
}

/* ============================================
   DARK MODE - TIME SLOTS
   ============================================ */

html.dark button[data-testid*="time"]:not([aria-pressed="true"]) {
  background-color: #132A43 !important;
  border-color: #1E3A5F !important;
  color: #F0F4F8 !important;
}

html.dark button[data-testid*="time"]:not([aria-pressed="true"]):hover {
  background-color: #1A3654 !important;
  border-color: #3399FF !important;
}

/* ============================================
   DARK MODE - FORM INPUTS
   ============================================ */

html.dark input,
html.dark textarea,
html.dark select {
  background-color: #132A43 !important;
  border-color: #1E3A5F !important;
  color: #F0F4F8 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #6B7F95 !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: #3399FF !important;
  box-shadow: 0 0 0 1px rgba(51, 153, 255, 0.3) !important;
}

/* ============================================
   DARK MODE - DIVIDERS & SEPARATORS
   ============================================ */

html.dark hr {
  border-color: #1E3A5F !important;
}

/* ============================================
   HIDE ALL CAL.COM BRANDING
   ============================================ */

/* "Powered by Cal.com" in all forms */
[data-testid="powered-by-calcom"],
[data-testid="powered-by"],
a[href*="cal.com/signup"],
a[href*="go.cal.com"],
a[href*="cal.com/resources"],
a[href*="cal.com/blog"],
a[href*="cal.com/docs"],
p:has(a[href*="cal.com"]),
span:has(a[href*="cal.com"]) {
  display: none !important;
}

/* Hide ALL Cal.com Terms/Privacy links - use our own via env vars */
a[href*="cal.com/terms"],
a[href*="cal.com/privacy"],
footer a[href*="cal.com"] {
  display: none !important;
}

/* Hide any "powered by" text */
[class*="poweredBy"],
[class*="powered-by"],
[class*="PoweredBy"] {
  display: none !important;
}

/* Ensure our own terms/privacy links remain visible */
a[href*="whyohwifi.com.au/terms"],
a[href*="whyohwifi.com.au/privacy"] {
  display: inline !important;
  visibility: visible !important;
}

/* ============================================
   BOOKING PAGE REFINEMENTS
   ============================================ */

/* Event description - show full content, no scroll/fade */
[data-testid="event-meta"] p,
[data-testid="event-meta"] [class*="text-subtle"] {
  line-height: 1.6;
}

/* Remove scroll constraint on description area */
[data-testid="event-meta"] [class*="overflow"],
[data-testid="event-meta"] [class*="max-h"],
[data-testid="event-meta"] [style*="max-height"],
[data-testid="event-meta"] [class*="scroll"] {
  max-height: none !important;
  overflow: visible !important;
}

/* Kill the fade gradient overlay (white-to-transparent) */
[data-testid="event-meta"] [class*="overflow"]::after,
[data-testid="event-meta"] [class*="overflow"]::before,
[data-testid="event-meta"] [class*="max-h"]::after,
[data-testid="event-meta"] [class*="scroll"]::after,
[data-testid="event-meta"] [class*="fade"]::after,
[data-testid="event-meta"] [class*="fade"] {
  display: none !important;
  background: none !important;
  background-image: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Profile name - ensure Plus Jakarta Sans */
[data-testid="event-meta"] h1,
[data-testid="event-meta"] h2,
[data-testid="event-meta"] [class*="text-emphasis"] {
  font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
  font-weight: 700 !important;
}

/* Time slot buttons */
button[data-testid*="time"] {
  font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
  border-radius: 8px;
}