/*Resets*/

.e-div-block-base,
.e-flexbox-base {
  padding: 0;
}

/*Utilities*/

.overflow-visible{
    overflow: visible !important;
}

.flex-grow{
    flex-grow: 1!important;
}

/*Widget mods*/
.e-loop-item, .swiper-wrapper, .elementor-loop-container{
        overflow: visible !important;
}

.elementor-widget-loop-carousel .swiper-wrapper .swiper-slide a.e-con{
            display: flex!important;
}

/*Custom element*/

.arrow-button a{
    width: 48px;
    height: 48px;
    display: flex;
    align-content: center;
    justify-content: center;
    border-radius: 48px;
    padding:12px;
}

.highlight-yellow {
  position: relative;
  display: inline-block;   /* makes width/height behave predictably */
  isolation: isolate;      /* keeps the highlight behind the text but inside the span */
}

.highlight-yellow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;           /* sits under the text like a marker; use top: 0 for the top edge */
  width: 100%;              /* now 50% of the span, not the parent */
  height: 50%;
  background-color: var(--semantic-background-accent-yellow);
  z-index: -1;             /* behind the text */
}

.bigmark{
  position: relative;
  display: inline-block;   /* makes width/height behave predictably */
  isolation: isolate;      /* keeps the highlight behind the text but inside the span */
}

.bigmark::after {
  content: '';
  position: absolute;
  left: -8%;
  bottom: -22%;           /* sits under the text like a marker; use top: 0 for the top edge */
  width: 116%;              /* now 50% of the span, not the parent */
  height: 50%;
  z-index: -1;             /* behind the text */
    background: url(/wp-content/uploads/2026/09/bigmark.svg);
    background-size: 100%;
    background-repeat: no-repeat;
}

 /* Accent colors per bullet — replace the hex values with the Figma ones */
#ajanlatok-carousel .title-bullet:nth-child(3n+1) { --tb-accent: 
#9b1c1c; } /* red-dark */
#ajanlatok-carousel .title-bullet:nth-child(3n+2) { --tb-accent: 
#f2b705; } /* yellow */
#ajanlatok-carousel .title-bullet:nth-child(3n+3) { --tb-accent: 
#0f8b8d; } /* teal */

/* Pagination row */
#ajanlatok-carousel{
    display: flex;
    align-content: flex-start;
}

#ajanlatok-carousel .swiper-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

/* Inactive: dot in the accent color, title neutral */
#ajanlatok-carousel .swiper-pagination .title-bullet {
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  border-radius: 0;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.3;
  color: 
#6b6b6b;               /* inactive title color */
  transition: color .2s;
}

#ajanlatok-carousel .title-bullet .tb-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tb-accent); /* always colored */
  flex-shrink: 0;
}

/* Active: title takes the dot's color */
#ajanlatok-carousel .title-bullet.swiper-pagination-bullet-active {
  color: var(--tb-accent);
  font-weight: 600;
}

#ajanlatok-carousel .elementor-swiper-button{
    display:none;
}

.swiper-pagination-bullet{
    border-radius: 999px!important;
    border: 1px solid rgba(36, 29, 21, 0.10)!important;
    background: #FFF!important;
    display: flex;
    padding: var(--spacing-9, 9px) var(--spacing-16, 16px) var(--spacing-9, 9px) var(--spacing-12, 12px)!important;
    align-items: center!important;
    gap: var(--spacing-9, 9px)!important;
        color: var(--semantic-text-accent-red-dark, 
#B3241A);
    text-align: center;
    font-family: Gabarito;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#ajanlatok-carousel{
    overflow: visible!important;
    position: relative!important;
}

#ajanlatok-carousel .swiper-pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 36px;
    width:100%;
    padding:0 16px;
    z-index:0;
}

@media screen and (max-width: 768px){
    #ajanlatok-carousel .swiper-pagination {
  margin-top: 0px;
}
}

