/*
Theme Name:  ABCD Foods
Theme URI:   https://www.abcd.com
Description: A modern, B2B product showcase theme for ABCD Foods.
Version:     1.0.0
Author:      ABCD Foods Dev
Text Domain: abcd-theme
*/

/* ─── Google Fonts Import ─── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:wght@600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
    --primary:     #1a4731;
    --primary-lg:  #2a6b4a;
    --accent:      #e8a838;
    --accent-dk:   #c78a1e;
    --bg:          #f4f6f2;
    --card-bg:     #ffffff;
    --text:        #2c2c2c;
    --text-muted: #6b7280;
    --border:      #e2e6df;
    --radius:      12px;
    --shadow:      0 4px 24px rgba(26,71,49,.08);
    --shadow-hover:0 8px 40px rgba(26,71,49,.16);
}

html { scroll-behavior:smooth; }

body {
    font-family:   'DM Sans', sans-serif;
    background:    var(--bg);
    color:         var(--text);
    line-height:   1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x:    hidden;
}

a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block; }
ul, ol { list-style:none; }

h1, h2, h3, h4 { font-family:'Playfair Display', serif; font-weight:700; }


/* ═══════════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════════ */
.abcdt-nav {
    position:         sticky;
    top:              0;
    z-index:          900;
    background:       rgba(26,71,49,.92);
    backdrop-filter:  saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom:    1px solid rgba(255,255,255,.08);
    transition:       box-shadow .3s;
    min-height:       90px;
}
.abcdt-nav--scrolled {
    box-shadow: 0 2px 20px rgba(0,0,0,.18);
}
.abcdt-nav__inner {
    max-width:       1200px;
    margin:          0 auto;
    padding:         15px 24px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    min-height:      90px;
}
.abcdt-nav__logo {
    font-family:   'Playfair Display', serif;
    font-size:     1.55rem;
    font-weight:   700;
    color:         #fff;
    letter-spacing:-.5px;
}
.abcdt-nav__logo span { color:var(--accent); }

.abcdt-nav__links {
    display:  flex;
    gap:      32px;
}
.abcdt-nav__links a {
    color:           rgba(255,255,255,.82);
    font-size:       0.88rem;
    font-weight:     500;
    text-transform:  uppercase;
    letter-spacing:  1px;
    position:        relative;
    padding-bottom:  4px;
    transition:      color .25s;
}
.abcdt-nav__links a::after {
    content:    '';
    position:   absolute;
    bottom:     0; left:0;
    width:      0; height:2px;
    background: var(--accent);
    transition: width .3s ease;
}
.abcdt-nav__links a:hover,
.abcdt-nav__links a.active {
    color: #fff;
}
.abcdt-nav__links a:hover::after,
.abcdt-nav__links a.active::after {
    width: 100%;
}

/* Mobile hamburger */
.abcdt-nav__toggle {
    display:  none;
    flex-direction:column;
    gap:      5px;
    background:none;
    border:   none;
    cursor:   pointer;
    padding:  6px;
}
.abcdt-nav__toggle span {
    display:         block;
    width:           24px;
    height:          2px;
    background:      #fff;
    border-radius:   2px;
    transition:      transform .3s, opacity .3s;
}


/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE HERO
   ═══════════════════════════════════════════════════════════════ */
.abcdt-hero {
    position:   relative;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-lg) 60%, #1e5c3a 100%);
    padding:    120px 24px 100px;
    overflow:   hidden;
}
/* Decorative circles */
.abcdt-hero__deco {
    position:      absolute;
    border-radius:50%;
    opacity:       .06;
    background:    #fff;
    pointer-events:none;
}
.abcdt-hero__deco--1 { width:500px; height:500px; top:-180px; right:-120px; }
.abcdt-hero__deco--2 { width:260px; height:260px; bottom:-80px; left:-60px; background:var(--accent); opacity:.08; }
.abcdt-hero__deco--3 { width:140px; height:140px; top:60px; left:15%; }

