/*
Theme Name: Ozone Empowerment
Theme URI: https://www.ozoneempowerment.org
Author: Ozone Empowerment Foundation NPO
Author URI: https://www.ozoneempowerment.org
Description: A production-ready, Elementor-compatible WordPress theme built for Ozone Empowerment Foundation NPO. Converted from the organization's original static site design. Fully editable in the free version of Elementor — the header and footer are theme-coded, while every page body is built with native Elementor sections, columns, and widgets.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ozone-empowerment
Tags: non-profit, custom-background, custom-logo, custom-menu, featured-images, full-width-template, theme-options, threaded-comments, translation-ready, one-column, two-columns, e-commerce-friendly
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root{
  --c-white:#ffffff;

  --c-slate-50:#f8fafc;
  --c-slate-100:#f1f5f9;
  --c-slate-200:#e2e8f0;
  --c-slate-300:#cbd5e1;
  --c-slate-400:#94a3b8;
  --c-slate-500:#64748b;
  --c-slate-600:#475569;
  --c-slate-700:#334155;
  --c-slate-800:#1e293b;
  --c-slate-900:#0f172a;
  --c-slate-950:#020617;

  --c-cyan-50:#ecfeff;
  --c-cyan-100:#cffafe;
  --c-cyan-200:#a5f3fc;
  --c-cyan-400:#22d3ee;
  --c-cyan-500:#06b6d4;
  --c-cyan-600:#0891b2;
  --c-cyan-700:#0e7490;
  --c-cyan-800:#155e75;
  --c-cyan-900:#164e63;
  --c-cyan-950:#083344;

  --c-teal-400:#2dd4bf;

  --radius-md:0.75rem;
  --radius-lg:1rem;
  --radius-xl:1.5rem;

  --container-max:1280px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--c-slate-50);
  color:var(--c-slate-800);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; }
h1,h2,h3,h4,h5,h6{ margin:0 0 0.5em; font-weight:800; color:var(--c-slate-900); line-height:1.15; }
p{ margin:0 0 1em; }

/* WordPress core required classes */
.alignleft{ float:left; margin:0 1.5em 1.5em 0; }
.alignright{ float:right; margin:0 0 1.5em 1.5em; }
.aligncenter{ display:block; margin:0 auto 1.5em; }
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-size:0.85rem; color:var(--c-slate-500); text-align:center; }
.screen-reader-text{
  position:absolute !important;
  clip:rect(1px,1px,1px,1px);
  width:1px; height:1px; overflow:hidden;
  word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:#fff; color:#0f172a; display:block;
  clip:auto !important; width:auto; height:auto;
  padding:15px 23px; line-height:normal;
  z-index:100000; position:fixed; top:6px; left:6px;
  text-decoration:none; border-radius:6px;
}
.skip-link{ position:absolute; left:-9999px; top:0; }
.skip-link:focus{ left:6px; top:6px; z-index:100000; }

/* =========================================================
   3. LAYOUT HELPERS
   ========================================================= */
.container{
  max-width:var(--container-max);
  margin-left:auto; margin-right:auto;
  padding-left:1rem; padding-right:1rem;
}
@media(min-width:640px){ .container{ padding-left:1.5rem; padding-right:1.5rem; } }
@media(min-width:1024px){ .container{ padding-left:2rem; padding-right:2rem; } }