#ajanlatok-carousel .tb-holder {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
}

/*Interactions*/

/* --- Motion tokens ------------------------------------------------------- */
:root{
  --ease-out-soft: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 200ms;
  --dur-base: 240ms;
  --dur-slow: 380ms;
}

/* --- Carousel arrow buttons (custom coded, see "Carousel arrow control") -- */
.arrow-button a{
  transition: background-color var(--dur-fast) ease-out,
              border-color var(--dur-fast) ease-out,
              transform var(--dur-base) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out-soft),
              opacity var(--dur-fast) ease-out;
}
.arrow-button a .elementor-button-icon,
.arrow-button a .elementor-button-icon img,
.arrow-button a .elementor-button-icon svg{
  transition: transform var(--dur-base) var(--ease-out-soft);
}

/* filled teal carousel arrows */
#ajanlatok-prev:hover, #ajanlatok-next:hover,
#blog-prev:hover, #blog-next:hover{
  background-color: var(--semantic-background-accent-teal-hover);
  transform: scale(1.06);
  box-shadow: 0 8px 18px rgba(3,87,114,.28);
}
#ajanlatok-prev:active, #ajanlatok-next:active,
#blog-prev:active, #blog-next:active{
  transform: scale(.96);
  box-shadow: none;
}
/* directional nudge on the arrow glyph */
#ajanlatok-prev:hover .elementor-button-icon,
#blog-prev:hover .elementor-button-icon{ transform: translateX(-2px); }
#ajanlatok-next:hover .elementor-button-icon,
#blog-next:hover .elementor-button-icon{ transform: translateX(2px); }

/* start / end of the carousel */
.arrow-button a.is-disabled,
.arrow-button.is-disabled a{
  opacity: .35;
  pointer-events: none;
}

/* outlined arrow buttons on the dark footer (social links) */
.site-footer .arrow-button a:hover{
  background-color: rgba(255,255,255,.08);
  border-color: var(--semantic-background-accent-yellow);
  transform: translateY(-2px);
}
.site-footer .arrow-button a:active{ transform: translateY(0); }

.arrow-button a:focus-visible{
  outline: 2px solid var(--semantic-text-accent-teal);
  outline-offset: 3px;
}

/* --- Carousel title bullets (custom coded pagination) --------------------- */
#ajanlatok-carousel .swiper-pagination .title-bullet{
  transition: color var(--dur-fast) ease-out,
              border-color var(--dur-fast) ease-out,
              transform var(--dur-base) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out-soft);
}
#ajanlatok-carousel .title-bullet .tb-dot{
  transition: transform var(--dur-base) var(--ease-out-soft);
}
#ajanlatok-carousel .swiper-pagination .title-bullet:hover{
  color: var(--tb-accent);
  border-color: rgba(36,29,21,.25)!important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(90,60,20,.12);
}
#ajanlatok-carousel .swiper-pagination .title-bullet:hover .tb-dot{
  transform: scale(1.3);
}
#ajanlatok-carousel .swiper-pagination .title-bullet:active{
  transform: translateY(0);
  box-shadow: none;
}
#ajanlatok-carousel .swiper-pagination .title-bullet.swiper-pagination-bullet-active .tb-dot{
  transform: scale(1.15);
}
.swiper-pagination-bullet:focus-visible{
  outline: 2px solid var(--semantic-text-accent-teal);
  outline-offset: 3px;
}

/* --- Respect reduced-motion preferences ---------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration: .01ms!important;
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    scroll-behavior: auto!important;
  }
}

/* --- Sticky header ------------------------------------------------------- */
.elementor-location-header{
  position: sticky;
  top: 0;
  z-index: 100;
}
html{ scroll-padding-top: 96px; }

/* keep clear of the WP admin bar */
body.admin-bar .elementor-location-header{ top: 32px; }
@media screen and (max-width: 782px){
  body.admin-bar .elementor-location-header{ top: 46px; }
}
@media screen and (max-width: 600px){
  body.admin-bar .elementor-location-header{ top: 0; }
}

