/*
Theme Name: eholistic
Author: eholistic
Description: Custom theme built for Elementor
Version: 1.0
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.0
*/

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --color-primary:    #0073aa;
    --color-secondary:  #005177;
    --color-text:       #333333;
    --color-muted:      #666666;
    --color-bg:         #ffffff;
    --color-bg-alt:     #f8f9fa;
    --color-border:     #e2e8f0;

    --font-base:        16px;
    --font-sm:          14px;
    --font-lg:          18px;

    --spacing-xs:       8px;
    --spacing-sm:       16px;
    --spacing-md:       24px;
    --spacing-lg:       40px;
    --spacing-xl:       60px;

    --radius:           8px;
    --shadow:           0 2px 12px rgba(0,0,0,0.08);
    --transition:       0.2s ease;

    /* Layout widths */
    --max-width:        1200px;
    --sidebar-width:    30%;
    --content-width:    68%;
    --gap:              2%;
}

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

html {
    font-size: var(--font-base);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'barlow', serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.7;
    overflow-x: hidden;
}

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

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--color-secondary); }

h1,h2,h3,h4,h5,h6  {
  margin: 0px!important;
}
.elementor img {
  margin: 0px!important;
}


/* ============================================
   SITE WRAPPER
   ============================================ */
.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ============================================
   HEADER
   ============================================ */
#site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow);
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.site-logo img { max-height: 50px; width: auto; }
.site-logo a    { display: flex; align-items: center; gap: var(--spacing-xs); }
.site-title     { font-size: 1.4rem; font-weight: 700; color: var(--color-text); }

/* Desktop Navigation */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}
.main-nav ul li a {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--color-text);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition), color var(--transition);
}
.main-nav ul li a:hover,
.main-nav ul li.current-menu-item a {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Hamburger Button (hidden on desktop) */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 6px;
    border-radius: var(--radius);
    transition: background var(--transition);
}
.hamburger:hover { background: var(--color-bg-alt); }
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Hamburger → X animation */
.hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav Drawer */
.mobile-nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    z-index: 999;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.mobile-nav.is-open {
    max-height: 500px;
}
.mobile-nav ul {
    list-style: none;
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mobile-nav ul li a {
    display: block;
    padding: 12px var(--spacing-sm);
    border-radius: var(--radius);
    font-weight: 500;
    color: var(--color-text);
    transition: background var(--transition);
}
.mobile-nav ul li a:hover,
.mobile-nav ul li.current-menu-item a {
    background: var(--color-bg-alt);
    color: var(--color-primary);
}

/* ============================================
   PAGE LAYOUT — INNER PAGES (2 Column)
   ============================================ */
.page-wrapper {
    display: flex;
    gap: var(--gap);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-sm);
    align-items: flex-start;
}

#main-content {
    flex: 0 0 var(--content-width);
    max-width: var(--content-width);
    min-width: 0; /* prevent flex overflow */
}

#right-sidebar {
    flex: 0 0 var(--sidebar-width);
    max-width: var(--sidebar-width);
    min-width: 0;
}

/* ============================================
   HOMEPAGE —  Full Width
   ============================================ */
.home-wrapper {
    width: 100%;
    max-width: 100%;
}
.post-block-wrapper.dark {
  border-color: #b3b3b3 !important;
  background-color: #eee !important;
}
.post.post-dark.post-separator-border .post-wrap {
  border-color: #b3b3b3 !important;
}
.post-block-wrapper.dark .image img {
  border-radius: 10px !important;
}
.post .post-wrap .content .read-more {
  margin-top: 0px !important;
}
.post.post-small .post-wrap .content .title {
  font-size: 18px !important;
}


.anwp-pg-wrap .anwp-pg-post-teaser--layout-c .anwp-pg-post-teaser__bottom-block {
  width: 100% !important;
}
.anwp-pg-wrap .py-4 {
  padding-bottom: 1rem !important;
  padding-top: 1rem !important;
}
.anwp-pg-wrap .mb-3, .anwp-pg-wrap .my-3 {
  margin-bottom: 0.5rem !important;
}
.anwp-grid_card_bg_effect-darken_only.six .anwp-pg-post-teaser__thumbnail {
  height: 263px !important;
}



.elementor-2 .elementor-element.elementor-element-298ea58 .anwp-pg-post-teaser__bottom-meta {
  margin-top: 0px !important;
}

