/*
Theme Name: Smart Green Vision Organisation (SGVO)
Theme URI: http://smartgreen.or.tz/
Author: Smart Green Vision Organisation
Author URI: http://smartgreen.or.tz/
Description: An ultra-premium, modern, minimal, and classy WordPress theme designed for SGVO. Built with responsive Tailwind CSS, elegant sentence-case editorial typography, organic 10% proportional border-radius curves, and sleek flat custom SVG iconography.
Version: 1.2.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sgvo-theme
*/

/* ==========================================================================
   1. DESIGN TOKENS & SYSTEM VARIABLES (Synchronized with Customizer API)
   ========================================================================== */
:root {
    /* Brand Colors (Fallback values overridden dynamically by inc/customize.php) */
    --color-chateau-green: #32A25C;
    --color-deep-emerald: #00674F;
    --color-vivid-gold: #FEBE0F;
    --color-alabaster-eco: #FAF9F5;
    --color-dark-green: #072F24;
    --color-lime-accent: #C9F244;
    --color-orange-accent: #FF5E3A;
    --color-sage-bg: #E4EAD9;
    --color-muted-eco: #E6E4DF;

    /* Curated dynamic fonts variables pointing to customizer values */
    --font-headings: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Typographic Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* Transition Speeds */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. GLOBAL BASE STYLE OVERRIDES & TEXT SIZE RESETS
   ========================================================================== */
html {
    scroll-behavior: smooth;
    background-color: var(--color-alabaster-eco);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    color: #1E293B; /* Slate 800 */
    background-color: var(--color-alabaster-eco);
    overflow-x: hidden;
    font-size: 1rem; /* Clear 16px baseline for general readability */
    line-height: 1.75;
}

/* Corrected font mapping to avoid overriding icon font-families */
body, p, a, input, select, textarea, button {
    font-family: var(--font-body);
}

/* Explicit safety override ensuring Google Material Icons show correctly */
.material-icons {
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Global Typography Hierarchy - Sentence Case Override (No forced uppercase) */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    color: var(--color-dark-green);
    font-weight: var(--font-weight-black);
    letter-spacing: -0.025em;
    text-transform: none; /* Safely strips forced capitalizations */
    line-height: 1.25;
}

/* Clear Editorial Text Sizing Resets */
h1 {
    font-size: 2.75rem; /* ~44px */
}
@media (min-width: 768px) {
    h1 { font-size: 3.75rem; } /* ~60px */
}
@media (min-width: 1024px) {
    h1 { font-size: 4.5rem; } /* ~72px */
}

h2 {
    font-size: 2.25rem; /* ~36px */
}
@media (min-width: 768px) {
    h2 { font-size: 3rem; } /* ~48px */
}

h3 {
    font-size: 1.75rem; /* ~28px */
}
@media (min-width: 768px) {
    h3 { font-size: 2rem; } /* ~32px */
}

p {
    font-size: 1.125rem; /* Solid legible 18px text base size */
}

/* Selection Highlights */
::selection {
    background-color: var(--color-lime-accent);
    color: var(--color-dark-green);
}

/* Premium Flat Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-alabaster-eco);
}

::-webkit-scrollbar-thumb {
    background: var(--color-dark-green);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-chateau-green);
}

/* ==========================================================================
   3. STRUCTURAL ORGANIC CURVES (10% Proportional Scale)
   ========================================================================== */
.sleek-banner {
    border-radius: 2.5rem;
}

.agrone-card {
    border-radius: 2rem;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

/* Asymmetric corner architectures mimicking Agrone layout rules */
.agrone-card-asym-1 {
    border-radius: 2rem;
    border-bottom-left-radius: 0px;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.agrone-card-asym-2 {
    border-radius: 2rem;
    border-top-right-radius: 0px;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.agrone-element {
    border-radius: 12px;
}

.agrone-pill {
    border-radius: 100px;
}

/* ==========================================================================
   4. HORIZONTAL CAROUSEL BEHAVIOR
   ========================================================================== */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Custom snap behaviors for the dynamic horizontal cards */
#goals-scroll-row {
    scroll-snap-type: x mandatory;
}

#goals-scroll-row > div {
    scroll-snap-align: start;
}

/* ==========================================================================
   5. COMPONENT ANIMATIONS & HOVER STATES
   ========================================================================== */
@keyframes floatGentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes pulseLime {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 242, 68, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(201, 242, 68, 0); }
}

.animate-float {
    animation: floatGentle 4s ease-in-out infinite;
}

.pulse-indicator {
    animation: pulseLime 2.5s infinite;
}

/* Smooth Navigation Active State switches */
.active-why-tab {
    background-color: var(--color-dark-green) !important;
    border-color: var(--color-dark-green) !important;
}

.active-why-tab span,
.active-why-tab svg {
    color: var(--color-lime-accent) !important;
}

/* Active Category Filter switches */
.active-btn {
    background-color: var(--color-dark-green) !important;
    color: var(--color-lime-accent) !important;
    border-color: var(--color-dark-green) !important;
}

/* ==========================================================================
   6. WORDPRESS DYNAMIC THEME MENU OVERRIDES
   ========================================================================== */
/* Desktop Navigation Container */
.primary-menu-container {
    display: flex;
    align-items: center;
    background-color: #f1f5f9; /* Slate 100 */
    padding: 0.375rem; /* p-1.5 */
    border-radius: 100px; /* agrone-pill */
}

/* Nested Unordered Menu List reset */
.primary-menu-container ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
}

