/*
 * Theme Name:        Go Green 
 * Theme URI:         https://gogreenecocycle.wisemark3t.com/
 * Author:            The Oz Tech Work
 * Author URI:        https://theoztech.com.au/
 * Description:       A premium, secure, and highly optimized custom WordPress theme for Go Green Ecocycle — a commercial and industrial environmental recycling solutions company. Built from a fully-functional static HTML5 / Tailwind CSS / Vanilla JS frontend. Features include: sticky glass header, Swiper.js hero carousel, AOS scroll animations, expandable service panels, ROI calculator, FAQ accordion, and a multi-column footer. Fully translatable with text-domain "gogreen-ecocycle".
 * Version:           1.0.0
 * Requires at least: 6.4
 * Requires PHP:      8.1
 * Tested up to:      6.7
 * License:           GNU General Public License v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       gogreen-ecocycle
 * Domain Path:       /languages
 * Tags:              custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, full-width-template, blog, business, portfolio
 */

/* =============================================================================
   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────────────────────────
   1.  WordPress Theme Standard Entry Point Note
   2.  CSS Custom Properties (Design Tokens)
   3.  Global Reset & Base Styles
   4.  Typography Utilities
   5.  Text Gradient Utility
   6.  Smooth Scroll & Body Defaults
   7.  Swiper.js — Uninitialised Fallback
   8.  Swiper.js — Custom Hero Navigation Arrows
   9.  Swiper.js — Custom Bullet Pagination
  10.  WordPress Core Compatibility Styles
  11.  Accessibility — Skip Link
   ============================================================================= */


/* =============================================================================
   1. WORDPRESS THEME STANDARD ENTRY POINT NOTE
   ─────────────────────────────────────────────────────────────────────────────
   This file serves as the theme's primary stylesheet and WordPress
   identification header. The compiled Tailwind CSS utility layer is enqueued
   separately via wp_enqueue_style() in functions.php as 'gogreen-tailwind'
   and resolves to /assets/css/tailwind.css within the theme directory.

   All component-level styles that cannot be expressed with utility classes
   live in this file. Do NOT use @import for the Tailwind build here — that
   enqueue handle is registered with a dependency on this stylesheet so the
   cascade order is always: style.css → tailwind.css → index.css (overrides).
   ============================================================================= */


/* =============================================================================
   2. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ─────────────────────────────────────────────────────────────────────────────
   Centralised colour, typography, spacing, and transition tokens that mirror
   the Tailwind config values used throughout the static HTML source so that
   any custom CSS written outside the utility layer remains in visual parity.
   ============================================================================= */

:root {

    /* --- Brand Colours --- */
    --color-brand-darkest:   #1B5E20; /* Tailwind: [#1B5E20] — primary dark green  */
    --color-brand-dark:      #2E7D32; /* Tailwind: [#2E7D32] — secondary dark green */
    --color-brand-mid:       #388E3C; /* Tailwind: [#388E3C] — mid green            */
    --color-brand-light:     #4CAF50; /* Tailwind: [#4CAF50] — accent light green   */
    --color-brand-pale:      #81C784; /* Tailwind: [#81C784] — highlight pale green */
    --color-brand-bg-tint:   rgba(27, 94, 32, 0.10);  /* /10 opacity tint */
    --color-brand-bg-hover:  rgba(27, 94, 32, 0.20);  /* /20 opacity hover */
    --color-brand-selection-bg:   rgba(46, 125, 50, 0.20); /* selection highlight */
    --color-brand-selection-text: #1B5E20;

    /* --- Neutral Palette --- */
    --color-gray-50:  #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* --- Typography --- */
    --font-sans:    'Inter',          ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Poppins',        sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    /* --- Z-index Scale --- */
    --z-sticky:  50;
    --z-drawer:  60;
    --z-overlay: 70;
    --z-modal:   80;

    /* --- Transitions --- */
    --transition-base:   all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Shadows --- */
    --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
    --shadow-green-sm: 0 2px 8px rgba(46, 125, 50, 0.15);
    --shadow-green-md: 0 4px 12px rgba(46, 125, 50, 0.30);

    /* --- Border Radius --- */
    --radius-sm:   0.375rem;  /* rounded-md  */
    --radius-md:   0.5rem;    /* rounded-lg  */
    --radius-lg:   0.75rem;   /* rounded-xl  */
    --radius-xl:   1rem;      /* rounded-2xl */
    --radius-full: 9999px;    /* rounded-full */
}