/* ============================================
   SEARCH RESULT
   ============================================ */
.search-results.elementor-posts .elementor-post {
  border-bottom: 1px solid #ccc !important;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar-inner { display: flex; flex-direction: column; gap: var(--spacing-md); }

.widget-item {
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
}

.widget-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--color-primary);
}

/* ============================================
   CONTENT TYPOGRAPHY
   ============================================ */
.entry-content h1, .entry-content h2,
.entry-content h3, .entry-content h4 {
    line-height: 1.3;
    margin: var(--spacing-md) 0 var(--spacing-xs);
    color: var(--color-text);
}
.entry-content h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.entry-content h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.entry-content h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }

.entry-content p  { margin-bottom: var(--spacing-sm); }
.entry-content ul,
.entry-content ol { padding-left: var(--spacing-md); margin-bottom: var(--spacing-sm); }

.entry-content img {
    border-radius: var(--radius);
    margin: var(--spacing-sm) 0;
}

/* ============================================
   SOCIAL SHARE BUTTONS (already responsive)
   ============================================ */
.social-share-box {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    border-left: 4px solid var(--color-primary);
}

/* ============================================
   FOOTER
   ============================================ */
#site-footer {
    background: #1a1a2e;
    color: #ccc;
    padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
    margin-top: auto;
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.footer-col h4 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.footer-bottom {
    max-width: var(--max-width);
    margin: var(--spacing-md) auto 0;
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    font-size: var(--font-sm);
    color: #888;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* ── Tablet: 768px – 1024px ── */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 32%;
        --content-width: 66%;
        --gap:           2%;
    }

    .footer-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .header-inner { padding: 0 var(--spacing-md); }
    .main-nav ul  { gap: var(--spacing-sm); }
}

/* ── Mobile Landscape: 600px – 767px ── */
@media (max-width: 767px) {

    /* Show hamburger, hide desktop nav */
    .hamburger   { display: flex; }
    .main-nav    { display: none; }
    .mobile-nav  { display: block; }

    /* Stack 2-column → 1 column */
    .page-wrapper {
        flex-direction: column;
        padding: var(--spacing-md) var(--spacing-sm);
        gap: var(--spacing-md);
    }

    #main-content,
    #right-sidebar {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Sidebar goes BELOW content on mobile */
    #right-sidebar {
        order: 2;
        border-top: 1px solid var(--color-border);
        padding-top: var(--spacing-md);
    }

    /* Footer: 2 col → 1 col */
    .footer-inner {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .header-inner { height: 60px; }

    .entry-content h1 { font-size: 1.5rem; }
    .entry-content h2 { font-size: 1.25rem; }
}

/* ── Mobile Portrait: up to 480px ── */
@media (max-width: 480px) {
    :root {
        --spacing-lg: 24px;
        --spacing-md: 16px;
    }

    .page-wrapper { padding: var(--spacing-sm); }

    .site-title { font-size: 1.1rem; }

    /* Social share: stack vertically */
    .share-buttons {
        flex-direction: column;
    }
    .share-btn { justify-content: center; width: 100%; }

    /* Full-width images */
    .entry-content img { border-radius: 0; margin-left: -var(--spacing-sm); width: calc(100% + var(--spacing-md)); }

    .widget-item { padding: var(--spacing-sm); }
}

/* ── Touch device optimizations ── */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets */
    .main-nav ul li a,
    .mobile-nav ul li a { padding: 14px var(--spacing-sm); }

    .share-btn { padding: 12px 20px; }
    .hamburger { padding: 10px; }
}

/* ── Print styles ── */
@media print {
    #site-header, #site-footer,
    .mobile-nav, .hamburger,
    .social-share-box { display: none !important; }

    .page-wrapper { flex-direction: column; }
    #main-content  { max-width: 100%; }
    #right-sidebar { display: none; }

    body { font-size: 12pt; color: #000; }
    a    { color: #000; text-decoration: underline; }
}

/* ============================================
   HEADER & FOOTER — FULL WIDTH / CONTAINED
   ============================================ */

/*
 * CONTAINED (default): inner content respects --max-width
 * FULL WIDTH: inner content stretches edge-to-edge with padding only
 *
 * Toggled via Appearance → Customize → Header & Footer Layout
 */

/* --- HEADER --- */

/* Default contained mode */
#site-header.header--contained .header-inner {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Full width mode */
#site-header.header--full-width {
    /* No max-width on the element itself — already 100% by default */
}
#site-header.header--full-width .header-inner {
    max-width: 100%;
    padding-left: clamp(20px, 4vw, 60px);
    padding-right: clamp(20px, 4vw, 60px);
}