.primary-menu-container ul li {
    margin: 0;
    padding: 0;
    position: relative; /* Supports dropdown menu items */
}

/* Base Dynamic Navigation Links */
.primary-menu-container ul li a {
    display: inline-block;
    padding: 0.625rem 1.5rem; /* Generous text targets */
    font-size: 0.8125rem; /* text-xs equivalent but highly readable */
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em; /* tracking-widest */
    color: #475569; /* slate-600 */
    border-radius: 100px; /* agrone-pill */
    transition: all var(--transition-fast);
    text-decoration: none;
}

/* Link Hover and Active States */
.primary-menu-container ul li a:hover {
    color: var(--color-dark-green);
}

.primary-menu-container ul li.current-menu-item > a,
.primary-menu-container ul li.current_page_item > a {
    color: var(--color-dark-green) !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

/* Dynamic Multi-level Sub-menu Support */
.primary-menu-container ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 1rem;
    padding: 0.75rem;
    flex-direction: column;
    min-width: 220px;
    z-index: 100;
    margin-top: 0.5rem;
}

.primary-menu-container ul li ul li a {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
}

.primary-menu-container ul li ul li a:hover {
    background-color: #f8fafc; /* slate-50 */
}

/* Show Submenus on Hover */
.primary-menu-container ul li:hover > ul {
    display: flex;
}

/* Mobile Dynamic Drawer Menu Overrides */
.mobile-menu-container ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu-container ul li {
    width: 100%;
}

.mobile-menu-container ul li a {
    display: block;
    width: 100%;
    padding: 1rem 0; /* Expanded touch tap targets */
    font-size: 0.9375rem; /* ~15px highly readable */
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wider */
    color: #334155; /* slate-700 */
    border-bottom: 1px solid #f1f5f9; /* border-slate-100 */
    transition: color var(--transition-fast);
    text-decoration: none;
}

.mobile-menu-container ul li a:hover,
.mobile-menu-container ul li.current-menu-item a {
    color: var(--color-dark-green);
}

/* ==========================================================================
   8. WORDPRESS GUTENBERG & CORE STYLES COMPILABILITY
   ========================================================================== */
.entry-content p {
    margin-bottom: 1.75rem;
    line-height: 1.8;
}

.entry-content a {
    color: var(--color-deep-emerald);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.entry-content a:hover {
    color: var(--color-chateau-green);
}

/* Alignment Classes - Core resets to prevent layout breaks */
.alignleft {
    float: left;
    margin: 0.5em 1.5em 1.5em 0;
}

.alignright {
    float: right;
    margin: 0.5em 0 1.5em 1.5em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    margin-bottom: 1.5em;
}

.wp-caption {
    background: #ffffff;
    border: 1px solid var(--color-muted-eco);
    max-width: 100%;
    padding: 8px;
    text-align: center;
}

.wp-caption img {
    margin: 0;
    max-width: 100%;
    height: auto;
}

.wp-caption-text {
    font-size: 0.9375rem; /* clear 15px */
    color: #475569; /* Slate 600 */
    margin: 0.75em 0 0;
    font-style: italic;
}

/* Wide & Full alignments for editorial layouts */
.alignwide {
    margin-left: -8%;
    margin-right: -8%;
    max-width: 116%;
    width: 116%;
}

.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}

@media (max-width: 1024px) {
    .alignwide, .alignfull {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        width: 100%;
    }
}

/* Gutenberg Button blocks overrides to match the custom pills */
.wp-block-button__link {
    background-color: var(--color-dark-green);
    color: #ffffff;
    font-weight: var(--font-weight-bold);
    font-size: 0.9375rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1.125rem 2.25rem;
    border-radius: 100px; /* Pillow pill style */
    transition: background-color var(--transition-fast);
    border: none;
    text-decoration: none !important;
}

.wp-block-button__link:hover {
    background-color: var(--color-chateau-green);
    color: #ffffff;
}

/* Gutenberg Image blocks matching organic theme border radii */
.wp-block-image img {
    border-radius: 2rem;
    border-top-right-radius: 0px; /* Classy asymmetric default */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

/* Blockquote adjustments */
.wp-block-quote {
    border-left: 4px solid var(--color-lime-accent);
    padding-left: 1.5rem;
    font-style: italic;
    color: var(--color-dark-green);
    margin: 2.5rem 0;
}