/*/*
Theme Name: Enterra
Description: Main stylesheet - Refactored for maintainability
Template: generatepress
Version: 2.0.0
*/

/* =============================================================================
    TABLE OF CONTENTS
=============================================================================

    0. ROOT
    1. CSS Variables & Design Tokens
    2. Base / Reset
    3. Typography
    4. Layout & Spacing Utilities
    5. Flexbox & Grid Utilities
    6. Component Classes
        6.1 Buttons
        6.2 Inputs & Forms
        6.3 Cards & Containers
        6.4 Navigation & Dropdowns
        6.5 Icons
    7. Effects (Shadows, Blur, Gradients)
    8. Responsive Utilities
    9. Print Styles

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

/*
================================================================================
    IMPORTS
================================================================================
*/

:root {

    /* ========== PRIMARY ORANGE SCALE ========== */
    --color-primary: #43c064;
    /* Main action color */
    --color-primary-dark: #1d8c3b;
    /* Hover/active state */
    --color-primary-darker: #0a6021;
    --color-primary-light: #a0ddb0;
    /* Gradient end / highlights */
    --color-primary-dim: #0a602158;
    /* Subtle backgrounds */
    --color-primary-dim-20: #0a602124;
    /* Blur decal opacity */

    /* ========== NEUTRAL SURFACE SCALE ========== */
    --color-white: #ffffff;
    /* Page background */
    --color-surface: #f5f6f7;
    /* Page background */
    --color-surface-elevated: #ffffff;
    /* Cards, modals */
    --color-surface-variant: #dadddf;
    /* Subtle borders/dividers */
    --color-on-surface: #2c2f30;
    /* Primary text */
    --color-on-surface-variant: #595c5d;
    /* Secondary text */
    --color-on-surface-inverse: #9b9d9e;
    /* Disabled/placeholder text */

    /* ========== SUPPORTING COLORS ========== */
    --color-secondary: #d9f9e1;
    /* Soft warm background */
    --color-secondary-container: #d7e4ec;
    /* Subtle UI elements */
    --color-on-secondary: #47545a;
    /* Text on secondary backgrounds */

    --color-error: #b02500;
    --color-error-container: #f95630;

    /* ========== EFFECTS & UTILITIES ========== */
    --color-border-glow: rgba(255, 255, 255, 0.49);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-orange-glow: 0 10px 30px -10px rgba(10, 188, 31, 0.3);

    /* ========== TYPOGRAPHY ========== */
    --font-headline: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body: system-ui, -apple-system, sans-serif;

    /* ========== SPACING SCALE (8px base) ========== */
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.1rem;
    /* 24px */
    --space-6: 1.5rem;
    /* 24px */
    --space-8: 2rem;
    /* 32px */
    --space-10: 2.5rem;
    /* 40px */
    --space-12: 3rem;
    /* 48px */
    --space-16: 4rem;
    /* 64px */
    --space-20: 5rem;
    /* 80px */
    --space-40: 10rem;
    /* 80px */

    /* ========== BORDER RADIUS ========== */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-l: 2.5rem;
    --radius-xl: 3rem;
    --radius-full: 9999px;
}

/* =============================================================================
   2. BASE / RESET
   ============================================================================= */

::selection {
    background-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    color: var(--on-surface);
}