.elementor-location-header .site-header{
  transition: padding-block-start 280ms var(--ease-out-soft),
              padding-block-end 280ms var(--ease-out-soft),
              box-shadow 280ms var(--ease-out-soft);
}
.elementor-location-header.is-stuck .site-header{
  box-shadow: 0 6px 24px rgba(90,60,20,.10);
}

/* compact the bar and fold the brand tagline away, all breakpoints */
.elementor-location-header .s-brand-tagline-text{
  max-height: 2em;
  transition: opacity 220ms ease-out,
              max-height 280ms var(--ease-out-soft),
              transform 280ms var(--ease-out-soft);
}
.elementor-location-header.is-stuck .s-brand-tagline-text{
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(-4px);
}
.elementor-location-header.is-stuck .site-header{
  padding-block-start: 11px;
  padding-block-end: 12px;
}

/* tablet + mobile: the mobile bar already sits at 16px, so it gives back less.
   Specificity beats Elementor's own .elementor .s-site-header mobile padding. */
@media screen and (max-width: 1100px){
  .elementor-location-header.is-stuck .site-header{
    padding-block-start: 12px;
    padding-block-end: 12px;
  }
}


/* --- Sticky header: fixed-height wrapper (anti-bounce, 2026-10-07) ----- */
.elementor-location-header{ pointer-events: none; overflow-anchor: none; }
.elementor-location-header > *{ pointer-events: auto; }
.elementor-location-header.hdr-measuring *{ transition: none !important; }

/* --- Price + "€/fő" must never split across lines ------------------- */
.price-nowrap{
  white-space: nowrap;
}

/* --- Yellow buttons: hover = lift + shadow only, no colour change (client 2026-10-07).
   btn-yellow is stacked on btn-primary, whose red hover used to win. */
.btn-yellow:hover, .btn-yellow:focus-visible, .btn-yellow:active,
.elementor .btn-yellow:hover, .elementor .btn-yellow:active{
  background-color: var(--semantic-background-accent-yellow, #FFD23F) !important;
  color: var(--semantic-text-primary, #3d2e1f) !important;
}
.btn-yellow:hover *, .btn-yellow:active *{ color: inherit !important; }

/* --- Image fixes (client 2026-10-07) ------------------------------------ */
/* 1) Hero polaroid: portrait photos (Rolam, Kapcsolat, Toledo utikalauz) made the hero
      too tall. Cap the photo height; crop focus via --hero-focus (default centre-top). */
[data-id="hero-photo-img"]{
  max-height: 340px;
  object-fit: cover;
  object-position: var(--hero-focus, 50% 25%);
}
@media (max-width: 767px){ [data-id="hero-photo-img"]{ max-height: 300px; } }
/* Kapcsolat: Heni stands in the lower half of the photo, keep her (and the licence) in frame */
body.page-id-14 [data-id="hero-photo-img"]{ --hero-focus: 50% 80%; }
/* product shot (tablet) must not be cropped */
body.page-id-1772 [data-id="hero-photo-img"]{ object-fit: contain; }

/* 2) Toledo utikalauz "Belelapoznal" preview: show the whole page, no cropping */
[data-id="galeria-grid-elonezet"] .gallery-photo{
  aspect-ratio: 7 / 10 !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent;
}

/* 3) Long text next to a photo: photo sits at the top, not vertically centred */
@media (min-width: 1025px){
  .e-con:has(> [data-id*="photo-col"]){ align-items: flex-start !important; }
  [data-id*="photo-col"]{ padding-top: 8px; }
}

/* --- Menu parent labels: not a link, only opens the submenu (client 2026-10-09) --- */
@media (min-width: 1025px){
  .elementor-nav-menu--main .menu-parent-label{ cursor: default; }
}