/*
Theme Name: TAQ Fruits Simple
Theme URI: https://thimaralqaryafruits.com
Author: Thimar Al Qarya Fruits Trading L.L.C.
Description: Modern, mobile-friendly theme for Thimar Al Qarya Fruits Trading LLC. Green and citrus palette from the company logo, with a glass header, scroll animations, and floating WhatsApp/Instagram buttons.
Version: 2.0
Requires at least: 5.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taq-fruits
*/

:root{
  --green: #1c7a3e;
  --green-light: #2e9950;
  --green-dark: #125429;
  --green-deep: #0a2e16;
  --cream: #fbfaf6;
  --mint: #eef8f0;
  --line: #e1e9df;
  --ink: #14201a;
  --ink-soft: #566358;
  --citrus: #f0982f;
  --citrus-light: #ffb35c;
  --white: #ffffff;
  --max: 1180px;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --shadow-sm: 0 2px 10px rgba(13,59,29,.06);
  --shadow-md: 0 10px 30px rgba(13,59,29,.10);
  --shadow-lg: 0 22px 55px rgba(13,59,29,.16);
  --radius: 20px;
  --radius-sm: 12px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: var(--green); text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--serif); line-height:1.1; margin:0 0 .5em; font-weight:600; color: var(--green-deep); letter-spacing:-0.01em; }
p{ max-width:66ch; }
.wrap{ max-width: var(--max); margin:0 auto; padding:0 24px; }
.pill{ display:inline-flex; align-items:center; gap:6px; }
::selection{ background: var(--citrus-light); color: var(--green-deep); }