/* Mobile nav follows header width */
#site-header.header--full-width .mobile-nav ul {
    padding-left: clamp(20px, 4vw, 60px);
    padding-right: clamp(20px, 4vw, 60px);
}


/* --- FOOTER --- */

/* Default contained mode */
#site-footer.footer--contained .footer-inner,
#site-footer.footer--contained .footer-bottom {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Full width mode */
#site-footer.footer--full-width .footer-inner,
#site-footer.footer--full-width .footer-bottom {
    max-width: 100%;
    padding-left: clamp(20px, 4vw, 60px);
    padding-right: clamp(20px, 4vw, 60px);
}


/* ============================================
   OPTIONAL ANNOUNCEMENT BAR (header top)
   ============================================ */
.header-announcement {
    background: var(--color-primary);
    color: #fff;
    font-size: var(--font-sm);
    padding: 8px var(--spacing-sm);
    text-align: center;
}
.header-announcement__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    position: relative;
}
.header--full-width .header-announcement__inner {
    max-width: 100%;
    padding: 0 clamp(20px, 4vw, 60px);
}
.header-announcement a { color: #fff; text-decoration: underline; }
.header-announcement__close {
    position: absolute;
    right: 0;
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background var(--transition);
}
.header-announcement__close:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Responsive: tighten padding on mobile for both modes */
@media (max-width: 767px) {
    #site-header.header--full-width .header-inner,
    #site-footer.footer--full-width .footer-inner,
    #site-footer.footer--full-width .footer-bottom {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    .header-announcement__close { position: static; margin-left: auto; }
}

/* ============================================
   IMPORT COMPONENT STYLESHEETS
   ============================================ */
@import url('assets/css/blog-archive.css');
@import url('assets/css/search-404.css');

/* ── Header Extras slot (dark mode toggle etc.) ── */
.header-extras {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}
@media (max-width: 767px) {
    .header-extras { order: 2; }  /* between nav and hamburger on mobile */
}

/* ============================================
   IMPORT UI FEATURES
   ============================================ */
@import url('assets/css/ui-features.css');

/* ============================================
   PAGE FULL WIDTH LAYOUT
   ============================================ */
.page-wrapper--full {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-sm);
    width: 100%;
}
.page-wrapper--full #main-content {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* Elementor full-width inside page-wrapper--full */
.page-wrapper--full .elementor-section-full_width {
    width: 100%;
}

/* ============================================
   SLIDER
   ============================================ */
.depicter-section.depicter-ready .depicter-section-background > picture img {
  opacity: 1;
  margin: 0px;
}



/* ============================================
   HOME TESTIMONIAL
   ============================================ */
.ekit-wid-con .ekit-testimonia-style-4 .elementskit-single-testimonial-slider {
  background-color: #fff0;
  box-shadow: none;
  padding-bottom: 170px!important;
}
.ekit-wid-con .ekit-testimonia-style-4 .elementskit-single-testimonial-slider .elementskit-commentor-content {
  font-size: 32px;
   padding-bottom:120px;
}
.ekit-wid-con .ekit-testimonia-style-4 .elementskit-single-testimonial-slider .elementskit-commentor-content h3 {
  font-size: 60px;
  padding-bottom:30px;
  font-weight:400;
}
.ekit-wid-con .ekit-testimonia-style-4 .elementskit-single-testimonial-slider .elementskit-commentor-bio {
  top: 400px;
}


.elementor-140 .ekit_social_media > li > a.e-font-icon-svg {
  padding-top: 7px!important;
}

/* ============================================
   CLIENT LOGO
   ============================================ */
.clientslogo {
	position:relative;
}
.clientslogo .elementor-heading-title {
	top: -34px!important;
	margin;0px!important;
	background-color:#fff!important;
	position:relative!important;
	height: 0px!important;
	display: inline!important;
}
.ekit-wid-con .elementskit-clients-slider .single-client {
box-shadow:  0px 0px 0px 0!important;
}
.elementskit-clients-slider .swiper-wrapper {
  padding: 0px!important;
}


