/*
 * custom-2.css — Accorg Consulting
 * Theme typography + design overrides
 * ─────────────────────────────────────────────────────────────
 */

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
* {
    --title-font:       "EB Garamond", serif;
    --title-font-color: #1a1a1a;
    --body-font:        "Inter", sans-serif;
    --body-font-size:   16px;
}

/* ── Base Typography ───────────────────────────────────────── */
body {
    font-family: var(--body-font);
    font-size:   var(--body-font-size);
    font-weight: 400;
    color:       #444;
}

h1, h2, h3, h4, h5 {
    font-family: var(--title-font);
    color:       var(--title-font-color);
}

/* ── Navigation ────────────────────────────────────────────── */
#mainmenu {
    font-family: var(--body-font);
    font-size:   14px;
}

/* ── Sections ──────────────────────────────────────────────── */
/*
 * IMPORTANT: Do NOT add a grey override for `section` —
 * it breaks jarallax, bg-color, and dark sections.
 * Let Justica style.css handle section backgrounds.
 */
section {
    background: unset;
}

/* ════════════════════════════════════════════════════════════
   BUTTONS  —  complete definition matching Justica template
   ════════════════════════════════════════════════════════════ */

/* ── Base: gold bg + white text ────────────────────────────── */
a.btn-custom,
.btn-custom {
    color:          #fff !important;
    font-family:    var(--body-font);
    font-weight:    600;
    letter-spacing: 0.5px;
    transition:     all 0.25s ease;
}
a.btn-custom:hover,
.btn-custom:hover {
    background: var(--primary-color-2) !important;
    color:      #fff !important;
    transform:  translateY(-1px);
    box-shadow: 0 6px 20px rgba(200, 169, 81, 0.35);
}

/* ── btn-black: DARK button (used on white/card backgrounds) ── */
a.btn-custom.btn-black,
button.btn-custom.btn-black {
    background: #1a1a1a !important;
    color:      #fff !important;
    border:     2px solid #1a1a1a !important;
}
a.btn-custom.btn-black:hover,
button.btn-custom.btn-black:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color:      #fff !important;
    transform:  translateY(-1px);
}

/* btn-black on bg-color (gold CTA section) → stays dark with white text */
.bg-color a.btn-custom.btn-black,
.bg-color button.btn-custom.btn-black {
    background:   #1a1a1a !important;
    border-color: #1a1a1a !important;
    color:        #fff !important;
}
.bg-color a.btn-custom.btn-black:hover {
    background:   #333 !important;
    border-color: #333 !important;
}

/* ── btn-border: outlined gold (on light/white backgrounds) ─── */
a.btn-custom.btn-border {
    background:   transparent !important;
    color:        var(--primary-color) !important;
    border:       2px solid var(--primary-color) !important;
    font-weight:  600;
    transition:   all 0.25s;
}
a.btn-custom.btn-border:hover {
    background:  var(--primary-color) !important;
    color:       #fff !important;
}

/* ── btn-border + light: outlined WHITE (on dark/jarallax bg) ─ */
a.btn-custom.btn-border.light {
    background:   transparent !important;
    color:        #fff !important;
    border:       2px solid rgba(255,255,255,0.8) !important;
}
a.btn-custom.btn-border.light:hover {
    background:   #fff !important;
    color:        var(--primary-color) !important;
    border-color: #fff !important;
}

/* ── .light alone: semi-transparent white (dark bg contexts) ── */
a.btn-custom.light:not(.btn-border) {
    background: rgba(255,255,255,0.12) !important;
    color:      #fff !important;
    border:     2px solid rgba(255,255,255,0.5);
}
a.btn-custom.light:not(.btn-border):hover {
    background: #fff !important;
    color:      var(--primary-color) !important;
}