/* =============================================================================
   3. GLOBAL RESET & BASE STYLES
   ─────────────────────────────────────────────────────────────────────────────
   Mirrors the static body class attributes and global defaults to ensure
   visual parity before Tailwind utilities are applied.
   ============================================================================= */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin:           0;
    font-family:      var(--font-sans);
    background-color: var(--color-gray-50);
    color:            var(--color-gray-800);
    min-height:       100vh;
    overflow-x:       hidden;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Global text selection highlight — mirrors Tailwind selection: classes on <body> */
::selection {
    background-color: var(--color-brand-selection-bg);
    color:            var(--color-brand-selection-text);
}
::-moz-selection {
    background-color: var(--color-brand-selection-bg);
    color:            var(--color-brand-selection-text);
}

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

a {
    color: inherit;
    text-decoration: none;
}


/* =============================================================================
   4. TYPOGRAPHY UTILITIES
   ─────────────────────────────────────────────────────────────────────────────
   Custom font-family class helpers that extend Tailwind's fontFamily config.
   Use .font-display for Poppins headings, .font-mono for code/data labels.
   ============================================================================= */

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

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


/* =============================================================================
   5. TEXT GRADIENT UTILITY
   ─────────────────────────────────────────────────────────────────────────────
   Applied to hero headlines and section headings throughout both templates.
   Cannot be expressed as a standard Tailwind utility without a plugin, so it
   lives here as a shared custom class.

   Usage:  <span class="text-gradient">Cleaner Future</span>
   ============================================================================= */

.text-gradient {
    background:              linear-gradient(135deg, var(--color-brand-darkest) 0%, var(--color-brand-light) 100%);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    color:                   transparent; /* Fallback for browsers without support */
}


/* =============================================================================
   6. SMOOTH SCROLL & BODY DEFAULTS
   ─────────────────────────────────────────────────────────────────────────────
   Declared here so the behaviour is active even before JS loads.
   ============================================================================= */

/* Respect user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto   !important;
    }
}


/* =============================================================================
   7. SWIPER.JS — UNINITIALISED FALLBACK
   ─────────────────────────────────────────────────────────────────────────────
   Prevents a Flash of Unstyled Content (FOUC) by hiding non-first slides
   before the Swiper library has mounted and calculated its layout.
   ============================================================================= */

.swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none !important;
}


/* =============================================================================
   8. SWIPER.JS — CUSTOM HERO NAVIGATION ARROWS
   ─────────────────────────────────────────────────────────────────────────────
   The static source positions the prev/next buttons inside a flex row instead
   of using Swiper's default absolute positioning. All overrides use !important
   to win the specificity battle against swiper-bundle.min.css.
   ============================================================================= */

.swiper-button-prev.hero-swiper-prev-btn,
.swiper-button-next.hero-swiper-next-btn {
    position:         static !important;   /* Removed from absolute flow */
    top:              auto   !important;
    margin-top:       0      !important;
    width:            28px   !important;
    height:           28px   !important;
    background-color: rgba(255, 255, 255, 0.95)   !important;
    border:           1.5px solid var(--color-brand-dark) !important;
    border-radius:    var(--radius-full) !important;
    color:            var(--color-brand-dark)      !important;
    display:          flex   !important;
    align-items:      center !important;
    justify-content:  center !important;
    transition:       var(--transition-base) !important;
    box-shadow:       var(--shadow-green-sm) !important;
}

.swiper-button-prev.hero-swiper-prev-btn:hover,
.swiper-button-next.hero-swiper-next-btn:hover {
    background-color: var(--color-brand-dark) !important;
    border-color:     var(--color-brand-pale) !important;
    color:            #ffffff                 !important;
    transform:        scale(1.06)             !important;
    box-shadow:       var(--shadow-green-md)  !important;
}