.abcdt-hero__content {
    position: relative;
    z-index:  1;
    max-width:740px;
    margin:   0 auto;
    text-align:center;
}
.abcdt-hero__badge {
    display:        inline-block;
    background:     rgba(232,168,56,.15);
    color:          var(--accent);
    font-size:      0.75rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding:        6px 16px;
    border-radius:  20px;
    margin-bottom:  24px;
    border:         1px solid rgba(232,168,56,.25);
}
.abcdt-hero__title {
    font-size:   3.2rem;
    color:       #fff;
    line-height: 1.2;
    margin-bottom:20px;
}
.abcdt-hero__title em {
    font-style: italic;
    color:      var(--accent);
}
.abcdt-hero__sub {
    font-size:   1.05rem;
    color:       rgba(255,255,255,.7);
    max-width:   560px;
    margin:      0 auto 36px;
    line-height: 1.7;
}
.abcdt-hero__ctas {
    display:  flex;
    gap:      16px;
    justify-content:center;
    flex-wrap:wrap;
}
.abcdt-hero__cta {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    padding:       14px 32px;
    border-radius: 8px;
    font-size:     0.92rem;
    font-weight:   600;
    transition:    all .25s;
}
.abcdt-hero__cta--primary {
    background: var(--accent);
    color:      var(--primary);
}
.abcdt-hero__cta--primary:hover {
    background: var(--accent-dk);
    box-shadow: 0 4px 20px rgba(232,168,56,.4);
}
.abcdt-hero__cta--ghost {
    border: 2px solid rgba(255,255,255,.4);
    color:  #fff;
}
.abcdt-hero__cta--ghost:hover {
    background: rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.7);
}