/* ── btn-main (Read More in service poster cards) ──────────── */
span.btn-main,
a.btn-main {
    display:     inline-block;
    padding:     8px 22px;
    background:  var(--primary-color);
    color:       #fff;
    border-radius: 3px;
    font-size:   13px;
    font-weight: 600;
    font-family: var(--body-font);
    text-decoration: none;
    transition:  background 0.2s, transform 0.2s;
    cursor:      pointer;
}
span.btn-main:hover,
a.btn-main:hover {
    background: var(--primary-color-2);
    transform:  translateY(-1px);
}

/* ════════════════════════════════════════════════════════════
   NAVIGATION HOVER STATES
   ════════════════════════════════════════════════════════════ */
#mainmenu li a { transition: color 0.2s; }
#mainmenu li a:hover { color: var(--primary-color) !important; }
#mainmenu li li a:hover {
    color:      #fff !important;
    background: var(--primary-color) !important;
}

/* Mega menu column titles */
.mega-col-title {
    display:        block;
    font-size:      10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color:          var(--primary-color);
    font-weight:    700;
    font-family:    var(--body-font);
    padding:        10px 14px 4px;
    border-bottom:  1px solid rgba(200,169,81,.15);
    margin-bottom:  4px;
}
.mega-col-title small {
    display:        block;
    font-size:      9px;
    letter-spacing: 0.5px;
    color:          rgba(200,169,81,.6);
    font-weight:    400;
}

/* ════════════════════════════════════════════════════════════
   BLOG LIST
   ════════════════════════════════════════════════════════════ */