/* =========================================================
   4. SITE HEADER / NAVIGATION  (theme-coded, not Elementor-edited)
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:9999;
  background:rgba(255,255,255,0.95);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
  border-bottom:1px solid var(--c-slate-100);
}
.site-header__inner{
  max-width:var(--container-max);
  margin:0 auto;
  height:5rem;
  padding:0 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
@media(min-width:640px){ .site-header__inner{ padding:0 1.5rem; } }
@media(min-width:1024px){ .site-header__inner{ padding:0 2rem; } }

.site-branding{
  display:flex; align-items:center; gap:0.75rem;
  text-align:left; background:none; border:0;
}
.site-branding__mark{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:3rem; height:3rem;
  border-radius:0.75rem;
  border:2px solid var(--c-cyan-500);
  background:var(--c-white);
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
  transition:transform .2s ease;
  flex-shrink:0;
}
.site-branding:hover .site-branding__mark{ transform:scale(1.05); }
.site-branding__mark i.fa-hands-holding{ color:var(--c-slate-500); font-size:1.1rem; position:absolute; }
.site-branding__mark i.fa-cubes{ color:var(--c-cyan-500); font-size:0.65rem; margin-top:-1.3rem; }
.site-branding__text{ display:flex; flex-direction:column; line-height:1.2; }
.site-branding__name{
  font-weight:800; color:var(--c-slate-900); letter-spacing:-0.01em;
  font-size:1rem;
}
@media(min-width:640px){ .site-branding__name{ font-size:1.125rem; } }
.site-branding:hover .site-branding__name{ color:var(--c-cyan-600); }
.site-branding__sub{ display:flex; align-items:center; gap:0.35rem; margin-top:0.15rem; }
.site-branding__tag{ font-size:9px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--c-cyan-600); }
.site-branding__reg{ font-size:8px; padding:0 0.25rem; background:var(--c-slate-100); border:1px solid var(--c-slate-200); border-radius:4px; color:var(--c-slate-500); font-family:monospace; }

.main-navigation{ display:none; }
@media(min-width:768px){
  .main-navigation{ display:flex; align-items:center; gap:1.5rem; }
}
.main-navigation ul{ display:flex; align-items:center; gap:1.5rem; list-style:none; }
.main-navigation a{
  font-weight:700; font-size:0.875rem; color:var(--c-slate-600);
  padding:0.5rem 0.25rem; transition:color .2s ease;
  white-space:nowrap;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a{ color:var(--c-cyan-600); }

.header-cta{ flex-shrink:0; }

.menu-toggle{
  display:flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem;
  background:var(--c-slate-100); border:1px solid var(--c-slate-200);
  border-radius:0.6rem; color:var(--c-slate-700); font-size:1.1rem;
}
@media(min-width:768px){ .menu-toggle{ display:none; } }

.mobile-navigation{
  display:none;
  background:var(--c-white);
  border-top:1px solid var(--c-slate-100);
  border-bottom:1px solid var(--c-slate-100);
}
.mobile-navigation.is-open{ display:block; }
@media(min-width:768px){ .mobile-navigation{ display:none !important; } }
.mobile-navigation ul{ list-style:none; max-width:var(--container-max); margin:0 auto; padding:0.5rem 1rem 1rem; }
.mobile-navigation a{
  display:block; padding:0.75rem 0.25rem; font-weight:700; font-size:0.95rem;
  color:var(--c-slate-700); border-bottom:1px solid var(--c-slate-100);
}
.mobile-navigation a:hover{ color:var(--c-cyan-600); }

/* =========================================================
   5. BUTTONS  (apply via Elementor "CSS Classes" field too)
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-weight:700; font-size:0.875rem;
  padding:0.75rem 1.5rem;
  border-radius:0.75rem;
  border:1px solid transparent;
  transition:all .2s ease;
  line-height:1.2;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--c-cyan-600); color:var(--c-white);
  box-shadow:0 4px 10px rgba(8,145,178,0.15);
}
.btn-primary:hover{ background:var(--c-cyan-700); box-shadow:0 6px 16px rgba(8,145,178,0.22); }
.btn-dark{
  background:rgba(15,23,42,0.85); color:var(--c-white);
  border-color:rgba(51,65,85,0.6);
}
.btn-dark:hover{ background:var(--c-slate-800); }
.btn-outline{
  background:transparent; color:var(--c-slate-700); border-color:var(--c-slate-200);
}
.btn-outline:hover{ background:var(--c-slate-50); }
.btn-sm{ padding:0.5rem 1rem; font-size:0.8rem; }

/* =========================================================
   6. COMPONENT CLASSES — reusable inside Elementor (Advanced > CSS Classes)
   ========================================================= */

