/*
 Theme Name:   Top Rock Music Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Child theme for Top of the Rock Tuition. Requires the Bricks theme as the parent theme — do not use without Bricks active.
 Author:       Reflect & Refine
 Author URI:   https://reflectandrefine.com/
 Template:     bricks
 Version:      1.1
 Text Domain:  top-rock-music-child
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html

 Developer:    Reflect & Refine
 Developer URI: https://reflectandrefine.com/

 IMPORTANT: This child theme must be used with the Bricks parent theme.
 Activate Bricks first, then activate this child theme.
*/

/* ========================================
   TOP ROCK CUSTOM STYLES
   All custom classes use tr-* prefix
   ======================================== */

/* Top Rock Color Variables
   ✅ Uses ACSS primary (#d4af37) with custom TR variables */
:root {
	/* Top Rock Gold Palette - Uses ACSS primary with fallbacks */
	--tr-gold-primary: var(--primary, #d4af37);
	--tr-gold-light: var(--primary-light, #f0e6a4);
	--tr-gold-dark: var(--primary-dark, #b38728);
	
	/* Top Rock Container Backgrounds */
	--tr-dark: var(--neutral-ultra-dark, #1a1a1a);
	--tr-container-bg: var(--neutral-ultra-dark-trans-60, rgba(26, 26, 26, 0.6));
	--tr-container-bg-strong: var(--neutral-ultra-dark-trans-80, rgba(26, 26, 26, 0.8));
	--tr-container-bg-light: var(--neutral-ultra-dark-trans-40, rgba(26, 26, 26, 0.4));
	--tr-container-bg-heavy: var(--neutral-ultra-dark-trans-90, rgba(26, 26, 26, 0.95));
	
	/* Top Rock Effects - Gold borders and shadows */
	--tr-border: var(--primary-trans-30, rgba(212, 175, 55, 0.3));
	--tr-border-light: var(--primary-trans-20, rgba(212, 175, 55, 0.2));
	--tr-shadow: 0 4px 30px var(--black-trans-30, rgba(0, 0, 0, 0.3));
	--tr-shadow-strong: 0 8px 25px var(--primary-trans-40, rgba(212, 175, 55, 0.4));
	--tr-glow: 0 0 10px var(--primary-trans-50, rgba(212, 175, 55, 0.5));
	
	/* Border Radius - Uses ACSS setting (currently 0 - sharp corners) */
	--tr-radius: var(--radius, 0);
}

/* ========================================
   1. GOLD GRADIENT TEXT
   ======================================== */

.tr-gold-gradient-text {
	background: linear-gradient(135deg, var(--tr-gold-light), var(--tr-gold-primary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.tr-gold-gradient-text-full {
	background: linear-gradient(135deg, var(--tr-gold-light), var(--tr-gold-primary), var(--tr-gold-dark));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Apply gold gradient to all h1-h6 by default */
h1, h2, h3, h4, h5, h6 {
	background-image: linear-gradient(45deg, var(--tr-gold-light) 0%, var(--tr-gold-primary) 51%, var(--tr-gold-dark) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
  background-image: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  color: var(--white); /* or set a specific fallback color */
}

h1 { display: flex; flex-direction: column; }
  
h1 small{
	font-size: var(--h2);
}

/* ========================================
   2. FROSTED GLASS EFFECTS
   ======================================== */

.tr-frosted-glass {
	background: var(--tr-container-bg);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	box-shadow: var(--tr-shadow);
	padding: 2rem;
}

.tr-frosted-glass-strong {
	background: var(--tr-container-bg-strong);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
}

.tr-frosted-glass-light {
	background: var(--tr-container-bg-light);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
}


/* ========================================
   3. BUTTON STYLING
   ======================================== */

@media (hover: hover) and (pointer: fine) {
    [class*="btn--"]:where(:not(.btn--none, .wp-block-button)):hover {
		transform: translateY(-2px);
		box-shadow: var(--tr-shadow-strong);
	}
}

/* ========================================
   4. CARD STYLING
   ======================================== */

/* .tr-card {
	background: var(--tr-container-bg);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	box-shadow: var(--tr-shadow);
	padding: var(--card-padding, var(--space-m));
	transition: all 0.3s ease;
	color: var(--text-light);
}

.tr-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--tr-shadow-strong);
	border-color: var(--tr-gold-primary);
	color: var(--text-dark);
} */

/* ========================================
   5. HOVER EFFECTS
   ======================================== */

.tr-hover-lift {
	transition: all 0.3s ease;
}

.tr-hover-lift:hover {
	transform: translateY(-2px);
	box-shadow: var(--tr-shadow-strong);
}

.tr-hover-gold-border {
	transition: all 0.3s ease;
	border: 1px solid var(--tr-border);
}

.tr-hover-gold-border:hover {
	border-color: var(--tr-gold-primary);
}

/* ========================================
   6. BACKGROUNDS
   ======================================== */

.tr-bg-gold-gradient {
	background: linear-gradient(135deg, var(--tr-gold-light), var(--tr-gold-primary), var(--tr-gold-dark));
}

.tr-bg-dark {
	background: var(--tr-dark);
}

/* Geometric pattern overlay for hero sections */
.hero::before,
.tr-hero-pattern::before {
	content: "";
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cdefs%3E%3Cpattern id='a' x='0' y='0' width='200' height='200' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0h200L100 100ZM0 0v200l100-100ZM200 0v200L100 100Z' fill='none' stroke='%23d4af37'/%3E%3Cpath d='M0 200h200L100 100Z' fill='none' stroke='%23d4af37'/%3E%3Cpath fill='none' stroke='%23d4af37' d='M40 40h120v120H40z'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3C/svg%3E");
    height: 100%;
    left: 0;
    opacity: .15;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

/* ========================================
   7. BORDERS & DIVIDERS
   ======================================== */

.tr-border-gold {
	border: 1px solid var(--tr-border);
}

.tr-border-gold-thick {
	border: 2px solid var(--tr-gold-primary);
}

.tr-divider-gold {
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--tr-gold-primary), transparent);
	border: none;
}

.tr-divider-gold-thick {
	width: 100%;
	height: var(--border-width, 3px);
	background: linear-gradient(90deg, transparent, var(--tr-gold-light), var(--tr-gold-primary), var(--tr-gold-light), transparent);
	margin: var(--space-xl) 0;
	border: none;
}

/* Automatic CSS divider--all: gold line between items */
.divider--all.divider--all > *:not(:last-child)::after {
	border-block-end-color: var(--tr-gold-primary);
}

/* ========================================
   8. TEXT UTILITIES
   ======================================== */

/* .tr-text-gold {
	color: var(--tr-gold-primary);
}

.tr-text-gold-light {
	color: var(--tr-gold-light);
}

.tr-text-gold-dark {
	color: var(--tr-gold-dark);
} */

/* ========================================
   9. SHADOWS
   ======================================== */

/* .tr-shadow-gold {
	box-shadow: var(--tr-shadow);
}

.tr-shadow-gold-strong {
	box-shadow: var(--tr-shadow-strong);
}

.tr-glow-gold {
	box-shadow: var(--tr-glow);
} */

/* ========================================
   10. FORM STYLING
   ======================================== */

.tr-input {
	background: var(--tr-container-bg);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	color: var(--white);
	padding: var(--space-s);
	transition: var(--transition);
}

.tr-input:focus {
	border-color: var(--tr-gold-primary);
	box-shadow: 0 0 0 var(--focus-width, 3px) var(--tr-border-light);
	outline: none;
}

.tr-input::placeholder {
	color: var(--white-trans-50, rgba(255, 255, 255, 0.5));
}

/* ========================================
   11. IMAGE STYLES
   ======================================== */

.tr-image a {
	transition: all 0.3s ease;
}

.tr-image a:hover {
	transform: translateY(-2px);
	box-shadow: var(--tr-shadow-strong);
	border: 1px solid var(--tr-gold-primary);
}

.tr-image-border-gold {
	border: 2px solid var(--tr-gold-primary);
}


/* ========================================
   12. UTILITY CLASSES
   ======================================== */

/* .tr-rounded {
	border-radius: var(--tr-radius);
}

.tr-transition {
	transition: all 0.3s ease;
} */

/* ========================================
   13. SECTION STYLING
   ======================================== */

.tr-section {
	padding: var(--section-space-m) var(--section-padding-x);
}

.tr-section-dark {
	background: var(--tr-dark);
	padding: var(--section-space-m) var(--section-padding-x);
}

/* ========================================
   15. RESPONSIVE UTILITIES
   ======================================== */

/* @media (max-width: 768px) {
	.tr-section,
	.tr-section-dark {
		padding: var(--space-xl) var(--space-m);
	}
	
	.tr-frosted-glass,
	.tr-card {
		padding: var(--space-m);
	}
} */

/* ========================================
   TAXONOMY TERMS - NO LINKS (Not needed with shortcodes)
   Using shortcodes [teacher_instruments] and [teacher_location] instead
   ======================================== */

/* ========================================
   LOGO PULSE ANIMATION
   ======================================== */   


@keyframes logo-pulse {
	0% {
		transform: scale(1)
	}

	20% {
		border-color: var(--tr-gold-primary);
		border-width: 2px;
		box-shadow: 0 0 1rem var(--tr-gold-primary);
		transform: scale(1.1)
	}

	40% {
		border-color: var(--tr-gold-primary);
		border-width: 2px;
		box-shadow: 0 0 1rem var(--tr-gold-primary);
		transform: scale(1)
	}

	60% {
		border-color: var(--tr-gold-primary);
		border-width: 2px;
		box-shadow: 0 0 1rem var(--tr-gold-primary);
		transform: scale(1.05)
	}

	to {
		transform: scale(1)
	}
}


/* ------------------------------------------------
   TEXT REVEAL ANIMATION
   ------------------------------------------------ */

.page-header-block h1, .page-header-block h1 small, .page-header-block .tr-header-content-box, .page-header-block .post-meta {
	animation: slideIn 0.8s ease-out forwards;
}
.page-header-block .tr-header-content-box {
	transform: translateY(20px);
}
.page-header-block h1, .page-header-block h1 small, .page-header-block .post-meta {
	transform: translateY(10px);
}
.page-header-block .tr-header-content-box {
	animation-delay: 0.2s;  /* Slight delay for polish */
}
.page-header-block h1, .page-header-block .post-meta, .page-header-block h1 small {
	animation-delay: 0.3s;  /* Slight delay for polish */
}

@keyframes slideIn {
	to {
		transform: translateY(0);
	}
}

/* Initial state - hidden/off-screen */
[data-tr-reveal] {
	transform: translateY(30px);
	transition: transform 0.6s ease;
  }
  
  /* Revealed state - visible */
  [data-tr-reveal].tr-reveal {
	transform: translateY(0);
  }

/* ------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------ */

   .tr-header-image {
	/* Ensure proper focus for keyboard navigation */
	outline: none;
  }
  
  .tr-header-content-box:focus-within {
	outline: 2px solid #d4af37;
	outline-offset: 4px;
  }
  
  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
	.page-header-block .tr-hero-title span,
	.page-header-block .tr-hero-subtitle span {
	  transition: none;
	  opacity: 1;
	  transform: none;
	}
  }

/* ------------------------------------------------
   TEACHERS SLIDER DOTS STYLING
   ------------------------------------------------ */

/* Swiper pagination dots for teachers carousel (Bricks Swiper.js) */
.bricks-swiper-container + .swiper-pagination-bullets {
	position: relative;
	margin-top: var(--space-l, 2rem);
	text-align: center;
	bottom: auto;
}

.bricks-swiper-container + .swiper-pagination-bullets .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	background: var(--tr-gold-primary, #d4af37);
	opacity: 0.4;
	transition: all 0.3s ease;
	margin: 0 6px;
}

.bricks-swiper-container + .swiper-pagination-bullets .swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--tr-gold-primary, #d4af37);
	transform: scale(1.2);
}

/* Custom CSS Slider Dots (for non-Swiper sliders) */
.tr-slider-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: var(--space-xs, .5rem);
	padding: 1px;
	list-style: none;
	position: relative;
	z-index: 10;
}

.tr-slider-dot {
	width: 12px;
	height: 12px;
	padding: 0;
	margin: 0;
	border: 2px solid var(--tr-gold-primary, #d4af37);
	background: transparent;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
	opacity: 0.4;
	position: relative;
}

.tr-slider-dot:hover {
	opacity: 0.7;
	transform: scale(1.1);
}

.tr-slider-dot.active {
	opacity: 1;
	background: var(--tr-gold-primary, #d4af37);
	transform: scale(1.2);
}

.tr-slider-dot:focus {
	outline: 2px solid var(--tr-gold-primary, #d4af37);
	outline-offset: 2px;
}

.tr-slider-dot:focus:not(:focus-visible) {
	outline: none;
}

/* Accessibility: Screen reader only text */
.tr-slider-dot .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ========================================
   COOKIE CONSENT – External embeds (YouTube, Google Maps)
   Termageddon/Usercentrics: ensure placeholder message is visible
   ======================================== */

/* Usercentrics blocking placeholder: always visible and sized inside Bricks containers */
.brxe-video .uc-embedding-wrapper,
.brxe-map .uc-embedding-wrapper {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	min-height: 200px !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 1.5rem !important;
	box-sizing: border-box !important;
	background: var(--tr-container-bg-heavy, rgba(26, 26, 26, 0.95)) !important;
	border: 1px solid var(--tr-border, rgba(212, 175, 55, 0.3)) !important;
	color: var(--tr-gold-primary, #d4af37) !important;
}

.brxe-video .uc-embedding-wrapper h3,
.brxe-map .uc-embedding-wrapper h3 {
	font-size: 1rem !important;
	margin-bottom: 0.5rem !important;
	color: var(--tr-gold-primary, #d4af37) !important;
}

.brxe-video .uc-embedding-wrapper p.description-text,
.brxe-map .uc-embedding-wrapper p.description-text {
	font-size: 0.875rem !important;
	color: inherit !important;
	text-align: center !important;
}

.brxe-video .uc-embedding-wrapper button.uc-embedding-accept,
.brxe-map .uc-embedding-wrapper button.uc-embedding-accept {
	background-color: var(--tr-gold-primary, #d4af37) !important;
	color: #1a1a1a !important;
	border: none !important;
	padding: 0.5rem 1rem !important;
	cursor: pointer !important;
	margin-top: 0.75rem !important;
}

/* Bricks video: keep aspect ratio so placeholder has space when iframe is blocked */
.brxe-video {
	min-height: 200px;
}

/* Bricks map: ensure container has height so consent placeholder is visible when map script/iframe is blocked */
.brxe-map,
[data-bricks-map-options] {
	min-height: 200px !important;
	position: relative;
}

/* Ensure our fallback placeholder appears above empty map canvas */
.brxe-map .tr-consent-placeholder,
[data-bricks-map-options] .tr-consent-placeholder {
	z-index: 2;
}

/* Fallback placeholder (when Usercentrics wrapper is missing or empty) */
.tr-consent-placeholder {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	min-height: 200px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 1.5rem !important;
	box-sizing: border-box !important;
	background: var(--tr-container-bg-heavy, rgba(26, 26, 26, 0.95)) !important;
	border: 1px solid var(--tr-border, rgba(212, 175, 55, 0.3)) !important;
	text-align: center !important;
}

.tr-consent-placeholder p {
	margin: 0 0 0.5rem !important;
	font-size: 0.875rem !important;
}

.tr-consent-placeholder .tr-consent-btn {
	display: inline-block !important;
	margin-top: 0.75rem !important;
	padding: 0.5rem 1rem !important;
	background: var(--tr-gold-primary, #d4af37) !important;
	color: #1a1a1a !important;
	border: none !important;
	cursor: pointer !important;
	font-size: 0.875rem !important;
	text-decoration: none !important;
}

.tr-consent-placeholder .tr-consent-btn:hover {
	opacity: 0.9 !important;
}