.bloglist .post-text { background: #ffffff; }
.bloglist .post-text h4 a:hover,
.post-text h4 a:hover { color: var(--primary-color) !important; }

/* ════════════════════════════════════════════════════════════
   TESTIMONIALS
   ════════════════════════════════════════════════════════════ */
.de_testi.opt-2 blockquote { background: #ffffff !important; }

/* ════════════════════════════════════════════════════════════
   SERVICE CARDS (de-card-poster)
   ════════════════════════════════════════════════════════════ */
.de-card-poster { overflow: hidden; border-radius: 4px; }
.de-card-poster .d-overlay { text-decoration: none; }
.de-card-poster .d-content h3 { font-size: 1.1rem; margin-bottom: 10px; }
.de-card-poster span.btn-main { pointer-events: none; }

/* ════════════════════════════════════════════════════════════
   FEATURE BOXES
   ════════════════════════════════════════════════════════════ */
.feature-box.f-boxed:hover {
    background: var(--primary-color) !important;
    transition: background 0.3s ease;
}

/* ════════════════════════════════════════════════════════════
   TEAM CARDS
   ════════════════════════════════════════════════════════════ */
.fp-wrap .fpw-overlay-btm,
.fp-wrap .fpwow-icons { background: var(--primary-color) !important; }

/* ════════════════════════════════════════════════════════════
   SOCIAL ICONS
   ════════════════════════════════════════════════════════════ */
.social-icons i:hover,
.social-icons-sm i:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
}

/* ════════════════════════════════════════════════════════════
   BG-COLOR SECTIONS (counters / CTA bar)
   ════════════════════════════════════════════════════════════ */
.bg-color,
section.bg-color { background: var(--primary-color) !important; }
.bg-color h1,.bg-color h2,.bg-color h3,.bg-color h4,.bg-color h5,
.bg-color p,.bg-color span { color: #fff; }

/* ════════════════════════════════════════════════════════════
   TOPBAR
   ════════════════════════════════════════════════════════════ */
#topbar { font-size: 13px; }
#topbar a:hover { color: var(--primary-color) !important; }

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
footer .widget a { transition: color 0.2s; }
footer .widget a:hover { color: var(--primary-color) !important; }

/* ════════════════════════════════════════════════════════════
   ACCORDION
   ════════════════════════════════════════════════════════════ */
.accordion-section-title.active { background: var(--primary-color) !important; }

/* ════════════════════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════════════════════ */
.pagination > .active > a,
.pagination > .active > span {
    background:   var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

/* ════════════════════════════════════════════════════════════
   SUBHEADER — let Justica style.css handle fully
   ════════════════════════════════════════════════════════════ */
/* Do NOT override #subheader here — jarallax handles the bg */

/* ════════════════════════════════════════════════════════════
   BACK TO TOP
   ════════════════════════════════════════════════════════════ */
#back-to-top { background: var(--primary-color) !important; }
#back-to-top:hover { background: var(--primary-color-2) !important; }

/* ════════════════════════════════════════════════════════════
   OWL CAROUSEL
   ════════════════════════════════════════════════════════════ */
.owl-dot.active { background: var(--primary-color) !important; }

/* ════════════════════════════════════════════════════════════
   PRELOADER SPINNER
   ════════════════════════════════════════════════════════════ */
.spinner > div { background: var(--primary-color) !important; }

/* ════════════════════════════════════════════════════════════
   SMALL BORDER / DIVIDER
   ════════════════════════════════════════════════════════════ */
.small-border { border-color: var(--primary-color) !important; }

/* ════════════════════════════════════════════════════════════
   MEGA MENU — Services Dropdown Multi-Column Layout
   ════════════════════════════════════════════════════════════ */
/* Force the nested ul with class mega-menu-wrap to show as flex columns */
#mainmenu > li > ul.mega-menu-wrap {
    display:        none;         /* hidden by default, shown on hover by JS */
    width:          620px !important;
    flex-direction: row;
    padding:        10px 0;
    left:           0 !important;
    border-top:     2px solid var(--primary-color);
}
#mainmenu > li:hover > ul.mega-menu-wrap,
#mainmenu > li.active > ul.mega-menu-wrap {
    display: flex !important;
}
.mega-menu-wrap > li.mega-col {
    flex:            1;
    padding:         0 6px;
    border-right:    1px solid rgba(255,255,255,.06);
    list-style:      none;
}
.mega-menu-wrap > li.mega-col:last-child { border-right: none; }
.mega-menu-wrap > li.mega-col > ul {
    padding:    0;
    margin:     0;
    list-style: none;
    min-width:  auto !important;
}
.mega-menu-wrap > li.mega-col > ul > li > a {
    display:     flex;
    align-items: center;
    gap:         7px;
    padding:     8px 14px !important;
    font-size:   13px;
    white-space: nowrap;
    color:       rgba(255,255,255,.78) !important;
}
.mega-menu-wrap > li.mega-col > ul > li > a:hover {
    background: var(--primary-color) !important;
    color:      #fff !important;
}
.mega-menu-wrap > li.mega-col > ul > li > a i {
    font-size: 1rem;
    color:     var(--primary-color);
    width:     18px;
    text-align: center;
}
.mega-menu-wrap > li.mega-col > ul > li > a:hover i { color: #fff; }
.mega-col-title.mt20 { margin-top: 14px; }

/* ════════════════════════════════════════════════════════════
   BLOG — Fix button overlap / stacking issue
   ════════════════════════════════════════════════════════════ */
/* Prevent .btn-custom from inheriting inline display in .post-text */
.bloglist .post-text .btn-custom,
.post-text .btn-custom {
    display:     inline-block;
    margin-top:  12px;
    font-size:   13px;
    padding:     8px 20px;
}
/* Ensure blog card content doesn't overlap */
.bloglist .post-content {
    display:        flex;
    flex-direction: column;
}
.bloglist .post-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bloglist .post-text .btn-custom {
    margin-top: auto;
    align-self: flex-start;
}

/* ════════════════════════════════════════════════════════════
   BLOG — Page number / read-more button visibility fix
   ════════════════════════════════════════════════════════════ */
.blog-btn-row {
    margin-top:  16px;
    padding-top: 12px;
    border-top:  1px solid #f0f0f0;
    display:     flex;
    align-items: center;
    justify-content:space-between;
    flex-wrap:   wrap;
    gap:         8px;
}