/* 3D depth hover card — add class "card-3d" to any Elementor Section/Column/Container */
.card-3d{
  transition:transform .4s cubic-bezier(.165,.84,.44,1), box-shadow .4s ease;
  transform:perspective(1000px) rotateX(1deg) rotateY(-1deg) translateZ(0);
  box-shadow:4px 4px 0 rgba(8,145,178,0.2), 12px 12px 24px rgba(0,0,0,0.06);
  border-radius:var(--radius-lg);
}
.card-3d:hover{
  transform:perspective(1000px) rotateX(4deg) rotateY(-3deg) translateZ(12px) translateY(-6px);
  box-shadow:12px 12px 0 rgba(8,145,178,0.25), 20px 24px 40px rgba(0,0,0,0.12);
}

/* Gradient headline accent — wrap a word/span and add class "gradient-text" */
.gradient-text{
  background:linear-gradient(to right, var(--c-cyan-400), var(--c-teal-400));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Small uppercase pill / eyebrow label — add class "badge-pill" */
.badge-pill{
  display:inline-block;
  font-size:10px; font-weight:800; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--c-cyan-400);
  background:rgba(8,51,68,0.8);
  padding:0.5rem 1rem; border-radius:999px;
  border:1px solid rgba(21,94,117,0.6);
}
.badge-pill-light{
  color:var(--c-cyan-700); background:var(--c-cyan-50); border:1px solid var(--c-cyan-100);
}

/* Dark section background helper — add class "section-dark" */
.section-dark{ background:var(--c-slate-950); color:var(--c-white); }
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{ color:var(--c-white); }
.section-dark2{ background:var(--c-slate-900); color:var(--c-white); }
.section-dark2 h1,.section-dark2 h2,.section-dark2 h3,.section-dark2 h4{ color:var(--c-white); }

/* Small square icon chip used inside icon-box widgets — add class "icon-chip" to the icon */
.icon-chip{
  width:2.5rem; height:2.5rem;
  background:var(--c-cyan-50); color:var(--c-cyan-600);
  border:1px solid var(--c-cyan-100);
  border-radius:0.75rem;
  display:inline-flex; align-items:center; justify-content:center;
}
.icon-chip-dark{
  background:var(--c-slate-700); color:var(--c-cyan-400); border:0;
}

/* Statutory banking table — used inside a Text Editor widget */
table.banking-table{ width:100%; border-collapse:collapse; font-size:0.875rem; }
table.banking-table tr{ border-bottom:1px solid var(--c-slate-100); }
table.banking-table tr:last-child{ border-bottom:0; }
table.banking-table td{ padding:0.65rem 0; vertical-align:middle; }
table.banking-table td:first-child{ color:var(--c-slate-500); }
table.banking-table td:last-child{ text-align:right; font-weight:700; color:var(--c-slate-900); }
table.banking-table .account-number{
  display:inline-block;
  background:var(--c-cyan-50); border:1px solid var(--c-cyan-200);
  color:var(--c-cyan-800); font-family:monospace; font-weight:800;
  padding:0.25rem 0.75rem; border-radius:0.75rem; letter-spacing:0.03em;
}

/* Footer pillar tag list */
.footer-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; font-family:monospace; color:var(--c-slate-700); }

/* Generic prose styling so Text Editor widget content matches the brand */
.entry-content,.elementor-widget-text-editor .elementor-widget-container{
  color:var(--c-slate-600);
  font-size:0.95rem;
  line-height:1.7;
}
.entry-content h2,.entry-content h3{ color:var(--c-slate-900); }

/* =========================================================
   7. FOOTER  (theme-coded)
   ========================================================= */
.site-footer{
  background:var(--c-slate-950); color:var(--c-slate-500);
  font-size:11px; padding:2.5rem 0; border-top:1px solid var(--c-slate-900);
  text-align:center;
}
.site-footer p{ margin:0 0 0.5rem; }
.site-footer__copy{ color:var(--c-slate-400); font-weight:600; }
.site-footer .footer-tags{ margin-top:0.75rem; color:var(--c-slate-700); }

/* =========================================================
   8. ELEMENTOR COMPATIBILITY
   ========================================================= */
/* Let Elementor sections run full width; the theme adds no extra max-width
   wrapper around the_content() so each Elementor section controls its own
   width/boxed setting natively. */
.site-main{ overflow-x:hidden; }
.site-main > .entry-content{ width:100%; }

/* Elementor's default "boxed" content width is 1140px by default in
   Site Settings > Layout > Content Width — increase it to 1280px in
   Elementor settings to match this theme's container if desired. */