/* Lucide icon sizing inside the custom buttons */
.swiper-button-prev.hero-swiper-prev-btn i,
.swiper-button-next.hero-swiper-next-btn i {
    width:  14px !important;
    height: 14px !important;
}

/* Suppress the default Swiper arrow pseudo-element glyphs */
.swiper-button-prev.hero-swiper-prev-btn::after,
.swiper-button-next.hero-swiper-next-btn::after {
    display: none    !important;
    content: ""      !important;
}


/* =============================================================================
   9. SWIPER.JS — CUSTOM BULLET PAGINATION
   ─────────────────────────────────────────────────────────────────────────────
   Hero slider pagination dots with an expanding active-state pill effect.
   ============================================================================= */

.hero-swiper-pagination .swiper-pagination-bullet {
    background:    rgba(255, 255, 255, 0.35) !important;
    opacity:       1     !important;
    margin:        0 4px !important;
    height:        8px   !important;
    width:         8px   !important;
    border-radius: var(--radius-full) !important;
    transition:    all 0.3s ease-in-out !important;
    outline:       none  !important;
}

.hero-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--color-brand-light) !important;
    width:      28px !important; /* Pill-expand animation on active dot */
}


/* =============================================================================
  10. WORDPRESS CORE COMPATIBILITY STYLES
   ─────────────────────────────────────────────────────────────────────────────
   Minimal ruleset for WordPress-injected elements (admin bar, captions,
   gallery, alignment classes) that must not conflict with Tailwind's reset.
   ============================================================================= */

/* Admin bar body offset — WordPress adds this class automatically when logged in */
.admin-bar #main-header {
    top: 32px; /* 46px on mobile — handled below */
}

@media screen and (max-width: 782px) {
    .admin-bar #main-header {
        top: 46px;
    }
}

/* WordPress core image alignment helpers */
.alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter {
    display:   block;
    margin:    0 auto 1rem;
    clear:     both;
}
.alignwide  { width: 100%; }
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }

/* WordPress figure caption */
.wp-caption { max-width: 100%; }
.wp-caption-text,
.gallery-caption {
    font-size:  0.8125rem;
    color:      var(--color-gray-500);
    margin-top: 0.375rem;
}

/* WordPress sticky post indicator */
.sticky { /* intentionally un-styled — extend as needed */ }

/* Screen-reader text — WordPress standard utility class.
   Clips the element to 1×1px and removes it from layout flow entirely.
   The :focus rule reveals it as a visible button for keyboard users.
   This is the ONLY .screen-reader-text block in this stylesheet —
   no duplicate rules exist below. */
.screen-reader-text {
    border:     0;
    clip:       rect(1px, 1px, 1px, 1px);
    clip-path:  inset(50%);
    height:     1px;
    margin:     -1px;
    overflow:   hidden;
    padding:    0;
    position:   absolute !important; /* !important defeats any Tailwind reset */
    width:      1px;
    word-wrap:  normal !important;
    /* No top/left/right/bottom — element is 1px and overflow:hidden.
       The negative margin pulls it out of flow without displacing siblings. */
}

.screen-reader-text:focus {
    background-color: var(--color-gray-100);
    border-radius:    var(--radius-sm);
    box-shadow:       0 0 0 2px var(--color-brand-dark);
    clip:             auto !important;
    clip-path:        none;
    color:            var(--color-gray-800);
    display:          block;
    font-size:        0.875rem;
    font-weight:      700;
    height:           auto;
    left:             0.25rem;
    top:              0.25rem;
    padding:          0.875rem 1.5rem;
    position:         absolute !important;
    width:            auto;
    z-index:          100000;
    text-decoration:  none;
}


/* =============================================================================
  12. WP_NAV_MENU() OUTPUT STYLING
   ─────────────────────────────────────────────────────────────────────────────
   WordPress generates its own <ul><li><a> structure for wp_nav_menu() output.
   These rules apply the brand typography and colour scheme to that output so
   the menu renders correctly whether a custom Walker is used or not.

   Targets:
     .gogreen-primary-nav-list — desktop <ul> inside the sticky header <nav>
     .gogreen-mobile-nav-list  — mobile drawer <ul>
     .space-y-3.5              — footer Quick Links <ul>
     .space-y-3\.5.text-sm    — footer Services <ul>
   ============================================================================= */

