/*
Theme Name: Tropical AgriFoods
Theme URI: https://tropicalagrifoods.com
Author: TechVeta Agency
Author URI: https://techveta.online
Description: Premium, custom WordPress theme for Tropical AgriFoods Ltd. Feeding Families, Empowering Farmers. Nestle-inspired editorial layouts with Tropical AgriFoods brand identity.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tropical-agrifoods
Tags: custom-menu, custom-logo, post-formats, translation-ready, accessibility-ready, full-width-template, grid-layout
*/

/* ==========================================================================
   DESIGN TOKENS — TROPICAL AGRIFOODS BRAND SYSTEM
   Colors extracted from official logo:
   - Forest Green (#1A5C2A) — primary brand green used in "AgriFoods" wordmark
   - Golden Yellow (#F5C800) — sun icon in logo mark
   - Near-Black (#1A1A1A)  — "Tropical" wordmark
   ========================================================================== */
:root {
  /* — Brand Greens — */
  --color-brand-green:       #1A5C2A;   /* Primary — logo "AgriFoods" text */
  --color-brand-green-deep:  #124020;   /* Darkened — hover / dark sections */
  --color-brand-green-mid:   #2E7D35;   /* Mid — icon leaves, accent fills */
  --color-brand-green-light: #EAF4EC;   /* Tinted — soft section backgrounds */

  /* — Brand Gold — */
  --color-brand-gold:        #F5C800;   /* Primary — logo sun */
  --color-brand-gold-dark:   #C9A400;   /* Darkened — hover states */
  --color-brand-gold-pale:   #FDF6D3;   /* Very light — warm tinted bg */

  /* — Neutrals — */
  --color-near-black:        #1A1A1A;   /* "Tropical" wordmark / headlines */
  --color-charcoal:          #2D2D2D;   /* Body text */
  --color-mid-grey:          #6B7280;   /* Captions / secondary text */
  --color-border:            #D9E8DC;   /* Dividers & card borders */

  /* — Backgrounds (Nestle-style warm whites) — */
  --color-bg-cream:          #FAF8F3;   /* Default page background */
  --color-bg-sage:           #F0F5F1;   /* Alternate section background */
  --color-bg-white:          #FFFFFF;   /* Cards, modal bg */
  --color-bg-dark:           #0E3018;   /* Footer / CTA dark sections */

  /* — Pre-Hero Brand Bar (Light Mode) — */
  --color-pre-hero-bg:           #1A1A1A;
  --color-pre-hero-border:       #2A2A2A;
  --color-pre-hero-text:         #FFFFFF;
  --color-pre-hero-link:         #8c8c8c;
  --color-pre-hero-link-hover:   #ffffff;
  --color-pre-hero-separator:    #333;
  --color-pre-hero-search-border:#444;
  --color-pre-hero-search-icon:  #888;
  --color-pre-hero-search-placeholder: #666;

  /* — Pre-Hero Brand Bar (Dark Mode) — */
  --dark-color-pre-hero-bg:           #121212;
  --dark-color-pre-hero-border:       #262626;
  --dark-color-pre-hero-text:         #e0e0e0;
  --dark-color-pre-hero-link:         #a0a0a0;
  --dark-color-pre-hero-link-hover:   #ffffff;
  --dark-color-pre-hero-separator:    #333;
  --dark-color-pre-hero-search-border:#555;
  --dark-color-pre-hero-search-icon:  #a0a0a0;
  --dark-color-pre-hero-search-placeholder: #888;

  /* — Pre-Hero Contact Button — */
  --color-pre-hero-btn-bg:         #006699;
  --color-pre-hero-btn-color:      #ffffff;
  --dark-color-pre-hero-btn-bg:    #005580;
  --dark-color-pre-hero-btn-color: #ffffff;

  /* — Pre-Hero Dropdown Select — */
  --color-pre-hero-select-bg:      #1a1a1a;
  --color-pre-hero-select-color:   #ffffff;
  --dark-color-pre-hero-select-bg: #121212;
  --dark-color-pre-hero-select-color: #e0e0e0;

  /* — Pre-Hero Nav Links — */
  --color-pre-hero-nav-link:       #8c8c8c;
  --color-pre-hero-nav-link-hover: #ffffff;
  --color-pre-hero-nav-link-bold:  #a6a6a6;
  --dark-color-pre-hero-nav-link:       #a0a0a0;
  --dark-color-pre-hero-nav-link-hover: #ffffff;
  --dark-color-pre-hero-nav-link-bold:  #e0e0e0;

  /* — Typography — */
  --font-headings: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:     'Inter',  -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* — Fluid Type Scale — */
  --type-display: clamp(2.6rem, 5vw, 4.2rem);   /* Hero headline */
  --type-h1:      clamp(2rem,   4vw, 3rem);      /* Page titles */
  --type-h2:      clamp(1.6rem, 3vw, 2.25rem);   /* Section headings */
  --type-h3:      clamp(1.25rem,2vw, 1.6rem);    /* Card titles */
  --type-h4:      1.125rem;
  --type-body:    1rem;
  --type-small:   0.875rem;
  --type-xs:      0.75rem;

  /* — Line Heights — */
  --lh-heading: 1.15;
  --lh-body:    1.7;
  --lh-loose:   1.9;

  /* — Spacing (Organic, Airy — like Nestle) — */
  --space-section: clamp(5rem, 9vw, 9rem);
  --space-xl:      clamp(3rem, 5vw, 5rem);
  --space-lg:      2.5rem;
  --space-md:      1.5rem;
  --space-sm:      1rem;
  --space-xs:      0.5rem;
  --space-xxs:     0.25rem;

  /* — Layout — */
  --container-max:   1380px;
  --container-wide:  1600px;
  --container-tight: 860px;

  /* — Radii — */
  --radius-sm:    4px;
  --radius-md:    10px;
  --radius-lg:    20px;
  --radius-xl:    32px;
  --radius-round: 999px;

  /* — Shadows — */
  --shadow-card:    0 2px 16px rgba(26,92,42,0.08);
  --shadow-hover:   0 8px 32px rgba(26,92,42,0.14);
  --shadow-nav:     0 2px 24px rgba(0,0,0,0.07);

  /* — Transitions — */
  --ease-smooth: all 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  --ease-fast:   all 0.22s ease;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  color: var(--color-near-black);
  line-height: var(--lh-heading);
  margin-top: 0;
  margin-bottom: var(--space-sm);
  font-weight: 700;
}

p { margin-top: 0; margin-bottom: var(--space-sm); }

a {
  color: var(--color-brand-green);
  text-decoration: none;
  transition: var(--ease-fast);
}
a:hover { color: var(--color-brand-green-deep); }

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

ul, ol { padding-left: 1.25em; }

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.container--wide  { max-width: var(--container-wide); }
.container--tight { max-width: var(--container-tight); }

.section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  position: relative;
  overflow: hidden;
}

.section--sage  { background-color: #f7f8f9; }
.section--white { background-color: #ffffff; }
.section--dark  { background-color: var(--color-bg-dark); color: #fff; }
.section--gold-pale { background-color: var(--color-brand-gold-pale); }

/* ==========================================================================
   ACCESSIBILITY UTILITIES
   ========================================================================== */
.sr-only,
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Reset bullet points on nav menus */
.nav-menu,
.dropdown-menu,
.mobile-nav-list,
.mobile-sub-list,
.dropdown-sub {
  list-style: none;
  padding-left: 0;
  margin: 0;
}