/*
Theme Name: Anodyne Endodontics
Theme URI: https://anodyneendo.com
Author: Jarvis
Description: Custom theme for Anodyne Endodontics, focused on AEO and calm UI.
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: health, medical, clean, responsive
Text Domain: anodyne
*/

/* 
   CRITICAL FALLBACK STYLES 
   Ensures colors and fonts load even if Tailwind CDN is slow.
*/

:root {
    --color-sage: #6B8E85;
    --color-sage-light: #8DA9A0;
    --color-sage-dark: #4A635D;
    --color-sage-deep: #2C3E3A;
    
    --color-peach: #E8C4A8;
    --color-peach-light: #F5DBC7;
    
    --color-cream: #FDFBF7;
    --color-charcoal: #1F2937;
}

body {
    background-color: var(--color-cream) !important;
    color: var(--color-charcoal) !important;
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0;
}
<script> var script = document.createElement("script"); script.setAttribute("nowprocket", ""); script.setAttribute("nitro-exclude", ""); script.src = "https://seo-tools.leadconnectorhq.com/scripts/dynamic_optimization.js"; script.dataset.uuid = "adbadb6c-a4c7-4a30-9863-22efad16ef1c"; script.id = "sa-dynamic-optimization"; document.head.appendChild(script); </script>

/* Typography Fallbacks */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
}

/* Critical Backgrounds (overrides Tailwind if needed) */
.bg-cream { background-color: var(--color-cream) !important; }
.bg-sage-deep { background-color: var(--color-sage-deep) !important; }
.bg-sage { background-color: var(--color-sage) !important; }
.bg-peach { background-color: var(--color-peach) !important; }
.bg-white { background-color: #ffffff !important; }

/* Text Colors */
.text-sage-deep { color: var(--color-sage-deep) !important; }
.text-sage { color: var(--color-sage) !important; }
.text-peach { color: var(--color-peach) !important; }
.text-white { color: #ffffff !important; }

/* Video Background Helper */
.video-container {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -88px; /* Offset for nav */
}

.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    filter: brightness(0.6);
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(44,62,58,0.6), rgba(44,62,58,0.4), rgba(253,251,247,1));
    z-index: 0;
}

/* Nav Fixes */
#navbar {
    transition: all 0.3s ease;
}

/* Submenu Styling */
.group:hover .submenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
.submenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

/* Obsidian color - dark footer background */
.bg-obsidian { background-color: #1B2725 !important; }


/* ============================================================
   TAILWIND OPACITY VARIANT FIXES
   Tailwind CDN cannot generate opacity modifiers for custom hex
   colors without the <alpha-value> format. These explicit rules
   patch all opacity variants used across the site.
   ============================================================ */

/* Sage deep (#2C3E3A) */
.bg-sage-deep\/40 { background-color: rgba(44,62,58,0.4) !important; }
.bg-sage-deep\/60 { background-color: rgba(44,62,58,0.6) !important; }
.bg-sage-deep\/10 { background-color: rgba(44,62,58,0.1) !important; }
.bg-sage-deep\/5  { background-color: rgba(44,62,58,0.05) !important; }
.bg-sage-deep\/20 { background-color: rgba(44,62,58,0.2) !important; }
.text-sage-deep\/70 { color: rgba(44,62,58,0.7) !important; }
.text-sage-deep\/60 { color: rgba(44,62,58,0.6) !important; }
.text-sage-deep\/50 { color: rgba(44,62,58,0.5) !important; }
.text-sage-deep\/40 { color: rgba(44,62,58,0.4) !important; }
.text-sage-deep\/30 { color: rgba(44,62,58,0.3) !important; }
.text-sage-deep\/20 { color: rgba(44,62,58,0.2) !important; }
.border-sage-deep\/10 { border-color: rgba(44,62,58,0.1) !important; }
.border-sage-deep\/20 { border-color: rgba(44,62,58,0.2) !important; }

/* Sage (#6B8E85) */
.bg-sage\/5  { background-color: rgba(107,142,133,0.05) !important; }
.bg-sage\/10 { background-color: rgba(107,142,133,0.1) !important; }
.bg-sage\/20 { background-color: rgba(107,142,133,0.2) !important; }
.bg-sage\/30 { background-color: rgba(107,142,133,0.3) !important; }
.border-sage\/5  { border-color: rgba(107,142,133,0.05) !important; }
.border-sage\/10 { border-color: rgba(107,142,133,0.1) !important; }
.border-sage\/20 { border-color: rgba(107,142,133,0.2) !important; }

/* Sage light (#8DA9A0) */
.text-sage-light\/60 { color: rgba(141,169,160,0.6) !important; }
.text-sage-light\/80 { color: rgba(141,169,160,0.8) !important; }
.text-sage-light\/40 { color: rgba(141,169,160,0.4) !important; }

/* Peach (#E8C4A8) */
.bg-peach\/5  { background-color: rgba(232,196,168,0.05) !important; }
.bg-peach\/10 { background-color: rgba(232,196,168,0.1) !important; }
.bg-peach\/20 { background-color: rgba(232,196,168,0.2) !important; }
.bg-peach\/30 { background-color: rgba(232,196,168,0.3) !important; }
.border-peach\/10 { border-color: rgba(232,196,168,0.1) !important; }
.border-peach\/20 { border-color: rgba(232,196,168,0.2) !important; }
.border-peach\/30 { border-color: rgba(232,196,168,0.3) !important; }
.text-peach\/50  { color: rgba(232,196,168,0.5) !important; }
.ring-offset-peach\/30 { --tw-ring-color: rgba(232,196,168,0.3); }

/* White opacity variants */
.bg-white\/5  { background-color: rgba(255,255,255,0.05) !important; }
.bg-white\/10 { background-color: rgba(255,255,255,0.1) !important; }
.bg-white\/20 { background-color: rgba(255,255,255,0.2) !important; }
.bg-white\/90 { background-color: rgba(255,255,255,0.9) !important; }
.border-white\/10 { border-color: rgba(255,255,255,0.1) !important; }
.border-white\/20 { border-color: rgba(255,255,255,0.2) !important; }
.border-white\/30 { border-color: rgba(255,255,255,0.3) !important; }
.text-white\/90 { color: rgba(255,255,255,0.9) !important; }
.text-white\/80 { color: rgba(255,255,255,0.8) !important; }
.text-white\/70 { color: rgba(255,255,255,0.7) !important; }
.text-white\/60 { color: rgba(255,255,255,0.6) !important; }
.text-white\/40 { color: rgba(255,255,255,0.4) !important; }
.text-white\/30 { color: rgba(255,255,255,0.3) !important; }
.text-white\/20 { color: rgba(255,255,255,0.2) !important; }

/* Box shadow color fixes */
.shadow-sage\/20 { --tw-shadow-color: rgba(107,142,133,0.2); }
.shadow-sage\/30 { --tw-shadow-color: rgba(107,142,133,0.3); }
.shadow-sage\/40 { --tw-shadow-color: rgba(107,142,133,0.4); }