/* Artiha brand on top of the Yogana template + glue to the artiha-public plugin blocks.
   Loaded last (after style.css and the plugin's artiha-public.css). */

:root {
  /* Yogana tokens -> Artiha palette (sage primary, charcoal text, warm cream). */
  --theme-color1: #5E7C68;
  --theme-color1-dark: #4A6455;
  --theme-color2: #2A2725;
  --theme-color3: #6C6661;
  --theme-color4: #2F4538;
  --theme-color5: #FAF6F0;
  --theme-light-background: #FAF6F0;
  --headings-color: #2A2725;
  --text-color: #6C6661;
  --review-color: #DDA15E;

  /* Make the plugin's Kirtan / Talks / Events blocks use the template typography. */
  --font-heading: var(--title-font), Georgia, serif;
  --font-body: var(--text-font), -apple-system, BlinkMacSystemFont, sans-serif;
  --color-sage: #5E7C68;
  --color-cream-bg: #FFFFFF;
}

/* The plugin sets a cream page and its own fonts on body.artiha-site; the template owns the page. */
body.artiha-site, body.artiha-yogana {
  background-color: #fff;
  font-family: var(--text-font);
  color: var(--text-color);
}
body.artiha-yogana { overflow-x: hidden; }

/* ---- Header: account menu (rendered by the plugin) styled like the template buttons ---- */
.artiha-account-box { display: flex; align-items: center; white-space: nowrap; }
.artiha-account-box .artiha-account { display: flex; align-items: center; gap: 18px; }
.artiha-account-box .ap-acc-out { display: flex; align-items: center; gap: 18px; }
.artiha-account-box .ap-link { color: var(--headings-color); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.artiha-account-box .ap-link:hover { color: var(--theme-color1); }
.artiha-account-box .ap-btn,
.artiha-account-box .ap-acc-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--theme-color1); color: #fff; border: 1px solid var(--theme-color1); border-radius: 3px;
  padding: 12px 24px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.2;
  cursor: pointer; transition: background .25s, color .25s;
}
.artiha-account-box .ap-btn:hover,
.artiha-account-box .ap-acc-toggle:hover { background: var(--theme-color2); border-color: var(--theme-color2); color: #fff; }
.artiha-account-box .ap-acc-in { position: relative; }
/* Never let the header squeeze the account button: a shrunk flex box made the caret overflow into the right padding. */
.artiha-account-box,
.artiha-account-box .artiha-account,
.artiha-account-box .ap-acc-in,
.artiha-account-box .ap-acc-toggle { flex: 0 0 auto; }
.artiha-account-box .ap-acc-menu { z-index: 1100; }
.main-header .outer-box .btn-box.artiha-account-box { margin-left: 0; }
.main-header .main-box .outer-box { display: flex; align-items: center; gap: 18px; }

/* Mobile menu: account block under the links */
.mobile-menu .artiha-account-mobile { padding: 20px 25px; border-top: 1px solid rgba(255,255,255,.15); }
.mobile-menu .artiha-account-mobile .ap-link { color: #fff; }
.mobile-menu .artiha-account-mobile .ap-acc-menu { position: static; }
.mobile-nav-toggler { background: transparent; border: 0; padding: 0; cursor: pointer; }
.sticky-header .artiha-account-box { margin-left: 20px; }
.sticky-header .nav-outer { display: flex; align-items: center; }
@media (max-width: 1199.98px) {
  .main-header .main-box .artiha-account-box { display: none; }
}

/* Footer */
.footer-widget .logo img { height: 40px; width: auto; }
.footer-widget .user-links { list-style: none; padding: 0; margin: 0; }
.footer-widget .user-links li { margin-bottom: 10px; }
.footer-widget .user-links a { color: rgba(255,255,255,.85); }
.footer-widget .user-links a:hover { color: #fff; }

/* Logos are small PNGs: keep them crisp and proportionate. */
.main-header .logo img, .sticky-header .logo img { height: 56px; width: auto; max-width: none; }
.mobile-menu .nav-logo img { height: 40px; width: auto; max-width: none; }

/* ---- Inner pages ---- */
.artiha-page { position: relative; }
.artiha-page--plain .artiha-page-body { padding-top: 60px; padding-bottom: 80px; max-width: 1170px; }
.artiha-page--home { padding: 20px 0 40px; }
.page-title .title { color: #fff; }

/* The plugin's blocks sit on a white page: give them the template's rhythm. */
.artiha-public { padding-top: 10px; }

/* Bootstrap's reboot should not restyle the plugin's controls. */
.artiha-public button, .ap-modal button, .kp-bar button { font-family: inherit; }
.artiha-public a { text-decoration: none; }

/* ---- Home: crop the illustrations into the template's image frames ---- */
.banner-section-three .image-box .image img,
.about-section-eleven .image-column .image img,
.about-section-eleven .image-column-two .image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.banner-section-three .image-box .image img { object-position: 50% 50%; }
.about-section-eleven .image-column-two .image img { object-position: 78% 50%; }
.about-section-eleven .image-column .image img { object-position: 40% 50%; }

/* Portrait oval frame for the hero image (the template's demo photo was 428x651). */
.banner-section-three .image-column .image-box .image img {
  aspect-ratio: 428 / 651; width: 100%; height: auto; object-fit: cover;
}

/* About block: portrait frames like the template's demo photos. */
.about-section-eleven .image-column .image img { aspect-ratio: 4 / 5; }
.about-section-eleven .image-column-two .image img { aspect-ratio: 3 / 4; }

/* Page-title banner: Artiha illustration under the template's dark overlay. */
.page-title { background-size: cover; background-position: center; }

/* Buttons used where the template had divs: keep the template look. */
.mobile-menu .close-btn { background: transparent; border: 0; color: #fff; padding: 0; cursor: pointer; }
.mobile-nav-toggler .icon { color: var(--headings-color); }
.scroll-to-top { border: 0; }

/* Fewer than four counters: centre them. */
.funfact-section-four .fact-counter .row { justify-content: center; }

/* ---- Home events (index-3 "services" cards) ---- */
.artiha-home-events { padding: 100px 0 90px; }
.artiha-home-events .service-block13 .title a { color: inherit; }
.artiha-home-events .service-block13 .title a:hover { color: inherit; }
.artiha-home-events .service-block13 .service-content .text { min-height: 3.2em; }
.artiha-home-events__more { margin-top: 40px; }
/* Card frame: generous, equal inset around the photo; photo on top, then date, title, details, slots badge at the bottom-left. */
.artiha-home-events .service-block13 .content-box {
  display: flex; flex-direction: column; padding: 44px 40px 40px;
}
.artiha-home-events .service-block13 .service-content { flex: 1 1 auto; }
.artiha-home-events .artiha-event-media {
  display: block; position: relative; z-index: 2; margin: 0 0 26px; aspect-ratio: 16 / 10;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, var(--color-sage-tint, #EBF0ED), var(--color-gold-tint, #FBF1E0));
}
.artiha-home-events .artiha-event-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.service-block13 .inner-box:hover .artiha-event-media img { transform: scale(1.05); filter: none; -webkit-filter: none; }

/* Smaller title, sizes/colors from the Customizer (Typography & colors > Event cards); colors apply when not hovered
   (on hover the template turns the card to the accent color with white text). */
.artiha-home-events .service-block13 .service-content .title {
  font-size: var(--artiha-ev-title-size, 22px); line-height: 1.25; padding-bottom: 16px; margin-bottom: 14px;
}
.artiha-home-events .service-block13 .service-content .subtitle { font-size: var(--artiha-ev-date-size, 14px); font-weight: 600; }
.artiha-home-events .service-block13 .service-content .text { font-size: var(--artiha-ev-text-size, 15px); margin-bottom: 22px; min-height: 0; }
.artiha-home-events .service-block13 .inner-box:not(:hover) .service-content .title { color: var(--artiha-ev-title-color, var(--headings-color)); }
.artiha-home-events .service-block13 .inner-box:not(:hover) .service-content .subtitle { color: var(--artiha-ev-date-color, var(--theme-color1)); }
.artiha-home-events .service-block13 .inner-box:not(:hover) .service-content .text { color: var(--artiha-ev-text-color, var(--text-color)); }

/* Slots badge (bottom-left, where the round icon used to be). */
.artiha-event-slots {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.2;
  background: var(--artiha-ev-badge-bg, rgba(var(--theme-color1-rgb), .12));
  color: var(--artiha-ev-badge-color, var(--theme-color1-dark));
  transition: background-color .3s ease, color .3s ease;
}
.artiha-event-slots.is-full { background: #f6e3df; color: #a2402c; }
.service-block13 .inner-box:hover .artiha-event-slots { background: rgba(255, 255, 255, .18); color: #fff; }
.services-carousel13.owl-theme .owl-dots .owl-dot span { background: var(--theme-color1); opacity: .35; }
.services-carousel13.owl-theme .owl-dots .owl-dot.active span { opacity: 1; }
/* Equal-height event cards in the carousel. */
.artiha-home-events .owl-stage { display: flex; }
.artiha-home-events .owl-item { display: flex; }
.artiha-home-events .owl-item .service-block13,
.artiha-home-events .owl-item .service-block13 .inner-box,
.artiha-home-events .owl-item .service-block13 .content-box { height: 100%; width: 100%; }

/* ---- Header style four (Yogana index-3): minimal bar, hamburger on every screen size ---- */
/* Like Yogana index-3: the header is absolute and transparent over the hero (hero starts at the very top). */
.main-header.header-style-four { position: absolute; top: 0; left: 0; background-color: transparent; }
.header-style-four .header-lower { background-color: transparent; }
/* Every page except Home: the same header, cream bar in normal flow above the content or banner. */
body.artiha-header-solid .main-header.header-style-four { position: relative; background-color: #F4ECDF; }
.header-style-four .header-lower { border-radius: 0; }
.header-style-four .main-box .outer-box { display: flex; align-items: center; gap: 22px; }
.header-style-four .mobile-nav-toggler { position: relative; width: 28px; height: 28px; display: block; }
.header-style-four .mobile-nav-toggler .icon { display: block; width: 28px; height: 28px; }
.header-style-four .mobile-nav-toggler .icon:after { right: 3px; }
/* Slide-in menu extras: contact + social links (only rendered when filled in). */
.mobile-menu .contact-list-one { list-style: none; margin: 0; padding: 20px 25px; border-top: 1px solid rgba(255,255,255,.15); }
.mobile-menu .contact-list-one .title { display: block; color: rgba(255,255,255,.6); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.mobile-menu .contact-list-one .text, .mobile-menu .contact-list-one .text a { color: #fff; }
.mobile-menu .social-links { list-style: none; margin: 0; padding: 0 25px 25px; display: flex; gap: 14px; }
.mobile-menu .social-links a { color: #fff; font-size: 16px; }

/* Home hero (index-4 style) starts at the very top: the transparent header sits on its cream
   background, so the picture column begins below the bar and the text keeps its air. */
body.artiha-header-hero .banner-section-seven { padding-top: 109px; }
body.artiha-header-hero .banner-section-seven .content-box { padding-top: 70px; padding-bottom: 110px; }
body.artiha-header-hero .banner-section-seven .slide-item { min-height: 0; padding-top: 0; }
body.artiha-header-hero .banner-section-seven .image-box .image img { min-height: 420px; }
@media (max-width: 1199.98px) { body.artiha-header-hero .banner-section-seven { padding-top: 89px; } }
@media (max-width: 991.98px) { body.artiha-header-hero .banner-section-seven .content-box { padding: 40px 30px 50px; } }
.banner-section-seven .content-box .text { max-width: 560px; }
.banner-section-seven .content-box .title { text-transform: none; }

/* About (index-4): the template expects square pictures; crop any upload to a true circle. */
.about-section-nine .image-column .image-box .image-one img { aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: 55% 50%; }
.about-section-nine .image-column .image-box .image-two img { object-fit: cover; object-position: 78% 50%; }
.about-section-nine .image-column .inner-column .image-box .image-two { right: -160px; bottom: -20px; width: 280px; height: 280px; }
.about-section-nine .image-column .image-box .image-one { width: 86%; }
@media (max-width: 1199.98px) { .about-section-nine .image-column .image-box .image-one { width: 100%; } }

/* Elementor: Home widgets. The editor preview has no scroll-reveal pass, so show wow-animated parts at once. */
.elementor-editor-active .wow { visibility: visible !important; animation-name: none !important; }
.artiha-widget-hint { margin: 0; padding: 24px; text-align: center; color: #6b6b6b; background: #f4f1ea; border: 1px dashed #c9c2b3; border-radius: 8px; }
.elementor-widget[class*="elementor-widget-artiha_home_"] > .elementor-widget-container { padding: 0; margin: 0; }
/* A Home page made of the Artiha Home widgets: the sections run edge to edge, spaced by their own styles. */
.artiha-page--widgets { padding: 0; margin: 0; }

/* Footer: slim black bar — email left, copyright centre, "Follow us" + social icons right. */
.artiha-footer-bar { background: #000; color: #fff; padding: 22px 0; }
.artiha-footer-bar__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.artiha-footer-bar__email { font-size: 15px; font-weight: 300; justify-self: start; }
.artiha-footer-bar__email a { color: #fff; }
.artiha-footer-bar__copy { font-size: 13px; font-weight: 300; text-align: center; color: rgba(255,255,255,.85); }
.artiha-footer-bar__social { display: flex; align-items: center; justify-self: end; gap: 26px; }
.artiha-footer-bar__follow { font-size: 18px; font-weight: 500; margin-right: 6px; }
.artiha-footer-bar__social a { color: #fff; font-size: 24px; line-height: 1; transition: opacity .2s; }
.artiha-footer-bar__social a:hover, .artiha-footer-bar__email a:hover { opacity: .75; }
@media (max-width: 767.98px) {
    .artiha-footer-bar__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
    .artiha-footer-bar__email, .artiha-footer-bar__social { justify-self: center; }
}


/* Page-title banner: the header no longer overlays it, so it needs less room at the top. */
.page-title { padding-top: 80px; }
@media (max-width: 1199.98px) { .page-title { padding-top: 70px; } }

/* An Elementor page supplies its own header section: it starts right under the menu bar. */
.artiha-page--own-header { padding-top: 0; }

/* Home events: cards keep the standard width (one third on desktop, half on tablet, full on phones). When there are fewer
   events than cards in view, centre them (1 event from tablet up; 2 events when three are in view) instead of
   stretching one card across the section. The 30px padding offsets the carousel's own 30px gap after each card. */
@media (min-width: 768px) {
  .artiha-home-events .services-carousel13[data-count="1"] .owl-stage-outer { display: flex; justify-content: center; padding-left: 30px; }
  .artiha-home-events .services-carousel13[data-count="1"] .owl-stage { flex: 0 0 auto; }
}
@media (min-width: 1199px) {
  .artiha-home-events .services-carousel13[data-count="2"] .owl-stage-outer { display: flex; justify-content: center; padding-left: 30px; }
  .artiha-home-events .services-carousel13[data-count="2"] .owl-stage { flex: 0 0 auto; }
}