/* ── Desktop primary nav <li> and <a> ─────────────────────────────────────── */
.gogreen-primary-nav-list li {
    list-style: none;
    margin:     0;
    padding:    0;
    position:   relative; /* Required for the absolute underline <span> */
}

.gogreen-primary-nav-list li a {
    font-family:     var(--font-display);
    font-weight:     500;
    font-size:       0.875rem;  /* text-sm */
    color:           #4b5563;   /* text-gray-600 */
    text-decoration: none;
    transition:      color 0.2s ease;
    display:         block;
    padding:         0.5rem 0;  /* py-2 */
    position:        relative;
}

.gogreen-primary-nav-list li a:hover {
    color: var(--color-brand-darkest); /* hover:text-[#1B5E20] */
}

/* Active state — WordPress injects .current-menu-item on the active <li> */
.gogreen-primary-nav-list li.current-menu-item > a,
.gogreen-primary-nav-list li.current-page-ancestor > a {
    color: var(--color-brand-darkest); /* text-[#1B5E20] */
}

/* Active underline bar — mirrors the static <span> element on active links */
.gogreen-primary-nav-list li.current-menu-item > a::after,
.gogreen-primary-nav-list li.current-page-ancestor > a::after {
    content:          '';
    position:         absolute;
    bottom:           0;
    left:             0;
    right:            0;
    height:           2px;            /* h-0.5 */
    background-color: var(--color-brand-dark); /* bg-[#2E7D32] */
    border-radius:    var(--radius-full);
}


/* ── Mobile drawer nav <li> and <a> ───────────────────────────────────────── */
.gogreen-mobile-nav-list {
    list-style: none;
    margin:     0;
    padding:    0;
}

.gogreen-mobile-nav-list li {
    list-style: none;
    margin:     0;
    padding:    0;
}

.gogreen-mobile-nav-list li a {
    display:         block;
    padding:         0.625rem 1rem; /* py-2.5 px-4 */
    border-radius:   0.75rem;       /* rounded-xl */
    font-family:     var(--font-display);
    font-weight:     600;
    font-size:       0.875rem;
    color:           #374151;       /* text-gray-700 */
    text-decoration: none;
    transition:      all 0.2s ease;
}

.gogreen-mobile-nav-list li a:hover {
    background-color: #f9fafb;                   /* hover:bg-gray-50 */
    color:            var(--color-brand-darkest);
}

.gogreen-mobile-nav-list li.current-menu-item > a {
    background-color: var(--color-brand-bg-tint); /* bg-[#1B5E20]/10 */
    color:            var(--color-brand-darkest);  /* text-[#1B5E20] */
}


/* ── Footer nav columns <li> and <a> ──────────────────────────────────────── */
/* Targets both .space-y-3\.5 (Quick Links) and .space-y-3\.5.text-sm (Services) */
#footer-quick-links-menu li,
#footer-services-menu li {
    list-style: none;
    margin:     0;
    padding:    0;
}

#footer-quick-links-menu li a,
#footer-services-menu li a {
    font-size:       0.875rem;
    color:           #9ca3af;   /* text-gray-400 */
    text-decoration: none;
    transition:      color 0.2s ease;
    display:         flex;
    align-items:     center;
    gap:             0.375rem;
}

#footer-quick-links-menu li a:hover,
#footer-services-menu li a:hover {
    color: #ffffff; /* hover:text-white */
}


/* =============================================================================
  13. MOBILE HERO SLIDER CONTROLS
   ─────────────────────────────────────────────────────────────────────────────
   The mobile in-flow controls (class="flex md:hidden ...") inside each slide
   use a lighter version of the custom arrow overrides from Section 8.
   Smaller profile (22×22px) so they fit neatly in the row below the CTA buttons.
   ============================================================================= */

/* Shared mobile arrow sizing — the static override in Section 8 handles desktop */
@media (max-width: 767px) {
    .hero-swiper-prev-btn,
    .hero-swiper-next-btn {
        width:  22px !important;
        height: 22px !important;
    }

    .hero-swiper-prev-btn i,
    .hero-swiper-next-btn i {
        width:  12px !important;
        height: 12px !important;
    }
}