/*
Theme Name: Okos Online
Theme URI: https://okosonline.hu/
Author: Hegedusne Okos Edina
Author URI: https://okosonline.hu/
Description: Okos Online - okos megoldasok wellbeing vallalkozoknak. Egyedi WordPress block tema WooCommerce tamogatassal, a Okos Online arculatara epitve (STIX Two Text + Inter, turkiz-arany paletta).
Version: 1.0
Text Domain: okosonline
*/

/* ===== H2 ACCENT VONAL ===== */

/* Más elemre is alkalmazható (pl. H3, Group blokk) */
.vonas::after {
    content: '';
    display: block;
    width: 48px;
    height: 4px;
    background: var(--wp--preset--color--accent, #E6A357);
    border-radius: 2px;
    margin-top: 0.85rem;
}

.vonas.has-text-align-center::after { margin-left: auto; margin-right: auto; }
.vonas.has-text-align-right::after  { margin-left: auto; margin-right: 0; }

/* Szélesség variánsok – kombinálható: vonas rovid / vonas hosszu */
.rovid::after  { width: 30px !important; }
.hosszu::after { width: 80px !important; }

/* ===== WORDPRESS 7.0 – VIEW TRANSITIONS ===== */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: vt-fade-out 0.25s ease both;
}

::view-transition-new(root) {
    animation: vt-fade-in 0.25s ease both;
}

@keyframes vt-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
}