:focus-visible{ outline:2px solid var(--citrus); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* Top bar */
.top-bar{ background: var(--green-deep); color:#cfe3d2; font-size:.85rem; }
.top-bar .wrap{ display:flex; justify-content:space-between; align-items:center; padding:9px 24px; flex-wrap:wrap; gap:8px; }
.top-bar a{ color:#cfe3d2; }
.top-bar a:hover{ color: var(--white); }
.top-bar .socials{ display:flex; gap:14px; align-items:center; }
.top-bar .socials a{ display:flex; }
.top-bar svg{ width:16px; height:16px; }

/* Header */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(251,250,246,.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding:12px 24px; gap:20px; }
.branding{ display:flex; align-items:center; gap:12px; }
.branding img{ height:52px; width:auto; border-radius:8px; }
.site-title{ font-family: var(--serif); font-size:1.2rem; margin:0; color: var(--green-deep); line-height:1.2; }
.site-title span{ display:block; font-family: var(--sans); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); font-weight:600; margin-top:2px; }
.site-title a{ color:inherit; }

.primary-nav ul{ list-style:none; display:flex; gap:8px; margin:0; padding:0; align-items:center; }
.primary-nav a{ color: var(--ink); font-weight:600; font-size:.95rem; padding:9px 14px; border-radius:999px; display:inline-block; transition: background .2s, color .2s; }
.primary-nav a:hover{ background: var(--mint); color: var(--green); }
.header-cta{ background: var(--green) !important; color: var(--white) !important; box-shadow: var(--shadow-sm); }
.header-cta:hover{ background: var(--green-dark) !important; }

.nav-toggle{
  display:none; background:none; border: none; width:44px; height:44px; border-radius:50%;
  align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle:hover{ background: var(--mint); }
.nav-toggle svg{ width:22px; height:22px; }
.nav-toggle .icon-close{ display:none; }
body.nav-open .nav-toggle .icon-menu{ display:none; }
body.nav-open .nav-toggle .icon-close{ display:block; }

@media (max-width: 880px){
  .nav-toggle{ display:flex; }
  .primary-nav{
    position: fixed; inset: 68px 0 0 0; background: var(--cream);
    transform: translateY(-12px); opacity:0; pointer-events:none;
    transition: opacity .25s ease, transform .25s ease;
    overflow-y: auto; padding: 10px 0 30px;
  }
  body.nav-open .primary-nav{ opacity:1; transform:none; pointer-events:auto; }
  .primary-nav ul{ flex-direction:column; align-items:stretch; padding: 6px 24px; gap:4px; }
  .primary-nav a{ padding:14px 16px; font-size:1.05rem; border-radius:14px; }
  .header-cta{ margin-top:10px; text-align:center; }
}

/* Hero */
.hero{
  position: relative; overflow:hidden;
  padding: 90px 0 84px;
  background: radial-gradient(1200px 500px at 85% -10%, #d7ecdb 0%, transparent 60%),
              linear-gradient(180deg, var(--mint) 0%, var(--cream) 100%);
}
.hero::before, .hero::after{
  content:""; position:absolute; border-radius:50%; filter: blur(70px); z-index:0;
}
.hero::before{ width:340px; height:340px; background: rgba(28,122,62,.18); top:-120px; right:-80px; }
.hero::after{ width:260px; height:260px; background: rgba(240,152,47,.20); bottom:-100px; left:-60px; }
.hero .wrap{ position:relative; z-index:1; display:grid; grid-template-columns: 1.15fr 1fr; gap:52px; align-items:center; }
.eyebrow{ color: var(--citrus); font-weight:700; letter-spacing:.09em; text-transform:uppercase; font-size:.78rem; }
.hero h1{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin-top:12px; }
.hero .lede{ color: var(--ink-soft); font-size:1.12rem; max-width:48ch; }
.cta-row{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:999px; font-weight:700; font-size:.96rem; border:2px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover{ transform: translateY(-2px); text-decoration:none; }
.btn-primary{ background: var(--green); color: var(--white); box-shadow: var(--shadow-md); }
.btn-primary:hover{ background: var(--green-dark); box-shadow: var(--shadow-lg); }
.btn-ghost{ background: var(--white); color: var(--green-deep); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--green); background: var(--mint); }

.hero .badge-panel{ background: var(--white); border-radius: var(--radius); padding: 26px; display:grid; gap:16px; box-shadow: var(--shadow-lg); }
.badge-item{ display:flex; gap:14px; align-items:flex-start; }
.badge-item .dot{ width:40px; height:40px; border-radius:50%; background: var(--mint); color: var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.15rem; }
.badge-item h4{ margin:0 0 2px; font-family: var(--sans); font-size:1rem; font-weight:700; color: var(--ink); }
.badge-item p{ margin:0; font-size:.9rem; color: var(--ink-soft); }
@media (max-width:900px){ .hero .wrap{ grid-template-columns:1fr; } .hero{ padding:64px 0 60px; } }

/* Section shell */
.section{ padding:76px 0; position:relative; }
.section-alt{ background: var(--mint); }
.section-deep{ background: linear-gradient(160deg, var(--green-deep), #103d20); color:#d5e8d8; }
.section-deep h2, .section-deep h3{ color: var(--white); }
.section-deep p{ color:#b9d3bd; }
.section-deep .eyebrow{ color: var(--citrus-light); }
.section-head{ max-width:64ch; margin-bottom:44px; }
.section-head h2{ font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin-top:8px; }
.section-head p{ color: var(--ink-soft); }

/* About */
.about-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.values-list{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:13px; }
.values-list li{ display:flex; gap:12px; color: var(--ink-soft); align-items:flex-start; }
.values-list li .check{ width:22px; height:22px; border-radius:50%; background: var(--green); color:var(--white); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.7rem; margin-top:2px; }
.about-photo{ background: var(--white); border-radius: var(--radius); padding:44px; text-align:center; box-shadow: var(--shadow-md); position:relative; }
.about-photo img{ width:130px; margin:0 auto; }
.about-photo::after{ content:"🍊"; position:absolute; font-size:2.2rem; top:-16px; right:22px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.15)); }
@media (max-width:900px){ .about-wrap{ grid-template-columns:1fr; } }

/* Feature grid */
.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.feature-card{ background: var(--white); border-radius: var(--radius-sm); padding:28px 22px; text-align:center; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.feature-card .icon{ width:54px; height:54px; border-radius:16px; background: var(--mint); color: var(--green); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:1.5rem; }
.feature-card h3{ font-family: var(--sans); font-size:1.02rem; color: var(--ink); margin-bottom:6px; font-weight:700; }
.feature-card p{ font-size:.9rem; color: var(--ink-soft); margin:0; }
@media (max-width:960px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .feature-grid{ grid-template-columns:1fr; } }

/* Products */
.category-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.category-card{ background: var(--white); border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.category-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cat-head{ background: linear-gradient(135deg, var(--green), var(--green-dark)); color: var(--white); padding:20px 22px; display:flex; align-items:center; gap:10px; }
.cat-head .emoji{ font-size:1.3rem; }
.cat-head h3{ color: var(--white); margin:0; font-size:1.12rem; }
.category-card ul{ list-style:none; margin:0; padding:18px 22px; display:grid; gap:9px; flex:1; }
.category-card ul li{ color: var(--ink-soft); font-size:.96rem; padding-left:18px; position:relative; }
.category-card ul li::before{ content:"•"; color: var(--citrus); position:absolute; left:0; font-weight:700; }
@media (max-width:960px){ .category-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .category-grid{ grid-template-columns:1fr; } }

/* Pillars */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.pillar{ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); padding:26px; }
.pillar .num{ color: var(--citrus-light); font-family: var(--serif); font-size:1.9rem; }
.pillar h3{ font-size:1.14rem; }
.pillar p{ font-size:.95rem; }
@media (max-width:900px){ .pillars{ grid-template-columns:1fr; } }

/* Contact */
.contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.contact-details dt{ color: var(--citrus); font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; margin-top:20px; font-weight:700; }
.contact-details dt:first-child{ margin-top:0; }
.contact-details dd{ margin:4px 0 0; font-size:1.06rem; }
.contact-quicklinks{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.contact-quicklinks a{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; font-weight:700; font-size:.9rem; box-shadow: var(--shadow-sm); }
.contact-quicklinks svg{ width:18px; height:18px; }
.wa-link{ background:#25D366; color:#fff; }
.ig-link{ background: radial-gradient(circle at 30% 30%, #feda75, #fa7e1e 30%, #d62976 55%, #962fbf 75%, #4f5bd5 95%); color:#fff; }

.contact-form{ display:grid; gap:15px; background: var(--white); border-radius: var(--radius); padding:28px; box-shadow: var(--shadow-md); }
.contact-form label{ font-size:.85rem; color: var(--ink-soft); display:block; margin-bottom:5px; font-weight:700; }
.contact-form input, .contact-form textarea{ width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius: var(--radius-sm); font-family: var(--sans); font-size:1rem; background: var(--cream); transition: border-color .2s; }
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color: var(--green); background: var(--white); }
.form-note{ font-size:.82rem; color: var(--ink-soft); max-width:none; margin-top:0; }
@media (max-width:900px){ .contact-wrap{ grid-template-columns:1fr; } }

/* Generic page/post content */
.content-wrap{ padding:70px 0; }
.content-wrap .entry-content > * + *{ margin-top:1.1em; }

/* Footer */
.site-footer{ background: var(--green-deep); color:#b9d3bd; padding:56px 0 26px; font-size:.92rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.footer-grid h4{ color: var(--white); font-family: var(--sans); font-size:1rem; margin-bottom:14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.footer-grid a{ color:#b9d3bd; }
.footer-grid a:hover{ color: var(--white); }
.footer-socials{ display:flex; gap:12px; margin-top:16px; }
.footer-socials a{ width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition: background .2s; }
.footer-socials a:hover{ background: rgba(255,255,255,.18); }
.footer-socials svg{ width:18px; height:18px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:36px; padding-top:20px; text-align:center; font-size:.85rem; color:#8fae94; }
@media (max-width:780px){ .footer-grid{ grid-template-columns:1fr; } }

/* Floating action buttons */
.fab-stack{ position: fixed; right:20px; bottom:20px; z-index:60; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.fab{ width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-lg); color:#fff; transition: transform .2s ease; }
.fab:hover{ transform: scale(1.08); }
.fab svg{ width:28px; height:28px; }
.fab-wa{ background:#25D366; position:relative; }
.fab-wa::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:.55; animation: fab-pulse 2.2s ease-out infinite; z-index:-1; }
.fab-ig{ background: radial-gradient(circle at 30% 30%, #feda75, #fa7e1e 30%, #d62976 55%, #962fbf 75%, #4f5bd5 95%); }
@keyframes fab-pulse{ 0%{ transform: scale(1); opacity:.5; } 100%{ transform: scale(1.7); opacity:0; } }
@media print{ .fab-stack{ display:none; } }