/*
Theme Name: DigitBase Theme
Theme URI: https://digitbase.hu/
Author: DigitBase
Description: Custom theme for DigitBase site.
Version: 1.0
*/

/* ====== FELSŐ FIX MENÜ – ALAP (MOBIL-FIRST) ====== */

html,
body {
    margin: 0;
    padding: 0;
}


.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20; /* a videó (-1) fölé kell kerüljön */
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
    color: #fff;
}

.site-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-branding .site-logo {
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    color: #fff;
}

/* MENÜ + HAMBURGER – ALAPBÓL MOBILON */

.nav-toggle {
    /* rejtett checkbox, de működik a + és ~ szelektorral */
    display: none;
}

/* hamburger ikon MINDIG látszik, ha nincs nagy kijelző */
.nav-toggle-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    position: relative;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-label span::before {
    top: -6px;
}

.nav-toggle-label span::after {
    top: 6px;
}

/* NAV mobilon – alapból rejtve, lenyílóként */

.primary-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    text-align: left;
}

.primary-menu {
    list-style: none;
    margin: 0;
    padding: 0.5rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.primary-menu li {
    margin: 0;
    padding: 0;
}

.primary-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    padding-bottom: 2px;
}

.primary-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #ffcc33;
    transition: width 0.2s ease;
}

.primary-menu a:hover::after,
.primary-menu .current-menu-item > a::after {
    width: 100%;
}

/* Checkbox hack – ha pipálva, lenyílik a menü + animált hamburger */

.nav-toggle:checked + .nav-toggle-label span {
    transform: rotate(45deg);
}

.nav-toggle:checked + .nav-toggle-label span::before {
    transform: rotate(90deg);
    top: 0;
}

.nav-toggle:checked + .nav-toggle-label span::after {
    opacity: 0;
}

.nav-toggle:checked ~ .primary-nav {
    display: block;
}

/* ====== DESKTOP NÉZET (769px-TŐL) ====== */

@media (min-width: 769px) {

    .site-header-inner {
        padding: 0.5rem 1.5rem;
    }

    /* Desktopon ne látszódjon a hamburger */
    .nav-toggle-label {
        display: none;
    }

    /* Menüsáv vízszintesen, láthatóan */
    .primary-nav {
        position: static;
        background: transparent;
        display: block;
    }

    .primary-menu {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        padding: 0;
    }

    .primary-menu a {
        font-size: 0.95rem;
    }
}
.site-branding {
    display: flex;
    align-items: center;
}

/* Szöveges fallback logó (ha nincs kép) */
.site-logo-text {
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    color: #fff;
}

/* Képes logó */
.site-logo-image .custom-logo-link img {
    max-height: 48px;  /* ha nagyobb kell, emeld pl. 60-ra */
    width: auto;
    display: block;
}

/* Fix: a fix fejlec ne takarja ki a belso oldalak tetejet */
body:not(.home) {
    padding-top: 90px; /* állítsd 80-110 közé, amíg pont jó nem lesz */
}

/* --- Tök olyan oldal egyedi design --- */

/* --- Tök olyan + Tökre más oldalak közös, színes háttér --- */
/* KÖZÖS beállítás mindkét oldalnak (pozíció, méret) */
.tok-olyan-page,
.tokre-mas-page {
    min-height: 100vh;
    margin-top: -90px;   /* ugyanannyi, mint a body padding-top */
    padding-top: 90px;
    padding-bottom: 4rem;
}