@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== WORDPRESS 7.0 – BREADCRUMBS BLOKK ===== */
.wp-block-breadcrumbs {
    font-size: 0.82rem;
    color: var(--wp--preset--color--text-muted, #5C6E70);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    margin-bottom: 1rem;
}

.wp-block-breadcrumbs a {
    color: var(--wp--preset--color--accent, #E6A357);
    text-decoration: none;
    transition: color 0.2s ease;
}

.wp-block-breadcrumbs a:hover {
    color: var(--wp--preset--color--secondary, #123E47);
}

/* ===== WORDPRESS 7.0 – ICON BLOKK ===== */
.wp-block-icon svg {
    color: var(--wp--preset--color--accent, #E6A357) !important;
    fill: currentColor !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

.wp-block-icon:hover svg {
    transform: scale(1.08);
}

/* ===== WORDPRESS 7.0 – NATÍV TABS BLOKK ===== */
.wp-block-tabs__tab-list {
    display: flex;
    border-bottom: 2px solid var(--wp--preset--color--neutral, #74D2CA);
    margin-bottom: 1.5rem;
}

.wp-block-tabs__tab-button {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.65rem 1.25rem;
    cursor: pointer;
    color: var(--wp--preset--color--secondary, #123E47);
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s ease, border-color 0.2s ease;
    border-radius: 4px 4px 0 0;
}

.wp-block-tabs__tab-button:hover {
    color: var(--wp--preset--color--accent, #E6A357);
}

.wp-block-tabs__tab-button[aria-selected="true"] {
    color: var(--wp--preset--color--accent, #E6A357);
    border-bottom-color: var(--wp--preset--color--accent, #E6A357);
    background: rgba(230, 163, 87, 0.06);
}

/* ===== WORDPRESS 7.0 – DETAILS / ACCORDION BLOKK ===== */
.wp-block-details {
    border: 1px solid var(--wp--preset--color--neutral, #74D2CA);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s ease;
}

.wp-block-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--wp--preset--color--secondary, #123E47);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.wp-block-details summary::-webkit-details-marker { display: none; }

.wp-block-details summary::after {
    content: '+';
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--wp--preset--color--accent, #E6A357);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.wp-block-details[open] summary::after {
    transform: rotate(45deg);
}

.wp-block-details[open] {
    border-color: var(--wp--preset--color--accent, #E6A357);
}

/* ===== WORDPRESS 7.0 – NAVIGATION OVERLAY ===== */
.wp-block-navigation-overlay-close {
    background: var(--wp--preset--color--secondary, #123E47);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.wp-block-navigation-overlay-close:hover {
    background: var(--wp--preset--color--tertiary, #18A89E);
}

/* ===== GLOBÁLIS STÍLUSOK ===== */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
}

header.wp-block-template-part + * {
    margin-block-start: 0 !important;
}

.tilt-left  { transform: rotate(-4deg); }
.tilt-right { transform: rotate( 4deg); }

/* ===== MEDIA QUERIES ===== */
@media screen and (max-width: 1199px) {
    body {
        font-size: 18px;
    }
}

/* ===== ZINDEX ÉS POZICIONÁLÁS ===== */
.tablet {
    z-index: 1000;
    position: relative;
}


/* ===== FLEXBOX ELRENDEZÉSEK ===== */
.grafiwell-kampany-oszlop,
.pricing .wp-block-columns {
    display: flex !important;
    justify-content: center !important;
}

.grafiwell-kampany-oszlop {
    flex-wrap: wrap;
}

/* ===== BLOG LAPOZÁS ===== */
.wp-block-query-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    gap: 8px;
    margin: 48px 0 24px;
    flex-wrap: wrap;
}

.wp-block-query-pagination-numbers {
    display: flex;
    gap: 6px;
    align-items: center;
}

.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    color: var(--wp--preset--color--text-secondary);
}

.wp-block-query-pagination-numbers span.current {
    background-color: var(--wp--preset--color--accent) !important;
    color: #fff !important;
    border-color: var(--wp--preset--color--accent) !important;
}

.wp-block-query-pagination-numbers a:hover {
    background-color: var(--wp--preset--color--secondary) !important;
    color: #fff !important;
    border-color: var(--wp--preset--color--secondary) !important;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    display: inline-flex;
    align-items: center;
}

.wp-block-query-pagination-previous a,
.wp-block-query-pagination-next a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    color: var(--wp--preset--color--secondary) !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-query-pagination-previous a:hover,
.wp-block-query-pagination-next a:hover {
    background-color: var(--wp--preset--color--secondary) !important;
    color: #fff !important;
    border-color: var(--wp--preset--color--secondary) !important;
}

.wp-block-query-pagination-previous svg,
.wp-block-query-pagination-next svg {
    width: 14px !important;
    height: 14px !important;
}

/* ===== REVIEW BLOKK ===== */
.wp-block-cb-review {
    padding: 0px 60px;
    margin-bottom: 150px !important;
}

.review-title {
    margin-bottom: 40px !important;
}

/* ===== SWIPER ===== */
swiper-container {
    --swiper-navigation-color: #18A89E !important;
    --swiper-theme-color: #18A89E !important;
}

.swiper-pagination {
    color: #18A89E;
}
/* ===== LEGFRISSEBB BEJEGYZÉSEK ===== */
.wp-block-latest-posts__post-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 30px !important;
}

.wp-block-latest-posts__post-excerpt {
    margin: 30px;
}

a img {
    transition: all 0.3s ease !important;
}

a img:hover {
    opacity: 0.9 !important;
    filter: brightness(0.8) !important;
}

/* ===== BLOG KÁRTYÁK (háttér/vizuális formázás eltávolítva) ===== */
.blog-kategoria .wp-block-term-template {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* ===== KIEMELT KÉP HOVER (zoom + overlay) ===== */
.wp-block-post-featured-image a {
    display: block;
    position: relative;
    overflow: hidden;
}

.wp-block-post-featured-image a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(42, 79, 85, 0.55);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;
}

.wp-block-post-featured-image a:hover::after {
    opacity: 1;
}

.wp-block-post-featured-image img {
    transition: transform 0.45s ease !important;
    opacity: 1 !important;
    filter: none !important;
}

.wp-block-post-featured-image a:hover img {
    transform: scale(1.07) !important;
}

/* ===== SEGÉDOSZTÁLYOK - SZÉLESSÉGEK ===== */
.max-width-800,
.max-width-800 > * {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.max-width-1000,
.max-width-1000 > * {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.pricing,
.wp-block-group.pricing,
.wp-block-columns.pricing {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===== KATEGÓRIA LINKEK - GOMB KINÉZET ELTÁVOLÍTVA ===== */

/* ===== CAROUSEL - FEATURED ===== */
.carousel-featured swiper-slide {
    border-radius: 30px !important;
    overflow: hidden !important;
    border-left: 5px solid var(--wp--preset--color--tertiary, #18A89E) !important;
    display: block !important;
}

.carousel-featured swiper-slide img {
    border-radius: 30px !important;
    display: block !important;
    height: 300px !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* ===== TABLET MÉDIA QUERY (1024px) ===== */
@media (max-width: 1024px) {
    .wp-block-latest-posts li {
        flex: 0 1 100% !important;
    }

    .tablet {
        padding-top: 100px;
    }
}

/* ===== FOOTER – margin felső eltávolítása ===== */
footer,
.wp-site-blocks > footer,
body > footer,
footer.wp-block-template-part {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

/* ===== TABLET MÉDIA QUERY (768px) ===== */
@media (max-width: 768px) {

    /* Footer */
    footer .wp-block-group,
    footer .wp-block-columns,
    footer .wp-block-column {
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
    }

    footer .wp-block-columns {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    footer .wp-block-social-links {
        justify-content: center !important;
    }

    /* Review blokk */
    .wp-block-cb-reviews {
        padding: 0 5% !important;
        margin-bottom: 60px !important;
    }

    .wp-block-cb-review {
        padding: 0 !important;
    }

    /* Post title */
    .wp-block-latest-posts__post-title {
        font-size: 1.25rem;
    }

    /* Latest posts */
    .wp-block-latest-posts li {
        flex: 0 1 100% !important;
    }

    .wp-block-latest-posts li a img {
        height: 80px !important;
    }

    /* Pricing plan oszlopok */
    .pricing-cols .wp-block-column {
        flex-basis: 90% !important;
        max-width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Oszlop térköz */
    .wp-block-column {
        gap: 0.5rem !important;
        row-gap: 0.5rem !important;
    }

    .wp-block-column > .wp-block-spacer {
        display: none !important;
    }

    .tablet {
        padding-top: 200px;
    }

}

.oszlop-kozep {
    display: flex;
    justify-content: center;
}

/* ===== SOCIAL IKONOK - LOGOS ONLY ===== */
.is-style-logos-only .wp-social-link svg,
.is-style-logos-only .wp-social-link svg *,
.is-style-logos-only .wp-social-link a svg,
.is-style-logos-only .wp-social-link a svg * {
    fill: #ffffff !important;
    color: #ffffff !important;
    stroke: none !important;
}

.is-style-logos-only .wp-social-link:hover svg,
.is-style-logos-only .wp-social-link:hover svg * {
    fill: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--accent) !important;
}

/* ===== FOOTER SOCIAL IKONOK ===== */
footer .wp-block-social-links .wp-social-link svg,
footer .wp-block-social-links .wp-social-link svg *,
footer .wp-block-social-links .wp-social-link a svg,
footer .wp-block-social-links .wp-social-link a svg path,
footer .wp-block-social-links .wp-social-link a svg circle,
footer .wp-block-social-links .wp-social-link a svg rect {
    fill: #ffffff !important;
    color: #ffffff !important;
    stroke: none !important;
}

footer .wp-block-social-links .wp-social-link:hover svg,
footer .wp-block-social-links .wp-social-link:hover svg * {
    fill: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--accent) !important;
}

/* ===== GOMB SHINE ANIMÁCIÓ ===== */
input[type="submit"],
input[type="button"],
button,
.button,
.wp-block-button__link {
    background: #E6A357;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
    box-shadow: 0 2px 6px rgba(18, 62, 71, 0.18), 0 1px 2px rgba(18, 62, 71, 0.1);
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover,
.wp-block-button__link:hover {
    background: #E58D29;
    box-shadow: 0 4px 14px rgba(18, 62, 71, 0.22), 0 2px 6px rgba(230, 163, 87, 0.18);
    transform: translateY(-1px);
}

input[type="submit"]::before,
input[type="button"]::before,
button::before,
.button::before,
.wp-block-button__link::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -120%;
    width: 70%;
    height: 160%;
    background: linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 20%,
        rgba(255,255,255,0.65) 50%,
        rgba(255,255,255,0) 80%,
        rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
    z-index: 1;
}

input[type="submit"]:hover::before,
input[type="button"]:hover::before,
button:hover::before,
.button:hover::before,
.wp-block-button__link:hover::before {
    animation: shine-sweep 1.1s ease forwards;
}

@keyframes shine-sweep {
    0%   { left: -120%; top: -30%; }
    100% { left: 140%; top: 30%; }
}

/* ===== SZALAG MARQUEE ===== */
.szalag-marquee {
    overflow: hidden;
    width: calc(100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px));
    margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1);
    margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1);
    display: flex;
    align-items: center;
    background: var(--wp--preset--color--secondary, #123E47);
    color: #fff;
    padding: 0.85rem 0;
    position: relative;
}

.szalag-marquee__track {
    display: flex;
    flex-shrink: 0;
    width: max-content;
    animation: szalag-scroll 40s linear infinite;
}

.szalag-marquee:hover .szalag-marquee__track {
    animation-play-state: paused;
}

.szalag-marquee__item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding-right: 4rem;
    font-weight: 600;
    word-spacing: 0.5em;
}

.szalag-marquee__item > * {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

@keyframes szalag-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Szín variánsok */
.szalag-tertiary  { background: var(--wp--preset--color--tertiary, #18A89E);  color: #fff; }
.szalag-accent    { background: var(--wp--preset--color--accent, #E6A357);    color: var(--wp--preset--color--text-primary, #16292E); }
.szalag-primary   { background: var(--wp--preset--color--primary, #F7F1E6);   color: var(--wp--preset--color--text-primary, #16292E); }

/* ===== GLOBÁLIS REVEAL ANIMÁCIÓK ===== */
.reveal-anim {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.8s ease, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-anim.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.guarantee {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.83rem;
}

.timeline-line {
  position: relative;
  width: 14px;
  height: 100%;
  margin: 0 auto;
}

/* Függőleges vonal */
.timeline-line::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, #C4703F, #D4A853, #7A8B6F);
  border-radius: 2px;
}

/* Pöttyök alap */
.dot {
  position: absolute;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid #FFFFFF;
  transform: translateX(-50%);
}

.dot-1 {
  top: 0;
  background: #C4703F;
}

.dot-2 {
  top: 35%;
  background: #D4A853;
}

.dot-3 {
  top: 69%;
  background: #7A8B6F;
}

/* ===== SZOLGÁLTATÁSOK PANEL ===== */
.szolgaltatas-panel {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

/* Bal navigáció doboz */
.szolgaltatas-nav {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(235, 227, 213, 1);
    box-shadow: 0 2px 12px rgba(18, 62, 71, 0.06);
    overflow: hidden;
}

.szolgaltatas-nav-belso {
    padding: 1rem;
}

.szolgaltatas-garancia {
    background: rgba(230, 163, 87, 0.1);
    border: 1px solid rgba(230, 163, 87, 0.2);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin: 0.75rem;
}

.szolgaltatas-garancia-cim {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent-deep, #E58D29);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.szolgaltatas-garancia p {
    font-size: 0.78rem;
    color: var(--wp--preset--color--text-muted, #5C6E70);
    line-height: 1.5;
    margin: 0;
}

.szolgaltatas-kategoria {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--secondary, #123E47);
    padding: 0.75rem 0.75rem 0.4rem;
    border-bottom: 1px solid rgba(18, 62, 71, 0.1);
    margin-bottom: 0.4rem;
}

.szolgaltatas-kategoria:not(:first-child) {
    margin-top: 0.75rem;
}

.szolgaltatas-elem {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    width: 100% !important;
    text-align: left !important;
    background: rgba(247, 241, 230, 0.5) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: var(--wp--preset--color--secondary, #123E47) !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    box-shadow: none !important;
    transform: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
    margin-bottom: 0.35rem !important;
    overflow: visible !important;
}

.szolgaltatas-elem::before,
.szolgaltatas-elem::after {
    display: none !important;
}

.szolgaltatas-elem:hover {
    background: rgba(247, 241, 230, 0.9) !important;
    transform: none !important;
    box-shadow: none !important;
}

.szolgaltatas-elem.aktiv {
    background: var(--wp--preset--color--secondary, #123E47) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.szolgaltatas-elem.aktiv-edu {
    background: var(--wp--preset--color--tertiary, #18A89E) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.szolgaltatas-elem.aktiv:hover,
.szolgaltatas-elem.aktiv-edu:hover {
    opacity: 0.92 !important;
}

.sz-ikon { flex-shrink: 0; opacity: 0.75; font-size: 1rem; }
.szolgaltatas-elem.aktiv .sz-ikon,
.szolgaltatas-elem.aktiv-edu .sz-ikon { opacity: 1; }

/* Jobb tartalom */
.szolgaltatas-tartalom {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(235, 227, 213, 1);
    box-shadow: 0 2px 12px rgba(18, 62, 71, 0.06);
    padding: 2.5rem;
}

.szolgaltatas-reszlet { display: none; }
.szolgaltatas-reszlet.aktiv {
    display: block;
    animation: sz-fade-in 0.28s ease;
}

@keyframes sz-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Fejléc a jobb panelen */
.sz-fejlec {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 1px solid rgba(247, 241, 230, 1);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.sz-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    margin-bottom: 0.6rem;
}

.sz-badge-kiv {
    background: rgba(18, 62, 71, 0.1);
    color: var(--wp--preset--color--secondary, #123E47);
}

.sz-badge-edu {
    background: rgba(24, 168, 158, 0.1);
    color: var(--wp--preset--color--tertiary, #18A89E);
}

.sz-cim {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem) !important;
    font-weight: 500 !important;
    color: var(--wp--preset--color--secondary, #123E47) !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}

.sz-ikon-doboz {
    background: rgba(247, 241, 230, 0.6);
    border-radius: 14px;
    padding: 1rem;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.sz-alcim {
    font-style: italic;
    font-size: 1.05rem;
    color: var(--wp--preset--color--secondary, #123E47);
    margin-bottom: 0.75rem !important;
}

.sz-leiras {
    color: var(--wp--preset--color--text-muted, #5C6E70);
    font-size: 0.95rem;
    line-height: 1.65;
    text-align: justify;
}

/* Előnyök rács */
.sz-elonyok {
    background: rgba(247, 241, 230, 0.5);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}

.sz-elonyok-cim {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--secondary, #123E47);
    margin-bottom: 1rem;
}

.sz-elonyok-racs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.sz-elony {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--wp--preset--color--text-primary, #16292E);
    line-height: 1.45;
}

.sz-check {
    color: var(--wp--preset--color--tertiary, #18A89E);
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 1rem;
}

/* CTA dobozok */
.sz-cta-racs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}

.sz-cta-doboz {
    border: 1px solid rgba(235, 227, 213, 1);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sz-cta-doboz.edu {
    background: rgba(247, 241, 230, 0.4);
    border-color: rgba(116, 210, 202, 0.4);
}

.sz-cta-ut {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.25rem;
}

.sz-cta-ut.kiv { color: var(--wp--preset--color--secondary, #123E47); }
.sz-cta-ut.edu { color: var(--wp--preset--color--tertiary, #18A89E); }

.sz-cta-szoveg {
    font-size: 0.78rem;
    color: var(--wp--preset--color--text-muted, #5C6E70);
    line-height: 1.5;
    flex-grow: 1;
}

.sz-cta-gomb {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    width: 100% !important;
    padding: 0.65rem 1rem !important;
    border-radius: 8px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.sz-cta-gomb::before, .sz-cta-gomb::after { display: none !important; }

.sz-cta-gomb.kiv {
    background: var(--wp--preset--color--accent, #E6A357) !important;
    color: var(--wp--preset--color--secondary, #123E47) !important;
}

.sz-cta-gomb.edu {
    background: var(--wp--preset--color--tertiary, #18A89E) !important;
    color: #fff !important;
}

.sz-cta-gomb:hover { opacity: 0.88 !important; }

/* Mobil */
@media (max-width: 900px) {
    .szolgaltatas-panel {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .sz-elonyok-racs { grid-template-columns: 1fr; }
    .sz-cta-racs { grid-template-columns: 1fr; }

    .szolgaltatas-tartalom { padding: 1.5rem; }
}

/* ===== KÉP SZÖVEG BUBORÉKOK (Cover blokkon belül) ===== */

/*
   A Cover blokk belső konténere (.wp-block-cover__inner-container)
   position: relative – ezért a kártyák ahhoz képest pozicionálódnak, nem a képhez.
   A kep-overlay osztállyal a konténert kiterjesztjük a teljes képre,
   hogy a kártyák ténylegesen a kép sarkain legyenek.
*/
.wp-block-cover.kep-overlay .wp-block-cover__inner-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Kis pill/badge – pl. "DIGITÁLIS NYUGALOM SZOFTVEREK" */
.kep-badge-doboz {
    position: absolute !important;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50px;
    padding: 0.5rem 1.1rem;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    z-index: 2;
}

.kep-badge-doboz p,
.kep-badge-doboz * {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--secondary, #123E47) !important;
    line-height: 1.2 !important;
}

/* Lebegő kártya – pl. "KÜLDETÉSÜNK" szöveges card */
.kep-kartya-doboz {
    position: absolute !important;
    bottom: 1.5rem;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1.1rem 1.4rem;
    max-width: 380px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
    z-index: 2;
    border-left: 3px solid var(--wp--preset--color--accent, #E6A357);
}

.kep-kartya-doboz p,
.kep-kartya-doboz * {
    margin: 0 0 0.3rem !important;
    padding: 0 !important;
    color: var(--wp--preset--color--text-primary, #16292E) !important;
}

.kep-kartya-doboz p:first-child,
.kep-kartya-doboz *:first-child {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--accent, #E6A357) !important;
    margin-bottom: 0.4rem !important;
}

.kep-kartya-doboz p:last-child,
.kep-kartya-doboz *:last-child {
    margin-bottom: 0 !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* Szülő kártya – kötelező ha absolute badge-et használsz benne */
.kep-tartalom {
    position: relative !important;
    min-height: 120px;
}

/* ── Inline cimke (nem absolute – flow-ban ül a kártyán belül) ── */
.kep-cimke {
    display: inline-block !important;
    background: var(--wp--preset--color--accent, #E6A357) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 0.35rem 1rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 1.25rem !important;
    line-height: 1.2 !important;
}

/* Nagy variáns – középre igazított, nagyobb betűméret */
.kep-cimke-nagy {
    display: block !important;
    text-align: center !important;
    background-color: var(--wp--preset--color--accent, #E6A357) !important;
    background-image: none !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 0.5rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-bottom: 1.25rem !important;
    line-height: 1.3 !important;
}

/* Overflow visible segédosztály – cimke kiemeléshez szükséges a kártya konténeren */
.overflow-visible {
    overflow: visible !important;
}

/* Cimke kiemelve – kártya fölé húzza a cimkét (kártyán overflow:visible kell) */
.cimke-kiemelve {
    margin-top: -2.5rem !important;
    margin-bottom: 1rem !important;
}

/* Cimke színvariánsok – kombinálható kep-cimke és kep-cimke-nagy osztályokkal */
.kep-cimke-accent,
.kep-cimke-nagy.kep-cimke-accent {
    background: var(--wp--preset--color--accent, #E6A357) !important;
    color: #ffffff !important;
}

.kep-cimke-tertiary,
.kep-cimke-nagy.kep-cimke-tertiary {
    background: var(--wp--preset--color--tertiary, #18A89E) !important;
    color: #ffffff !important;
}

.kep-cimke-secondary,
.kep-cimke-nagy.kep-cimke-secondary {
    background: var(--wp--preset--color--secondary, #123E47) !important;
    color: #ffffff !important;
}

/* Accent háttér variáns */
.kep-kartya-accent {
    background: var(--wp--preset--color--accent, #E6A357) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-left-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 30px rgba(230, 163, 87, 0.35) !important;
}

.kep-kartya-accent p,
.kep-kartya-accent * {
    color: var(--wp--preset--color--secondary, #123E47) !important;
}

.kep-kartya-accent p:first-child,
.kep-kartya-accent *:first-child {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Secondary háttér variáns */
.kep-kartya-secondary {
    background: var(--wp--preset--color--secondary, #123E47) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-left-color: var(--wp--preset--color--accent, #E6A357) !important;
    box-shadow: 0 8px 30px rgba(18, 62, 71, 0.35) !important;
}

.kep-kartya-secondary p,
.kep-kartya-secondary * {
    color: #ffffff !important;
}

.kep-kartya-secondary p:first-child,
.kep-kartya-secondary *:first-child {
    color: var(--wp--preset--color--accent, #E6A357) !important;
}

/* Pozíció variánsok – bal/jobb, fent/lent */
.kep-badge-bal   { right: auto !important; left: 1.25rem !important; }
.kep-kartya-bal  { right: auto !important; left: 1.5rem  !important; }
.kep-kartya-fent { bottom: auto !important; top: 1.5rem  !important; }

/* Mobil: kisebb padding */
@media (max-width: 768px) {
    .kep-kartya-doboz { max-width: 200px; padding: 0.85rem 1rem; }
    .kep-badge-doboz  { padding: 0.4rem 0.85rem; }
}

@media (max-width: 767px) {
    .wp-block-image.alignleft.size-full img[src$=".svg"] {
        width: 70px !important;
        height: 70px !important;
        max-width: 70px !important;
    }
}

/* ===== ÍVELT ALÁHÚZÁS – újrafelhasználható osztály ===== */

/* Alap: az elem pozicionálható legyen */
.ives-alhuzas,
.ives-alhuzas-hover {
    position: relative;
}

/* Maga az ív – ::after pseudo-elem */
.ives-alhuzas::after,
.ives-alhuzas-hover::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 7' preserveAspectRatio='none'%3E%3Cpath d='M 0 2 C 25 7 75 7 100 2' stroke='%23E6A357' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    pointer-events: none;
}

/* HOVER verzió: alapból láthatatlan, hover-re jelenik meg */
.ives-alhuzas-hover::after {
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ives-alhuzas-hover:hover::after {
    transform: scaleX(1);
}

/* ── SZÍN VARIÁNSOK ─────────────────────────────────── */
/* Tertiary (türkiz) */
.ives-tertiary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 7' preserveAspectRatio='none'%3E%3Cpath d='M 0 2 C 25 7 75 7 100 2' stroke='%2318A89E' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Secondary (sötétzöld) */
.ives-secondary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 7' preserveAspectRatio='none'%3E%3Cpath d='M 0 2 C 25 7 75 7 100 2' stroke='%23123E47' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Fehér – sötét háttéren */
.ives-white::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 7' preserveAspectRatio='none'%3E%3Cpath d='M 0 2 C 25 7 75 7 100 2' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ── VASTAGSÁG VARIÁNSOK ─────────────────────────────── */
.ives-vékony::after  { height: 5px; bottom: -4px; }
.ives-vastag::after  { height: 10px; bottom: -8px; }

/* ===== SZÍN KIEMELÉS HEADING/PARAGRAPH BLOKKOKBAN ===== */
mark.kiemelt-accent,
mark.kiemelt-tertiary,
mark.kiemelt-secondary {
    background: none;
    font-style: normal;
    font-weight: inherit;
}

mark.kiemelt-accent    { color: var(--wp--preset--color--accent,    #E6A357); font-weight: 700; }
mark.kiemelt-tertiary  { color: var(--wp--preset--color--tertiary,  #18A89E); font-weight: 700; }
mark.kiemelt-secondary { color: var(--wp--preset--color--secondary, #123E47); font-weight: 700; }
em.kiemelt-dolt        { font-style: italic; }

/* ===== SCROLL TO TOP GOMB ===== */
.scroll-top {
    position: fixed !important;
    bottom: 24px !important;
    right: 104px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 20px !important;
    background: var(--wp--preset--color--accent, #E6A357) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.25s ease, box-shadow 0.25s ease;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(230, 163, 87, 0.35) !important;
    text-transform: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.scroll-top.látható {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-top:hover {
    background: var(--wp--preset--color--accent-deep, #E58D29);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(230, 163, 87, 0.45);
}

.scroll-top svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    stroke: #fff !important;
    fill: none !important;
}

@media (max-width: 768px) {
    .scroll-top {
        bottom: 16px;
        right: 96px;
        width: 42px;
        height: 42px;
    }
}

/* ===== LOGO SZALAG ===== */
.logo-szalag {
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 2.5rem 0;
}

.logo-szalag .szalag-marquee__track {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: max-content;
    animation: szalag-scroll 35s linear infinite;
}

.logo-szalag:hover .szalag-marquee__track {
    animation-play-state: paused;
}

.logo-szalag .szalag-marquee__item {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    padding-right: 3.5rem;
}

/* WordPress Image blokkok a szalagon belül */
.logo-szalag .szalag-marquee__item .wp-block-image {
    margin: 0 !important;
    flex-shrink: 0;
}

.logo-szalag .szalag-marquee__item img {
    height: 56px !important;
    width: auto !important;
    max-width: 160px !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 0.75;
    transition: opacity 0.3s ease;
    filter: none;
}

.logo-szalag .szalag-marquee__item img:hover {
    opacity: 1;
}


/* ===== FOLYAMAT SÁVOK ===== */
.folyamat-sor {
    margin-bottom: 1.75rem;
}

.folyamat-cimke {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--secondary, #123E47);
    margin-bottom: 0.5rem;
}

.folyamat-sav {
    position: relative;
    background: rgba(18, 62, 71, 0.1);
    border-radius: 50px;
    height: 32px;
    overflow: hidden;
}

.folyamat-szam {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff !important;
    z-index: 2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.folyamat-kitoltes {
    height: 100%;
    width: 0;
    border-radius: 50px;
    background: linear-gradient(90deg,
        var(--wp--preset--color--secondary, #123E47) 0%,
        var(--wp--preset--color--tertiary, #18A89E) 100%);
    animation: none;
}

.folyamat-kitoltes.animalt {
    animation: folyamat-tolt 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes folyamat-tolt {
    from { width: 0; }
    to   { width: var(--cel-szelesseg, 0%); }
}

/* Szín variánsok */
.folyamat-accent .folyamat-kitoltes {
    background: linear-gradient(90deg,
        var(--wp--preset--color--accent, #E6A357) 0%,
        var(--wp--preset--color--accent-deep, #E58D29) 100%);
}

.folyamat-tertiary .folyamat-kitoltes {
    background: linear-gradient(90deg,
        var(--wp--preset--color--tertiary, #18A89E) 0%,
        var(--wp--preset--color--secondary, #123E47) 100%);
}

/* ===== GRADIENS KERET ===== */
/* Alap: secondary → tertiary keret, primary háttéren */
.keret-gradiens {
    --keret-hatter: var(--wp--preset--color--primary, #F7F1E6);
    border: 3px solid transparent !important;
    border-radius: 12px;
    background:
        linear-gradient(var(--keret-hatter), var(--keret-hatter)) padding-box,
        linear-gradient(135deg, var(--wp--preset--color--secondary, #123E47), var(--wp--preset--color--tertiary, #18A89E)) border-box !important;
}

/* Fehér háttéren */
.keret-gradiens-white {
    --keret-hatter: #ffffff;
    border: 3px solid transparent !important;
    border-radius: 12px;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--wp--preset--color--secondary, #123E47), var(--wp--preset--color--tertiary, #18A89E)) border-box !important;
}

/* Accent → tertiary keret */
.keret-gradiens-accent {
    --keret-hatter: var(--wp--preset--color--primary, #F7F1E6);
    border: 3px solid transparent !important;
    border-radius: 12px;
    background:
        linear-gradient(var(--keret-hatter), var(--keret-hatter)) padding-box,
        linear-gradient(135deg, var(--wp--preset--color--accent, #E6A357), var(--wp--preset--color--tertiary, #18A89E)) border-box !important;
}

/* Fordított irány: tertiary → secondary */
.keret-gradiens-fordított {
    --keret-hatter: var(--wp--preset--color--primary, #F7F1E6);
    border: 3px solid transparent !important;
    border-radius: 12px;
    background:
        linear-gradient(var(--keret-hatter), var(--keret-hatter)) padding-box,
        linear-gradient(135deg, var(--wp--preset--color--tertiary, #18A89E), var(--wp--preset--color--secondary, #123E47)) border-box !important;
}

/* KERET ELTÜNTETÉSE */
.wp-block-coblocks-tabs__body,
.wp-block-coblocks-tabs,
div[class*="wp-custom-css"] {
  border: none !important;
  box-shadow: none !important;
}

/* FÜLEK → GOMBOK */
ul.tab-labels {
  display: flex !important;
  gap: 14px !important;
  border-bottom: none !important;
  padding: 0 0 24px 0 !important;
  list-style: none !important;
}

ul.tab-labels li {
  background: transparent !important;
  border: 1.5px solid rgba(18,62,71,.25) !important;
  border-radius: 999px !important;
  padding: 12px 26px !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: #123E47 !important;
  cursor: pointer !important;
  transition: all .25s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

ul.tab-labels li:hover {
  border-color: #18A89E !important;
  color: #18A89E !important;
  background: rgba(24,168,158,.06) !important;
}

ul.tab-labels li.active {
  background: linear-gradient(135deg,#E6A357,#E58D29) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(229,141,41,.4) !important;
}