/* ============================================
   SCROOL BUTTON
   ============================================ */
.elementor-element .swiper .elementor-swiper-button svg  {
  fill: hsla(0, 2.8%, 34.7%, 1)!important;
  height: 1.5em!important;
  width: 1.5em!important;
}
.elementor-element .swiper .elementor-swiper-button-next {
  right: -30px!important;
}
.elementor-element .swiper .elementor-swiper-button-prev {
  left: -30px!important;
}


.tab-pane .elementor, .tab-pane .elementor h2 {
	padding:0px!important;
	margin:0px!important;
}

.pagenametitle h1.elementor-heading-title {
  position: inherit!important;
  top: 200px!important;
}


/* ============================================
   SOCIAL SHARING
   ============================================ */

.social-share-box {
    display: none!important;
}


/* ============================================
   PAGE TITLE
   ============================================ */
.e-con-inner .elementor-widget-theme-page-title {
  position: relative !important;
  top: 10px !important;
}

/* ============================================
   HOME CARD
   ============================================ */
.ekit-wid-con .elementskit-post-image-card .elementskit-entry-header .elementskit-entry-thumb > img {
  margin: 0px 0px 0px 0px !important;
  transition: all .0s ease !important;
  border-radius: 20px !important;
}
.ekit-wid-con .elementskit-post-image-card:hover .elementskit-entry-thumb > img {
  -webkit-transform: scale(1) rotate(0deg) !important;
  transform: scale(1) rotate(0deg) !important;
  opacity: 1 !important;
}
.elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail.elementor-fit-height img {
  margin: 0px !important;
}


/* ============================================
   SINGLE POST
   ============================================ */

body.wp-singular p.wp-block-paragraph{
  padding: 15px 0px!important;
}
.elementor-posts .elementor-post {
  border-bottom: 1px solid #222 !important;
  padding-bottom: 15px !important;
}

.archive.category .elementor-posts .elementor-post, .home .elementor-posts .elementor-post {
  border-bottom: 0px !important;
}
.anwp-pg-wrap .anwp-pg-classic-grid .anwp-pg-post-teaser__content {
  padding-bottom: 0px !important;
}


/* ============================================
   POPUP
   ============================================ */
body .elementskit-team-popup .modal-body {
  padding: 30px !important;
}
.ekit-team-modal-info h2.ekit-team-modal-title, .ekit-team-modal-info p {
  margin: 0px !important;
}
.ekit-team-modal-info p.ekit-team-modal-position {
  position: relative !important;
  top: -11px !important;
}
.ekit-team-modal-content {
  margin-top: 20px !important;
}




@media (max-width: 480px) {
.ekit-wid-con .ekit-testimonia-style-4 .elementskit-single-testimonial-slider {
  background-color: #fff0;
  box-shadow: none;
  padding-bottom: 70px!important;
}
.ekit-wid-con .ekit-testimonia-style-4 .elementskit-single-testimonial-slider .elementskit-commentor-content {
  font-size: 22px;
   padding-bottom:30px;
   line-height: 28px!important;
}
.ekit-wid-con .ekit-testimonia-style-4 .elementskit-single-testimonial-slider .elementskit-commentor-content h3 {
  font-size: 30px!important;
  padding-bottom:10px!important;
  font-weight:600!important;
  line-height: 38px!important;
}
.ekit-wid-con .ekit-testimonia-style-4 .elementskit-single-testimonial-slider .elementskit-commentor-content p {
  font-size: 0px!important;
}
.ekit-wid-con .ekit-testimonia-style-4 .elementskit-single-testimonial-slider .elementskit-commentor-bio {
  top: 270px;
}
.clientslogo .elementor-heading-title {
  top: -21px !important;
}
.swiper-slide-inner img {
margin: 0px!important;
}

.pagenametitle h1.elementor-heading-title {
  top: 212px!important;
}
.ekit_menu_responsive_tablet .elementskit-navbar-nav-default .elementskit-navbar-nav {
    margin-left: 20px!important;
  }
  
  
.elementskit-menu-offcanvas-elements {
    margin-left: -20px!important;
  }
}

@media (max-width: 767px) {
    .page-wrapper--full {
        padding: var(--spacing-md) var(--spacing-sm);
    }
}