/* Tök olyan – marad a narancs→piros háttér */
.tok-olyan-page {
    background: linear-gradient(135deg, #ff8a00 0%, #ff3d00 40%, #c8003a 100%);
    color: #fff7e6;
}

/* Tökre más – sárga→narancs háttér */
.tokre-mas-page {
    background: linear-gradient(135deg, #ffe259 0%, #ffa751 50%, #ff7b00 100%);
    color: #fff7e6; /* maradhat ugyanaz a világos szövegszín */
}


/* mindkét oldal tartalma kapjon belső margót balról-jobbról */
.tok-olyan-page .container,
.tokre-mas-page .container {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* címsor + szöveg nagyobb betűmérettel mindkét oldalon */
.tok-olyan-page .page-title,
.tokre-mas-page .page-title {
    font-size: clamp(2.2rem, 3vw, 2.8rem);
    margin-bottom: 1.5rem;
}

.tok-olyan-page .page-intro,
.tokre-mas-page .page-intro {
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Tök olyan + Tökre más – cikk lista két hasábban nagy kijelzőn */
.tok-olyan-page .tok-olyan-post-list,
.tokre-mas-page .tokre-mas-post-list {
    display: grid;
    grid-template-columns: 1fr; /* alapból egy hasáb (mobil, tablet) */
    gap: 2rem;
}

@media (min-width: 900px) {
    .tok-olyan-page .tok-olyan-post-list,
    .tokre-mas-page .tokre-mas-post-list {
        grid-template-columns: 1fr 1fr;
    }
}

/* cikkdobozok kinézete mindkét oldalon */
.tok-olyan-page .tok-olyan-post-item,
.tokre-mas-page .tokre-mas-post-item {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 1.5rem;
    border-bottom: none;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* címek, linkek */
.tok-olyan-page .tok-olyan-post-title a,
.tokre-mas-page .tokre-mas-post-title a {
    color: #ffffff;
    text-decoration: none;
}

.tok-olyan-page .tok-olyan-post-title a:hover,
.tokre-mas-page .tokre-mas-post-title a:hover {
    text-decoration: underline;
}

.tok-olyan-page a,
.tokre-mas-page a {
    color: #ffe27a;
}

.tok-olyan-page a:hover,
.tokre-mas-page a:hover {
    color: #ffffff;
}

/* dátum, meta */
.tok-olyan-page .tok-olyan-post-meta,
.tokre-mas-page .tokre-mas-post-meta {
    font-size: 0.9rem;
    opacity: 0.85;
    margin-bottom: 0.75rem;
}

/* Rólunk oldal – cikklista stílus */
.rolunk-post-section {
    margin-top: 3rem;
}

.rolunk-post-section-title {
    font-size: clamp(1.8rem, 2.5vw, 2.2rem);
    margin-bottom: 1.5rem;
}

/* alap: egy hasáb */
.rolunk-post-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* nagyobb kijelzőkön két hasáb */
@media (min-width: 900px) {
    .rolunk-post-list {
        grid-template-columns: 1fr 1fr;
    }
}

.rolunk-post-item {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 1.5rem;
    font-size: 1.05rem;
    line-height: 1.7;
}

.rolunk-post-title a {
    color: #ffffff;
    text-decoration: none;
}

.rolunk-post-title a:hover {
    text-decoration: underline;
}

.rolunk-post-meta {
    font-size: 0.9rem;
    opacity: 0.85;
    margin-bottom: 0.75rem;
}

.rolunk-read-more {
    display: inline-block;
    margin-top: 0.5rem;
    color: #ffe27a;
}

.rolunk-read-more:hover {
    color: #ffffff;
}

/* Rólunk oldal – tartalom behúzása, hogy ne a lap szélén kezdődjön */
.about-with-intro .about-content {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* --- MINDEN CIKK (single post) – közös design --- */

.single-article-page {
    min-height: 100vh;

    /* ugyanúgy trükközünk, mint a Tök olyan / Tökre más oldalon,
       hogy a fix header alá csússzon be a háttér */
    margin-top: -90px;   /* legyen ugyanannyi, mint a body padding-top-ja */
    padding-top: 90px;

    padding-bottom: 4rem;

    /* sárga–narancs átmenetes háttér */
    background: linear-gradient(135deg, #ffe259 0%, #ffa751 50%, #ff7b00 100%);
    color: #fff7e6; /* tört fehér szöveg */
}

/* külső tartalom doboz – behúzás, max szélesség, középre igazítva */
.single-article-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* cím + meta */
.single-article-title {
    font-size: clamp(2.2rem, 3vw, 2.8rem);
    margin-bottom: 0.5rem;
}

.single-article-meta {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

/* alap betűméret, sortáv */
.single-article {
    font-size: 1.1rem;    /* kicsit nagyobb betű */
    line-height: 1.7;
}

/* a konkrét cikk tartalma – KÉT HASÁB nagy kijelzőn */
.single-article-content {
    column-count: 1;      
    column-gap: 4rem;     /* nagyobb távolság a két hasáb között */
}

@media (min-width: 900px) {
    .single-article-content {
        column-count: 2;
    }
}


/* linkek színei a cikkben */
.single-article-page a {
    color: #ffe27a;       /* sárgás link */
    text-decoration: underline;
}

.single-article-page a:hover {
    color: #ffffff;
}

/* képek, beágyazott elemek ne fussanak ki fura módon a hasábokban */
.single-article-content img,
.single-article-content figure,
.single-article-content iframe {
    max-width: 100%;
    height: auto;
    break-inside: avoid;
}

/* címsorok is viselkedjenek szépen hasábban */
.single-article-content h2,
.single-article-content h3,
.single-article-content h4 {
    break-inside: avoid;
    margin-top: 1.5rem;
}

/* Rólunk oldal – sárga–narancs háttér, header alá csúsztatva */
.about-with-intro {
    min-height: 100vh;

    /* ugyanaz a trükk, mint a Tök olyan / cikk oldalakon */
    margin-top: -90px;   /* legyen ugyanannyi, mint a body padding-top-ja */
    padding-top: 90px;

    padding-bottom: 4rem;

    /* sárga–narancs átmenetes háttér */
    background: linear-gradient(135deg, #ffe259 0%, #ffa751 50%, #ff7b00 100%);
    color: #fff7e6; /* tört fehér szöveg */
}

/* Egyedi bejegyzések (cikkek) legyenek 1 hasábban, középen */
.single-post .entry-content,
.single-post .elementor-widget-theme-post-content {
  column-count: 1 !important;
  column-gap: 0 !important;

  max-width: 900px;   /* ezt állíthatod 760–1000px között */
  margin-left: auto;
  margin-right: auto;
}

/* Egyedi bejegyzések: ne legyen 2 hasáb (theme-es oszlopozás kikapcs) */
@media (min-width: 900px){
  body.single-post .single-article-content{
    column-count: 1 !important;
    column-gap: 0 !important;
  }
}

/* Középre, kényelmes olvasószélességre */
body.single-post .single-article-container{
  max-width: 900px;   /* állítható 760–1000 között */
}

.db-back{
  appearance:none;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(0,0,0,.22);
  color:#fff;
  padding:.45rem .7rem;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  font-size:.95rem;
  line-height:1;
  white-space:nowrap;
}

.db-back:hover{
  background:rgba(0,0,0,.35);
}

.site-footer{
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.9);
  padding: 12px 0;
}

.site-footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.site-footer-copy{
  margin: 0;
  font-size: 0.95rem;
}

.footer-menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-menu a{
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-weight: 500;
}

.footer-menu a:hover{
  color: #fff;
  text-decoration: underline;
}

/* Footer mindig a háttérvideó fölött legyen */
.site-footer{
  position: relative;
  z-index: 50;
}

/* Főoldalon a footer legyen alul rögzítve a videó fölé */
.home .site-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 50;
}

/* Footer: legyen tényleg látható a főoldalon is */
.site-footer{
  position: relative;
  z-index: 9999;
}

/* Főoldalon rögzített, átlátszó footer (videó fölé) */
body.home .site-footer,
body.front-page .site-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 9999;
}

/* Ne takarja el a footer az alsó tartalmat */
body.home,
body.front-page{
  padding-bottom: 70px; /* ha kell: 60–90px között állítsd */
}