::-moz-selection {
    background-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    color: var(--on-surface);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

.site-content {
    display: block;
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-on-surface);
    background-color: var(--color-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    overscroll-behavior: none;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease;
}

button {
    font: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

input,
select,
textarea {
    font: inherit;
    color: inherit;
}

ul,
ol {
    margin: 0 0 0 1rem;
}

/* Remove default focus outlines, use custom */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.grid-container{
    min-width:100% !important;
}

input:focus-visible,
button:focus-visible {
    outline: none;
}

.enterra-logo{
    width: 2rem;

}

/* =============================================================================
   3. Header
   ============================================================================= */

.header {
    background-color: var(--color-white);
    position: fixed;
    width: 100%;
    z-index: 9999;
    top: 0;
}

.mb-dropdown-menu {
    background-color: var(--color-white);
    position: fixed;
    width: 100%;
    right: 0;
    height: 8rem;
    z-index: 99;

    top: -30rem;
    transition: top 0.35s ease;

    display: block;
}

.mb-dropdown-menu.open {
    top: 0;
}

/* =============================================================================
   4. Footer
   ============================================================================= */

.footer {
    background-color: var(--color-primary);
    padding: 5rem 0rem !important;
    border-radius: 3rem 3rem 0rem 0rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5rem;
    position: relative;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 4rem;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-title {
    margin-bottom: 0.75rem;
}

.footer-link {
    color: var(--on-surface-variant);
    font-size: 0.875rem;
    transition: color 150ms ease;
}

.footer-link:hover {
    color: var(--color-white) !important;
    text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .footer {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-column {
        align-items: center;
    }
}

/* =============================================================================
   3. TYPOGRAPHY
   ============================================================================= */

/* Font Families */
.font-headline {
    font-family: var(--font-headline);
}

.font-body {
    font-family: var(--font-body);
}

/* Font Weights */
.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

.font-black {
    font-weight: 900;
}

/* Font Sizes (Responsive scale) */
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}

.text-7xl {
    font-size: 4.5rem;
    line-height: 1;
}

.text-8xl {
    font-size: 6rem;
    line-height: 1;
}

/* Line Height */
.leading-none {
    line-height: 1;
}

.leading-tight {
    line-height: 1.25;
}

.leading-normal {
    line-height: 1.5;
}

.leading-relaxed {
    line-height: 1.75;
}

.leading-loose {
    line-height: 2;
}

/* Letter Spacing */
.tracking-tighter {
    letter-spacing: -0.05em;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-normal {
    letter-spacing: 0;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

/* Text Transform */
.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

/* Text Colors */
.text-primary {
    color: var(--color-primary);
}

.text-primary-dark {
    color: var(--color-primary-dark);
}

.text-on-surface {
    color: var(--color-on-surface);
}

.text-on-surface-variant {
    color: var(--color-on-surface-variant);
}

.text-on-surface-inverse {
    color: var(--color-on-surface-inverse);
}

.text-white {
    color: var(--color-white);
}

.text-black {
    color: #000000;
}

.text-error {
    color: var(--color-error);
}

.text-a-center {
    text-align: center;
}

.text-a-left {
    text-align: left;
}

.text-a-right {
    text-align: right;
}

.text-a-just {
    text-align: justify;
}

h2 {
    color: var(--color-on-surface-variant);
    font-weight: 800;
}

h3 {
    color: var(--color-on-surface-variant);
    font-weight: 200;
}

h4 {
    color: var(--color-on-surface-variant);
    font-weight: 800;
}

h5 {
    color: var(--color-on-surface-inverse);
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin: 0
}

p,
li {
    color: var(--color-on-surface-variant);
    font-weight: 200;
    font-size: var(--space-4);
}

.text-white {
    color: var(--color-white);
}

.text-white:hover a {
    color: var(--color-secondary-container);
}

.text-orange {
    color: var(--color-primary);
}

.o-a {
    color: var(--color-primary)
}

.o-a:hover {
    color: var(--color-primary-light) !important
}

.page-subtitle { 
    font-size: 1.5rem; line-height: 1.4;
}

/* =============================================================================
   4. LAYOUT & SPACING UTILITIES
   ============================================================================= */
/* Display */
.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.flex-sb {
    display: flex;
    justify-content: space-between;
}

.flex-sb-v {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.flex-left {
    display: flex;
    justify-content: left;
}

.flex-center {
    display: flex;
    justify-content: center;
}

.flex-right {
    display: flex;
    justify-content: right;
}

.flex-grid {
    display: grid;
}

.inline-flex {
    display: inline-flex;
}

.grid {
    display: grid;
}

.flex-wrap {
    flex-direction: wrap;
}

.hidden {
    display: none;
}

.gc-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gc-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gc-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Row utilities */
.gr-2 {
    grid-template-rows: repeat(2, 1fr);
}

.gr-3 {
    grid-template-rows: repeat(3, 1fr);
}

.gr-4 {
    grid-template-rows: repeat(4, 1fr);
}

/* Flexbox */
.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
    align-content: center;
    align-self: center
}

.items-end {
    align-items: flex-end;
    align-content: end;
    align-self: end
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.gap-2 {
    gap: var(--space-2);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-6 {
    gap: var(--space-6);
}

.gap-8 {
    gap: var(--space-8);
}

.gap-12 {
    gap: var(--space-12);
}

.gap-16 {
    gap: var(--space-16);
}

.gap-20 {
    gap: var(--space-20);
}

/* Width */
.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.w-fit {
    width: fit-content;
}

.w-20 {
    width: 20%;
}

.w-33 {
    width: 33.3333%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-66 {
    width: 66.666%;
}

.w-80 {
    width: 80%;
}

.w-60r {
    max-width: 15rem;
}

.w-80r {
    max-width: 20rem;
}

.w-160r {
    max-width: 40rem;
}

.w-240r {
    max-width: 60rem;
}

.max-w-xl {
    max-width: 36rem;
}

.max-w-2xl {
    max-width: 42rem;
}

.max-w-4xl {
    max-width: 56rem;
}

.max-w-container {
    max-width: 90%;
    width: 1200px;
}

.w-s {
    width: 1200px;
}

/* Height */
.h-auto {
    height: auto;
}

.h-full {
    height: 100%;
}

/* Margin */
.m-auto {
    margin: auto;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.m-0 {
    margin: 0;
}

.my-2 {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
}

.my-4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.my-6 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

.my-8 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
}

.my-16 {
    margin-top: var(--space-16);
    margin-bottom: var(--space-16);
}

.my-20 {
    margin-top: var(--space-20);
    margin-bottom: var(--space-20);
}

.my-40 {
    margin-top: var(--space-40);
    margin-bottom: var(--space-40);
}

.mt-2 {
    margin-top: var(--space-2);
}

.mt-4 {
    margin-top: var(--space-4);
}

.mt-6 {
    margin-top: var(--space-6);
}

.mt-8 {
    margin-top: var(--space-8);
}

.mt-12 {
    margin-top: var(--space-12);
}

.mt-16 {
    margin-top: var(--space-16);
}

.mt-20 {
    margin-top: var(--space-20);
}

.mt-40 {
    margin-top: var(--space-40);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-6 {
    margin-bottom: var(--space-6);
}

.mb-8 {
    margin-bottom: var(--space-8);
}

.mb-12 {
    margin-bottom: var(--space-12);
}

.mb-16 {
    margin-bottom: var(--space-16);
}

.mb-20 {
    margin-bottom: var(--space-20);
}

.mb-40 {
    margin-bottom: var(--space-40);
}

/* Padding */
.p-0 {
    padding: 0;
}

.p-2 {
    padding: var(--space-2);
}

.p-4 {
    padding: var(--space-4);
}

.p-6 {
    padding: var(--space-6);
}

.p-8 {
    padding: var(--space-8);
}

.p-16 {
    padding: var(--space-16);
}

.px-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

.px-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.px-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.px-8 {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}

.py-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}

.py-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.py-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.py-6 {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

.py-8 {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.py-20 {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
}

.py-40 {
    padding-top: var(--space-40);
    padding-bottom: var(--space-40);
}

.pt-4 {
    padding-top: var(--space-4);
}

.pt-8 {
    padding-top: var(--space-8);
}

.pt-16 {
    padding-top: var(--space-16);
}

.pt-20 {
    padding-top: var(--space-20);
}

.pt-40 {
    padding-top: var(--space-40);
}

.pb-8 {
    padding-bottom: var(--space-8);
}

.pb-16 {
    padding-bottom: var(--space-16);
}

.pb-20 {
    padding-bottom: var(--space-20);
}

/* Position */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.fixed-5-5 {
    position: fixed;
    top: 5%;
}

.sticky {
    position: sticky;
}

.top-0 {
    top: 0;
}

.top-2 {
    top: var(--space-2);
}

.top-4 {
    top: var(--space-4);
}

.top-10 {
    top: var(--space-10);
}

.top-20 {
    top: var(--space-20);
}

.top--4 {
    top: -4rem;
}

.right-0 {
    right: 0;
}

.right-2 {
    right: var(--space-2);
}

.right-3 {
    right: var(--space-3);
}

.right-4 {
    right: var(--space-4);
}

.right-10 {
    right: var(--space-10);
}

.right-20 {
    right: var(--space-20);
}

.left-30 {
    right: var(--space-30);
}

.left-0 {
    left: 0;
}

.bottom-0 {
    bottom: 0;
}

.translate-y-1\/2 {
    transform: translateY(-50%);
}

/* Overflow & Z-Index */
.overflow-hidden {
    overflow: hidden;
}

.z-0 {
    z-index: 0;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-50 {
    z-index: 50;
}

.z-100 {
    z-index: 100;
}

.z-999 {
    z-index: 999;
}

.brr-xl {
    border-radius: var(--radius-xl);
}

.brr-2 {
    border-radius: 2rem !important;
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

/* =============================================================================
   5. COMPONENT CLASSES
   ============================================================================= */

/* --- 5.1 Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-6);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--radius-full);
    transition: all 150ms ease;
    cursor: pointer;
    user-select: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: #ffffff;
    box-shadow: var(--shadow-orange-glow);
    border: 1px solid var(--color-border-glow);
    will-change: scale;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

button:hover {
    background-color: var(--color-secondary) !important;
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 35px -10px rgba(255, 122, 44, 0.4);
    background-color: 0 15px 35px -10px rgba(255, 122, 44, 0.4) !important;
    color: #ffffff;
}

.btn-primary:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.btn-secondary {
    background: linear-gradient(135deg, #ffffff 0%, #f4f1ef 100%);
    color: var(--color-on-surface);
    border: 1px solid var(--color-border-glow);
    box-shadow: var(--shadow-md);
    will-change: scale;
}

.btn-secondary:hover {
    color: var(--color-primary-dark);
    transform: scale(1.05);
}

.btn-secondary-ns:hover {
    transform: scale(1) !important;
}

.btn-sm {
    padding: var(--space-1) var(--space-4);
    font-size: 0.75rem;
}

.btn-lg {
    padding: var(--space-3) var(--space-8);
    font-size: 1rem;
}

.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
}

.btn-ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-text {
    cursor: pointer;
    color: var(--color-on-surface);
    padding: 0rem;
}

.btn-text:hover {
    color: var(--color-primary);
    opacity: 80%;
    background-color: transparent;
}

.btn-text.active {
    color: var(--color-primary);
}

/* --- 5.2 Inputs & Forms --- */
.input {
    width: 100% !important;
    padding: var(--space-3) var(--space-4) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-full) !important;
    background: transparent !important;
    color: var(--color-on-secondary) !important;
    transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

.input::placeholder {
    color: var(--color-on-surface-inverse);
}

.input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.input-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2);
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    border-radius: var(--radius-full);
    background: var(--color-surface-elevated);
}

.input-group .input {
    border: none;
    padding: var(--space-2) var(--space-4);
}

.input-group .btn {
    flex-shrink: 0;
}

/* --- 5.3 Cards & Containers --- */
.card {
    background: var(--color-surface-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
}

.card-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border-glow);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.card-glass-orange {
    background: var(--color-primary-light);
}

.card-glass-glow {
    border: 5px solid var(--color-primary-light);
}

.card-glass-mag {
    will-change: scale;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-glass-mag:hover {
    transform: scale(1.01);
}

.card-glass-dark {
    background-color: var(--color-on-secondary);
}

.card-glass-onblack {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.glass-side-bar {
    position: absolute;
    background-color: color-mix(in srgb, var(--color-white) 20%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100vh;
    top: 0;
    z-index: 99;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    padding: 4rem 2rem;
}

.glass-side-bar-button {
    padding: 0.5rem;
    float: right;
    cursor: pointer;
}

.glass-side-bar-button:hover {
    transform: scale(1.1);
}

.glass-side-bar.active {
    transform: translateX(0);
    left: 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: var(--color-primary-dim);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.badge-w {
    background: #ffffff20;
    color: var(--color-white);
}

.badge-single {
    color: var(--color-primary);
    font-size: 2rem !important;
}

.badge-text-center-block-button {
    align-items: center;
    display: flex;
    gap: 1rem;
    cursor: pointer;
}

.badge-button {
    color: #ffffff !important;
    box-shadow: 1px 1px 1px var(--shadow-orange-glow);
    display: flex;
    gap: 1rem;
    border-radius: 999px;
    padding: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.badge-button-mini {
    color: var(--shadow-orange-glow) !important;
    box-shadow: 1px 1px 1px var(--shadow-orange-glow);
    display: flex;
    padding: 0.5rem;
    gap: 1rem;
    border-radius: 999px;
    padding: 0rem;
    border: 1px solid transparent;
    cursor: pointer;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.badge-button-w {
    color: #2c2c2c;
    box-shadow: 1px 1px 1px var(--shadow-orange-glow);
    display: flex;
    gap: 1rem;
    border-radius: 999px;
    padding: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.badge-button:hover,
.selected-badge {
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-surface) 100%);
    border: 1px solid var(--color-border-glow);
    /* Optional: Slightly lift the button on hover */
    transform: translateY(-2px);
    box-shadow: 2px 4px 12px var(--shadow-orange-glow);
}

.badge-text {
    color: var(--color-on-secondary);
    align-self: center;
    font-weight: 500;
}

.badge-button-mini .badge-text {
    font-weight: 800 !important;
}

.badge-button-mini:hover {
    opacity: 70%;
}

.badge-button-mini:hover .badge-icon {
    transform: scale(1.05);
}

.badge-icon-t {
    height: 3rem;
    padding: var(--space-3) var(--space-6);
}

.badge-icon {
    height: 3rem;
    min-width: 3rem;
    width: 3rem;
    padding: 0;
}

.badge-icon>span {
    margin: auto;
}

.black-container {
    background-color: var(--color-on-surface);
    padding-top: 7rem;
    padding-bottom: 10rem;
    margin-bottom: -10rem;
}

.black-inner {
    width: 90%;
    margin: auto;
}


/* --- 5.4 Dropdowns --- */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-secondary);
    border: 1px solid #ffffff;
    border-radius: var(--radius-full);
    font-weight: 500;
    color: var(--color-on-secondary);
    cursor: pointer;
    transition: all 150ms ease;
}

.dropdown-trigger:hover {
    color: var(--color-primary) !important;
}

.dropdown-trigger .icon {
    margin-left: auto;
    transition: transform 200ms ease;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    padding: var(--space-2);
    background: var(--color-surface-elevated);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    white-space: nowrap;
    z-index: 100;

    /* Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 200ms ease;
}

.dropdown:hover .dropdown-menu,
.dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown:hover .dropdown-trigger .icon {
    transform: rotate(180deg);
}

.dropdown-item {
    display: block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--color-on-surface);
    transition: all 150ms ease;
    cursor: pointer;
}

.dropdown-item:hover {
    background: var(--color-primary-dim);
    color: var(--color-primary);
}

.dropdown-item.selected {
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(255, 122, 44, 0.15);
}

/* --- 5.5 Icons --- */
.icon {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-feature-settings: 'liga';
    font-size: 1.5rem;
    color: transparent;
    text-shadow: 0 0 0 currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    line-height: 1;
    color: var(--color-on-surface);
}

.icon-sm {
    font-size: 1.25rem;
}

.icon-lg {
    font-size: 2rem;
}

.icon-btn {
    padding: var(--space-1);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 150ms ease;
}

.icon-btn:hover {
    background: var(--color-primary-dim);
    transform: scale(1.1);
    color: var(--color-on-surface);
}

.icon-btn:focus,
.icon-btn:active {
    background: none;
    outline: none;
    box-shadow: none;
    color: var(--color-on-surface);
}

.loading-bar {
    height: 0.8rem;
    width: 100%;
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border: color-mix(in srgb, var(--color-white) 80%, transparent) solid 1px;
    box-shadow: inset 1px 1px 1px color-mix(in srgb, var(--color-secondary-container) 80%, transparent);
    border-radius: 999px;
    display: block;
    align-content: center;
}

.loading-bar-inner {
    display: block;
    height: 0.70rem;
    width: 0%;
    background: linear-gradient(135deg, var(--color-primary-darker) 0%, var(--color-primary-light) 100%);
    border: transparent solid 1px;
    box-shadow: 1px 1px 1px color-mix(in srgb, var(--color-secondary-container) 80%, transparent);
    border-radius: 999px;
    transition: width 0.3s ease-in-out;
    /* Smooth growth */
    will-change: width;
}

.border-bottom {
    border-bottom: solid 1px var(--color-secondary-container);
}

.card-bg-decal {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.card-bg-decal::before {
    content: "";
    position: absolute;
    top: -10rem;
    right: -4rem;
    width: 24rem;
    height: 24rem;

    background-image: var(--bg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    opacity: 0.1;
}

.card-bg-decal-b {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.card-bg-decal-b::before {
    content: "";
    position: absolute;
    bottom: -5rem;
    right: -4rem;
    width: 24rem;
    height: 24rem;

    background-image: var(--bg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    opacity: 0.02;
}

.blank-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blank-ul li {
    margin-top: 1rem;
}

.clickable {
    cursor: pointer;
}

@media (max-width: 768px) {
    .perf-block.active-block {
        grid-template-columns: 1fr;
    }
}

.perf-block.active-block { display: grid; }
.perf-block:not(.active-block) { display: none; }

[id^="ts-block-"] { display: none; }
[id^="ts-block-"].active-block { display: block; }

/* =============================================================================
   5. BORDERS
   ============================================================================= */

.br-top-orange-1 {
    border-top: 1px solid var(--color-primary)
}

.br-top-white-1 {
    border-top: 1px solid var(--color-white)
}

/* =============================================================================
   6. EFFECTS
   ============================================================================= */
/* Shadows */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-orange-glow {
    box-shadow: var(--shadow-orange-glow);
}

.blur-decal-sm {
    width: 16rem;
    height: 16rem;
}

.blur-decal-md {
    width: 20rem;
    height: 20rem;
}

.blur-decal-lg {
    width: 24rem;
    height: 24rem;
    opacity: 80%;
}

.blur-decal-ms {
    width: 32rem;
    height: 32rem;
    opacity: 50%;
}

/* Gradients */
.gradient-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, #ffffff 0%, #f4f1ef 100%);
}

/* Transitions */
.transition {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-slow {
    transition-duration: 300ms;
}

.blur-decal {
        position: absolute;
        border-radius: 50%;
        background: var(--color-primary-dim-20);
        filter: blur(100px);
        pointer-events: none;
        z-index: 0;
    }

/* =============================================================================
   7. TABLE
   ============================================================================= */


.highlight {
    color: var(--color-primary) !important;
    font-weight: 600;
}

@media (max-width: 768px) {

    .pricing-table th,
    .pricing-table td {
        padding: 16px 12px;
        font-size: 14px;
    }

    .features-header {
        font-size: 14px;
    }

    .blur-decal {
        filter: blur(40px);

        transform: translate3d(0,0,0);
        will-change: transform;

        pointer-events: none;
        z-index: 0;
    }
}

/* Table styling - matches ping tool pattern */
.enterra-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    border: 0px !important;
}


.enterra-table {
    border: none;
}

/* Thick line under headers */
.enterra-table thead th {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    border: 0px solid #f1f5f9;
    border-bottom: 2px solid #979797;
    text-align: right;
}

/* Very light row dividers */
.enterra-table tbody td {
    padding: 0.45rem 0.75rem;
    border: 0px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.enterra-table tbody tr:last-child td {
    border-bottom: none;
}

/* Sequence column: left-aligned, shrink to content */
.enterra-table th:nth-child(1),
.enterra-table td:nth-child(1) {
    width: 1%;
    white-space: nowrap;
    text-align: left;
}

/* TTL & ms columns: right-aligned, 50% each of remaining space */
.enterra-table th:nth-child(2),
.enterra-table td:nth-child(2),
.enterra-table th:nth-child(3),
.enterra-table td:nth-child(3) {
    width: 50%;
    text-align: right;
}

.enterra-table-container {
    position: relative;
    overflow-x: auto;
}

/* =============================================================================
   7. RESPONSIVE UTILITIES
   ============================================================================= */

.mb-only,
.show-m1,
.show-m2 {
    display: none;
}

@media (max-width: 1300px) {
    .md\:text-8xl {
        font-size: 3.5rem;
        line-height: 1;
    }

    .md\:text-6xl {
        font-size: 3rem;
        line-height: 1;
    }

    .md\:center {
        text-align: center;
        align-self: center !important;
    }

    .w-80r {
        width: 10rem;
    }

    .mb-only {
        display: flex;
    }

    .dk-only {
        display: none;
    }

    .w-s {
        width: 90%
    }

    .w-mb-100 {
        width: 100%;
        max-width: 100%;
    }

    .hide-m1 {
        display: none;
    }

    .show-m1 {
        display: flex;
    }
}

@media (max-width: 768px) {
    .md\:c {
        font-size: 5.5rem;
        line-height: 1;
    }

    .md\:flex-row {
        flex-direction: row;
    }

    .md\:gap-8 {
        gap: var(--space-8);
    }

    .md\:bt-m {
        margin-bottom: var(--space-8);
    }

    .flex-mb {
        flex-direction: column;
    }

    .flex-mb-gap-1 {
        gap: 1rem;
    }

    .mb-full {
        width: 100%
    }

    .mb-mt-16r {
        margin-top: 16rem;
    }

    .p-8 {
        padding: var(--space-4);
    }

    .p-6 {
        padding: var(--space-4);
    }

    .card-glass {
        border-radius: var(--radius-l)
    }

    ;

    .block-recenter {
        margin-left: auto;
        margin-right: auto;
    }

    .hide-m2 {
        display: none;
    }

    .show-m2 {
        display: block;
    }

    .mobile\:max-w-container {
        max-width: 90%;
        width: 1000px;
    }
}

@media (max-width: 767px) {
    .mobile\:text-center {
        text-align: center;
    }

    .mobile\:w-full {
        width: 100%;
    }

    .mobile\:flex-col {
        flex-direction: column;
    }

    .flex-grid {
        display: flex;
        flex-direction: column;
    }
}


/* =============================================================================
   8. PRINT STYLES
   ============================================================================= */

@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: #ffffff;
        color: #000000;
    }
}

/* =============================================================================
   8. CHARTINGS
   ============================================================================= */

/* ===========  GAUGE =========== */

.etm-gauge {
    position: relative;
    width: 180px;
    height: 180px;
    margin: auto;
}

.etm-gauge svg {
    transform: rotate(-90deg);
}

.etm-gauge-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 14;
}

.etm-gauge-progress {
    fill: none;
    stroke-width: 14;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease;
}

.etm-root-color {
    stroke: var(--color-primary);
}

.etm-80-100 {
    stroke: #4ade80;
}

.etm-60-79 {
    stroke: #f7eb41;
}

.etm-40-59 {
    stroke: var(--color-primary);
}

.etm-0-39 {
    stroke: var(--color-error);
}

.etm-gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 700;
    color: var(--color-on-surface);
    aspect-ratio: 1;
    width: 100%;
    margin: 0 auto;
}

/* =========== BAR =========== */

.ent-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ent-row {
    display: grid;
    grid-template-columns: 180px 1fr 40px;
    align-items: center;
    gap: 12px;
}

.ent-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ent-track {
    height: 6px;
    background: var(--color-background-secondary);
    border-radius: 3px;
    overflow: hidden;
}

.ent-bar {
    height: 100%;
    background: var(--color-primary);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.ent-count {
    font-size: 12px;
    color: var(--color-text-tertiary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* =========== BAR =========== */

.ent-donut-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ent-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ent-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.ent-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ent-legend-label {
    flex: 1;
    color: var(--color-text-secondary);
}

.ent-legend-val {
    font-weight: 500;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* =========== LIST =========== */

.ent-simple-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ent-simple-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.ent-simple-num {
    color: var(--color-text-tertiary);
    min-width: 18px;
    font-variant-numeric: tabular-nums;
}

.ent-simple-label {
    flex: 1;
    color: var(--color-text-secondary);
}

.ent-simple-pct {
    color: var(--color-text-primary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ===========  Bell =========== */

/* Container for the visual area */
.performance-visual {
    position: relative;
    width: 100%;
    height: 12rem;
    /* h-48 */
    margin-top: 1rem;
}

/* --- Bell Curve Background --- */
.ent-curve-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

/* Create the curve shape using an SVG mask */
.ent-curve-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--color-primary, #3b82f6), transparent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 Q50,100 75,40 Q100,0 125,40 Q150,100 200,100 L200,100 L0,100 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 Q50,100 75,40 Q100,0 125,40 Q150,100 200,100 L200,100 L0,100 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Data Points --- */
.ent-point {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.ent-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
    line-height: 1.2;
}

.ent-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted, #6b7280);
    margin-top: 0.25rem;
}

/* Positioning */
.ent-point.low {
    bottom: 0.5rem;
    left: 0.5rem;
    text-align: left;
}

.ent-point.avg {
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.ent-point.avg .ent-value {
    font-size: 1.75rem;
    /* Make average larger */
    color: var(--color-primary, #3b82f6);
}

.ent-point.high {
    bottom: 0.5rem;
    right: 0.5rem;
    text-align: right;
}

/* Color coding for values */
.ent-point.low .ent-value {
    color: #10b981;
}

/* Green */
.ent-point.high .ent-value {
    color: #ef4444;
}

/* Red */

/* ===========  SCREENSHOTS =========== */

.etm-screenshot-viewer {
    max-width: 900px;
    margin: auto;
}

.etm-screenshot-frame {
    background: #0b0b0b;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.etm-screenshot-frame img {
    width: 100%;
    display: block;
}

.etm-screenshot-slider {
    width: 100%;
    margin-top: 16px;
}

.etm-screenshot-meta {
    margin-top: 6px;
    font-size: 14px;
    opacity: 0.7;
}

@media (max-width: 767px) {
    .etm-gauge-center {
        font-size: 28px;
    }
}





@supports (-webkit-touch-callout: none) {
    .card-bg-decal::before {
        transform: translateZ(0);
        /* forces proper rendering */
    }
}

.article-thumb {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
}

.article-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.article-body h4 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.4;
}

.article-body p {
    font-size: 0.9rem;
    color: #666;
    flex: 1;
}

.article-date {
    font-size: 0.8rem;
    color: #999;
}

.article-tag {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-primary);
    letter-spacing: 0.05em;
}