/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Bricks child theme — companion to Core Framework. CF handles colors, typography, spacing, and components. This file covers animations, glass effects, header/footer gradients, and Bricks-specific overrides that CF can't reach.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      2.0
 Text Domain:  bricks
*/


/* ============================================
   FONT RENDERING
   Core Framework handles the font-family itself,
   but these rendering hints make Inter look crisp.
   ============================================ */
body {
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}


/* ============================================
   GLASS MORPHISM
   backdrop-filter can't be set via CF variables.
   Use class "glass-card" on any Bricks container.
   ============================================ */
.glass-card,
.brxe-container.glass-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(229, 231, 235, 0.5);
  border-radius: var(--radius-lg, 1rem);
  box-shadow: var(--shadow-elevated, 0 12px 32px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.04));
}


/* ============================================
   HEADER — Dark Navy (app sidebar feel)
   Add class "header-dark" to your Bricks header.
   CF can set individual element colors, but the
   full gradient + link behavior needs CSS.
   ============================================ */
.header-dark,
header.brxe-header.header-dark {
  background: linear-gradient(to right,
    var(--navy-800, #2b4f78),
    var(--navy-900, #284464)
  );
  color: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.header-dark a {
  color: rgba(255, 255, 255, 0.8);
  transition: color 200ms ease;
}

.header-dark a:hover {
  color: #ffffff;
}

/* Active nav item — white text, subtle background */
.header-dark .brxe-nav-menu li.current-menu-item > a {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
}

/* Nav link hover */
.header-dark .brxe-nav-menu > li > a {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 200ms ease;
}

.header-dark .brxe-nav-menu > li > a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Dropdown menus inside dark header */
.header-dark .brxe-nav-menu .sub-menu {
  background: var(--navy-900, #284464);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  padding: 0.5rem;
}

.header-dark .brxe-nav-menu .sub-menu a {
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
}

.header-dark .brxe-nav-menu .sub-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* --- Light header alternative --- */
.header-light,
header.brxe-header.header-light {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}


/* ============================================
   FOOTER — Dark Navy
   Add class "footer-dark" to your Bricks footer.
   ============================================ */
.footer-dark,
footer.brxe-footer.footer-dark {
  background: linear-gradient(to bottom,
    var(--navy-900, #284464),
    var(--navy-950, #1b2c42)
  );
  color: rgba(255, 255, 255, 0.7);
}

.footer-dark h1,
.footer-dark h2,
.footer-dark h3,
.footer-dark h4,
.footer-dark h5,
.footer-dark h6 {
  color: #ffffff;
}

.footer-dark a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 200ms ease;
}

.footer-dark a:hover {
  color: var(--olive-400, #9bb45c);
}


/* ============================================
   CARD VARIANTS
   CF handles the base card component, but these
   gradient variants are unique to your app.
   ============================================ */

/* Clinical card — olive tinted */
.card-clinical,
.brxe-container.card-clinical {
  background: linear-gradient(to bottom right,
    var(--olive-50, #f5f7ed),
    #ffffff
  );
  border-color: rgba(211, 221, 177, 0.8);
}

.card-clinical:hover,
.brxe-container.card-clinical:hover {
  border-color: var(--olive-300, #b6c882);
}

/* Supervision card — navy tinted */
.card-supervision,
.brxe-container.card-supervision {
  background: linear-gradient(to bottom right,
    var(--navy-50, #f0f6fc),
    #ffffff
  );
  border-color: rgba(196, 220, 241, 0.8);
}

.card-supervision:hover,
.brxe-container.card-supervision:hover {
  border-color: var(--navy-300, #9cc5e7);
}

/* Interactive card — lift on hover */
.card-interactive,
.brxe-container.card-interactive {
  cursor: pointer;
  transition: all 300ms ease-out;
}

.card-interactive:hover,
.brxe-container.card-interactive:hover {
  transform: translateY(-2px);
}

.card-interactive:active,
.brxe-container.card-interactive:active {
  transform: scale(0.99);
}


/* ============================================
   GRADIENT BACKGROUNDS
   Use as classes on Bricks sections.
   ============================================ */
.gradient-primary {
  background: linear-gradient(to bottom right,
    var(--olive-500, #7B8F3E),
    var(--olive-600, #617330)
  );
}

.gradient-supervision {
  background: linear-gradient(to bottom right,
    var(--navy-700, #2D5E8A),
    var(--navy-800, #2b4f78)
  );
}

.gradient-accent {
  background: linear-gradient(to bottom right,
    var(--rust-500, #E07B3A),
    var(--rust-600, #d15418)
  );
}

.gradient-mesh {
  background: linear-gradient(to bottom right,
    #f9fafb,
    #ffffff,
    rgba(245, 247, 237, 0.3)
  );
}

.gradient-page {
  background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
  min-height: 100vh;
}


/* ============================================
   PROGRESS BARS
   Not a CF component — needed for any tracker
   visuals on the marketing site.
   ============================================ */
.progress-bar {
  width: 100%;
  height: 0.5rem;
  background: #f3f4f6;
  border-radius: 9999px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.8s ease-out;
}

.progress-bar-fill.olive {
  background: linear-gradient(to right, var(--olive-400, #9bb45c), var(--olive-500, #7B8F3E));
}

.progress-bar-fill.navy {
  background: linear-gradient(to right, var(--navy-400, #6da8d9), var(--navy-700, #2D5E8A));
}

.progress-bar-fill.rust {
  background: linear-gradient(to right, var(--rust-400, #ed7c42), var(--rust-500, #E07B3A));
}

.progress-bar-fill.cerulean {
  background: linear-gradient(to right, var(--cerulean-400, #22d3ee), var(--cerulean-600, #0891b2));
}


/* ============================================
   ANIMATIONS & KEYFRAMES
   CF doesn't handle animations. These match
   the app's motion language exactly.
   ============================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes pulseSoft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

@keyframes bounceIn {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.05); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

/* Animation utility classes — add to Bricks elements */
.animate-fade-in      { animation: fadeIn 0.3s ease-out; }
.animate-fade-in-up   { animation: fadeInUp 0.4s ease-out forwards; }
.animate-scale-in     { animation: scaleIn 0.3s ease-out; }
.animate-float        { animation: float 3s ease-in-out infinite; }
.animate-shimmer      { animation: shimmer 2s linear infinite; }
.animate-pulse-soft   { animation: pulseSoft 2s ease-in-out infinite; }
.animate-bounce-in    { animation: bounceIn 0.5s ease-out; }

/* Stagger delays for lists / grids */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.10s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.20s; }
.stagger-5 { animation-delay: 0.25s; }


/* ============================================
   BRICKS ELEMENT MICRO-OVERRIDES
   Small tweaks CF can't handle natively.
   ============================================ */

/* Bricks images — subtle rounded corners */
.brxe-image img {
  border-radius: var(--radius-md, 0.75rem);
}

/* Bricks accordion — olive accent on open */
.brxe-accordion .accordion-title-wrapper.brx-open {
  color: var(--olive-600, #617330);
}

/* Bricks tabs — olive underline on active tab */
.brxe-tabs .tab-menu .tab-title.brx-open {
  color: var(--olive-600, #617330);
  border-bottom: 2px solid var(--olive-500, #7B8F3E);
}

/* Bricks form focus ring — olive glow */
.brxe-form input:focus,
.brxe-form textarea:focus,
.brxe-form select:focus {
  border-color: var(--olive-500, #7B8F3E);
  box-shadow: 0 0 0 3px rgba(123, 143, 62, 0.15);
  outline: none;
}

/* Bricks form submit — olive gradient */
.brxe-form .submit-button-wrapper button,
.brxe-form input[type="submit"] {
  background: linear-gradient(to right, var(--olive-500, #7B8F3E), var(--olive-600, #617330)) !important;
  color: #ffffff !important;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-lg, 1rem) !important;
  transition: all 200ms ease;
}

.brxe-form .submit-button-wrapper button:hover,
.brxe-form input[type="submit"]:hover {
  background: linear-gradient(to right, var(--olive-600, #617330), var(--olive-700, #4b5928)) !important;
  box-shadow: 0 4px 16px rgba(123, 143, 62, 0.2);
}

/* Bricks pagination — olive active state */
.brxe-pagination .page-numbers.current {
  background: var(--olive-500, #7B8F3E);
  color: #ffffff;
}

.brxe-pagination .page-numbers:hover:not(.current) {
  background: var(--olive-50, #f5f7ed);
  color: var(--olive-600, #617330);
}

/* WordPress block editor button override */
.wp-block-button__link {
  background: linear-gradient(to right, var(--olive-500, #7B8F3E), var(--olive-600, #617330));
  border-radius: var(--radius-lg, 1rem);
  font-weight: 700;
  transition: all 200ms ease;
}

.wp-block-button__link:hover {
  background: linear-gradient(to right, var(--olive-600, #617330), var(--olive-700, #4b5928));
  box-shadow: 0 4px 16px rgba(123, 143, 62, 0.2);
}


/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}


/* ============================================
   TEXT SELECTION
   ============================================ */
::selection {
  background: rgba(123, 143, 62, 0.2);
  color: #111827;
}