/* Stats row */
.abcdt-hero__stats {
    display:         flex;
    justify-content: center;
    gap:             48px;
    margin-top:      56px;
    flex-wrap:       wrap;
}
.abcdt-hero__stat {
    text-align: center;
}
.abcdt-hero__stat-num {
    font-family: 'Playfair Display', serif;
    font-size:   2rem;
    font-weight: 700;
    color:       var(--accent);
    display:     block;
}
.abcdt-hero__stat-label {
    font-size:  0.78rem;
    color:      rgba(255,255,255,.55);
    text-transform:uppercase;
    letter-spacing:1px;
    display:    block;
    margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION : WHY US / TRUST PILLARS
   ═══════════════════════════════════════════════════════════════ */
.abcdt-trust {
    background: #fff;
    padding:    72px 24px;
}
.abcdt-trust__inner {
    max-width:  1100px;
    margin:     0 auto;
    display:    grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap:        32px;
}
.abcdt-trust__card {
    text-align: center;
    padding:    32px 20px;
}
.abcdt-trust__icon {
    width:           64px;
    height:          64px;
    border-radius:   50%;
    background:      linear-gradient(135deg, #e8f5e9, #c8e6c9);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 18px;
    font-size:       1.5rem;
    color:           var(--primary-lg);
}
.abcdt-trust__card h3 {
    font-size:   1.05rem;
    color:       var(--primary);
    margin-bottom:8px;
}
.abcdt-trust__card p {
    font-size:  0.85rem;
    color:      var(--text-muted);
    line-height:1.6;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION : PRODUCTS (categories grid wrapper)
   ═══════════════════════════════════════════════════════════════ */
.abcdt-products-section {
    padding: 80px 24px;
    background:var(--bg);
}
.abcdt-products-section__inner {
    max-width: 1100px;
    margin:    0 auto;
}
.abcdt-section-header {
    text-align: center;
    margin-bottom:48px;
}
.abcdt-section-header h2 {
    font-size:   2rem;
    color:       var(--primary);
    margin-bottom:10px;
}
.abcdt-section-header p {
    color:     var(--text-muted);
    font-size: 0.95rem;
    max-width: 520px;
    margin:    0 auto;
}

/* Grid that wraps the shortcode cards */
.abcdt-cat-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   28px;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION : CTA BANNER
   ═══════════════════════════════════════════════════════════════ */
.abcdt-cta-banner {
    background: linear-gradient(135deg, var(--primary), var(--primary-lg));
    padding:    72px 24px;
    text-align: center;
    position:   relative;
    overflow:   hidden;
}
.abcdt-cta-banner::before {
    content:    '';
    position:   absolute;
    top:-60px; right:-60px;
    width:      240px; height:240px;
    border-radius:50%;
    background: rgba(255,255,255,.04);
}
.abcdt-cta-banner h2 {
    font-size:   2.1rem;
    color:       #fff;
    margin-bottom:12px;
    position:    relative;
}
.abcdt-cta-banner p {
    color:       rgba(255,255,255,.65);
    font-size:   1rem;
    max-width:   500px;
    margin:      0 auto 28px;
    position:    relative;
}
.abcdt-cta-banner a {
    display:        inline-block;
    background:     var(--accent);
    color:          var(--primary);
    font-weight:    600;
    font-size:      0.92rem;
    padding:        14px 36px;
    border-radius:  8px;
    transition:     background .25s, box-shadow .25s;
    position:       relative;
}
.abcdt-cta-banner a:hover {
    background: var(--accent-dk);
    box-shadow: 0 4px 20px rgba(232,168,56,.4);
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.abcdt-footer {
    background: #141e18;
    color:      rgba(255,255,255,.6);
    padding:    56px 24px 28px;
}
.abcdt-footer__inner {
    max-width:  1100px;
    margin:     0 auto;
    display:    grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap:        40px;
}
.abcdt-footer__brand h3 {
    font-family: 'Playfair Display', serif;
    font-size:   1.4rem;
    color:       #fff;
    margin-bottom:10px;
}
.abcdt-footer__brand h3 span { color:var(--accent); }
.abcdt-footer__brand p {
    font-size:  0.82rem;
    line-height:1.7;
    max-width:  280px;
}

.abcdt-footer__col h4 {
    font-family:    'DM Sans', sans-serif;
    font-size:      0.78rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color:          #fff;
    margin-bottom:  16px;
}
.abcdt-footer__col ul li { margin-bottom:8px; }
.abcdt-footer__col ul a {
    font-size:  0.84rem;
    color:      rgba(255,255,255,.5);
    transition: color .2s;
}
.abcdt-footer__col ul a:hover { color:var(--accent); }

.abcdt-footer__contact p {
    font-size:  0.84rem;
    margin-bottom:6px;
    display:    flex;
    gap:        8px;
    align-items:flex-start;
}
.abcdt-footer__contact i { color:var(--accent); width:14px; flex-shrink:0; margin-top:2px; }

.abcdt-footer__bottom {
    max-width:       1100px;
    margin:          32px auto 0;
    padding-top:     24px;
    border-top:      1px solid rgba(255,255,255,.08);
    display:         flex;
    justify-content: space-between;
    font-size:       0.76rem;
    color:           rgba(255,255,255,.3);
}


/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE LAYOUT WRAPPER
   ═══════════════════════════════════════════════════════════════ */
.abcdt-page-contact {
    background:var(--bg);
    min-height: calc(100vh - 68px);
}
.abcdt-page-contact .entry-content {
    max-width: 0;   /* let the shortcode handle its own max-width */
}


/* ═══════════════════════════════════════════════════════════════
   WORDPRESS DEFAULTS CLEANUP
   ═══════════════════════════════════════════════════════════════ */
.entry-title { display:none; }   /* hide default WP page title – we use custom heroes */
.entry-content p { margin-bottom:1em; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .abcdt-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 680px) {
    .abcdt-nav__links  { display:none; }
    .abcdt-nav__toggle { display:flex; }

    .abcdt-nav__links.abcdt-nav__links--open {
        display:        flex;
        flex-direction: column;
        position:       absolute;
        top:            68px; left:0; right:0;
        background:     rgba(26,71,49,.97);
        backdrop-filter:blur(12px);
        padding:        24px;
        gap:            20px;
    }

    .abcdt-hero { padding:80px 20px 60px; }
    .abcdt-hero__title { font-size:2.1rem; }

    .abcdt-footer__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .abcdt-footer__bottom {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
}


/* ═══════════════════════════════════════════════════════════════
   STACKED LOGO STYLING (Logo on top, Company Name below)
   ═══════════════════════════════════════════════════════════════ */

/* Logo container - stacked layout */
.abcdt-nav__logo--stacked {
    display: flex !important;
    align-items: center;
}

.abcdt-nav__logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
}

/* Logo image */
.abcdt-nav__logo-img {
    height: 32px;
    width: auto;
    display: block;
    max-width: 150px;
    object-fit: contain;
}

/* Company name below logo */
.abcdt-nav__company-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Adjust for mobile */
@media (max-width: 640px) {
    .abcdt-nav__logo-img {
        height: 28px;
        max-width: 120px;
    }
    
    .abcdt-nav__company-name {
        font-size: 0.65rem;
    }
}