/*
Theme Name:   Indara Dancewear (korábban Tangó-Trend)
Theme URI:    https://www.tango-trend.hu/
Author:       Tangó-Trend
Description:  Egyedi WordPress sablon a Tangó-Trend Kft. számára (INDARA arculattal frissítve).
Version:      2.1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         custom-theme, elegant, light, dance
Text Domain:  tangotrend
*/

/* ----------------------------------------------------
   VÁLTOZÓK, ALAPOK (INDARA ARCULAT)
---------------------------------------------------- */
:root {
  --primary-red: #A42A28;      /* Logó vörös színe */
  --primary-dark: #2C2C2C;     /* Logó sötét színe (szöveghez) */
  --background-light: #f9f2e5; /* Logó krém háttérszíne */
  --text-light: #ffffff;       /* Fehér szöveg sötét háttérre */
  --text-muted: #666666;
  --border-color: #DDDAD4;
  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: 'Karla', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--background-light);
  color: var(--primary-dark);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .navbar-brand-text, .footer-brand {
  font-family: var(--font-serif);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--primary-dark);
}

a {
  text-decoration: none !important;
  color: inherit;
}

p { color: var(--text-muted); }
p a { color: var(--primary-dark); text-decoration: underline; }
section { padding: 100px 0; overflow: hidden; }
section:nth-of-type(even) { background: #fff; } /* Enyhe eltérés a szekciók között */
.bg-darker { background: rgba(245, 241, 233, 1) !important; }

/* Vörös alsó vonal a szekciócímek alatt */
.section-title {
  font-size: 3rem;
  margin: 0 0 2rem;
  display: inline-block;
  position: relative;
  padding-bottom: .5rem;
  color: var(--primary-red);
}
.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--primary-red);
  margin: .7rem auto 0;
}

/* Általános hover vörös akcentus */
a:hover { color: var(--primary-red) !important; }

/* ----------------------------------------------------
   NAVBAR
---------------------------------------------------- */
.navbar {
    padding: 0.5rem 0; /* Kisebb padding, hogy a logó jobban elférjen */
    transition: background-color .4s ease-in-out, box-shadow .4s ease-in-out;
    background: #FAF9F6;
    font-weight: 600;
}
.navbar.scrolled {
    /* background: rgba(245, 241, 233, .95); Enyhén áttetsző krém */
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.navbar-brand {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.custom-logo-link {
    line-height: 1; /* Megakadályozza a felesleges extra helyet */
}
.custom-logo {
    max-height: 80px; /* Állítsd be a kívánt magasságot */
    width: auto;
}
.nav-link {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: .85rem;
  color: var(--primary-dark) !important;
  transition: color .3s;
}
.nav-link:hover, .nav-link.active { color: var(--primary-red) !important; }
.navbar-toggler { border: none !important;  }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(44, 44, 44, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
button.navbar-toggler.collapsed {border: none;}

/* Admin bar + fixed header offset */
body.admin-bar header.fixed-top { margin-top: 32px; }
@media (max-width: 782px) {
  body.admin-bar header.fixed-top { margin-top: 46px; }
}

/* Offcanvas háttér mobilon */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: rgba(245, 241, 233, .98);
    padding: 1rem;
    margin-top: 10px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
  }
}

/* ----------------------------------------------------
   GOMBOK
---------------------------------------------------- */
.btn {
  border-radius: 0 !important;
  font-family: 'Karla', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all .3s ease;
}

/* Elsődleges gomb: Teli vörös */
.btn.btn-primary {
  padding: 1rem 2rem;
    background-color: var(--primary-red);
    border: 1px solid var(--primary-red);
    color: var(--text-light) !important;
}
.btn.btn-primary:hover {
    background-color: #8c2422; /* Sötétebb vörös */
    border-color: #8c2422;
    color: var(--text-light) !important;
}

/* Másodlagos gomb: Körvonalas vörös */
.btn.btn-secondary {
  padding: 1rem 2rem;
    background-color: transparent;
    color: var(--primary-red) !important;
    border: 1px solid var(--primary-red);
}
.btn.btn-secondary:hover {
    background-color: var(--primary-red);
    border-color: var(--primary-red);
    color: var(--text-light) !important;
}

/* Régi gomb stílusának frissítése (kompatibilitás) */
.btn-outline-gold { /* Átnevezve, de a stílust megtartjuk az új név alatt */
  color: var(--primary-red);
  border: 1px solid var(--primary-red);
  border-radius: 2px;
  padding: 12px 35px;
  text-transform: uppercase; font-weight: 500; font-size: .8rem; letter-spacing: 1.5px;
  transition: all .3s ease; display: inline-block;
}
.btn-outline-gold:hover { background: var(--primary-red); color: #fff; border-color: var(--primary-red); }
.btn-lg{padding:15px 40px;font-size:.9rem}

/* ----------------------------------------------------
   HERO
---------------------------------------------------- */
#hero { position: relative; height: 100vh; padding: 0; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.video-background { position: absolute; inset: 0; z-index: -2; }
.video-background video { width: 100%; height: 100%; object-fit: cover; }
#hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .65); z-index: -1; }
.hero-content h1 { font-size: 5rem; font-weight: 600; letter-spacing: 8px; text-transform: uppercase; color: #fff !important; }
.hero-content p { font-size: 1.1rem; letter-spacing: 1px; color: #fff; }

/* ----------------------------------------------------
   ÁLTALÁNOS KÉPRÁCS
---------------------------------------------------- */
.image-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }
.image-grid img { width: 100%; height: auto; object-fit: cover; filter: grayscale(40%); transition: filter .4s, transform .4s; }
.image-grid img:hover { filter: grayscale(0); transform: scale(1.03); }
.img-grid-1 { grid-column: 1/2; grid-row: 1/3; align-self: end; }
.img-grid-2 { grid-column: 2/3; grid-row: 1/3; align-self: start; }

/* ----------------------------------------------------
   FOOTER
---------------------------------------------------- */
footer { background: var(--primary-dark); padding: 80px 0; color: var(--background-light); }
.footer-brand { color: var(--background-light); }
footer a { color: #ccc; text-decoration: none; transition: color .3s; }
footer a:hover { color: var(--background-light); }
footer h5 { font-family: var(--font-sans); font-weight: 500; letter-spacing: 1px; font-size: .9rem; margin-bottom: 1.5rem; color: #fff; }
.social-icons a { color: var(--background-light); font-size: 1.5rem; margin: 0 15px; transition: color .3s; }
.social-icons a:hover { color: var(--primary-red) !important; }
.copyright { font-size: .8rem; color: #888; margin-top: 2rem; }

/* ----------------------------------------------------
   OLDALCÍM / BLOG LISTA HEADER
---------------------------------------------------- */
.page-header { padding: 100px 0; background: #fff; border-bottom: 1px solid var(--border-color); margin-top: 72px; text-align: center; }
.page-title { font-size: 3rem; color: var(--primary-dark); }

/* ----------------------------------------------------
   BLOG ARCHÍVUM - KÁRTYÁK
---------------------------------------------------- */
.blog-archive-section { padding: 100px 0; }
.blog-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px; overflow: hidden;
  transition: transform .4s ease, border-color .3s ease, box-shadow .3s ease;
}
.blog-card:hover { transform: translateY(-8px); border-color: var(--primary-red); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.blog-card .card-img-top { height: 260px; object-fit: cover; }
.blog-card .card-title a { color: var(--primary-dark) !important; font-family: var(--font-serif); text-transform: uppercase; letter-spacing: 1.5px; text-decoration: none; }
.blog-card .card-title a:hover { color: var(--primary-red) !important; }
.blog-card .post-date { color: var(--primary-red) !important; font-size: .75rem; text-transform: uppercase; letter-spacing: 2px; }
.blog-card .card-text { color: var(--text-muted); }

/* Lapozó */
.pagination-container .page-numbers { border-radius: 2px; border: 1px solid var(--border-color); padding: .5rem .8rem; margin: 0 .15rem; display: inline-block; color: var(--primary-dark); }
.pagination .page-numbers:hover, .pagination .page-numbers.current {
  background: var(--primary-red);
  color: #fff;
  border-color: var(--primary-red);
}

/* ----------------------------------------------------
   SINGLE POST
---------------------------------------------------- */
.single-header { margin-top: 72px; padding-bottom: 2rem; text-align: center; }
.single-hero-img img { width: 100%; height: 65vh; object-fit: cover; }
.single-title { font-family: var(--font-serif); font-size: 3.5rem; text-transform: uppercase; color: var(--primary-dark); margin-top: 2rem; letter-spacing: 2px; }
.single-meta { font-size: .8rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 1px; margin-top: 1rem; }
.single-content-section { padding: 80px 0; }
.single-content { max-width: 820px; margin: auto; font-size: 1.1rem; }
.single-content p { color: var(--primary-dark); margin-bottom: 1.5rem; }
.single-content img { max-width: 100%; height: auto; border-radius: 4px; margin: 2rem 0; }
.single-nav a { color: var(--primary-red); text-decoration: none; font-weight: 600; }
.single-nav a:hover { color: var(--primary-dark); text-decoration: underline; }



/* ----------------------------------------------------
   GALÉRIA
---------------------------------------------------- */
.gallery-section { padding: 120px 0; }
.gallery-grid img.gallery-img { width: 100%; height: 420px; object-fit: cover; border-radius: 4px; transition: transform .4s ease, opacity .3s ease; cursor: pointer; }
.gallery-grid img.gallery-img:hover { transform: scale(1.05); opacity: .85; }
.gallery-filter { margin-bottom: 2rem; }
.filter-btn {
    background: transparent;
    color: var(--primary-dark);
    border: 1px solid var(--primary-red);
    padding: 10px 22px; margin: 0 5px; font-size: .8rem;
    letter-spacing: 2px; text-transform: uppercase; transition: all .3s ease;
}
.filter-btn:hover, .filter-btn.active {
    background: var(--primary-red);
    color: #fff;
}

/* ----------------------------------------------------
   RESPONSIVE
---------------------------------------------------- */
@media (max-width: 1199.98px) {
  .hero-content h1 { font-size: 4.2rem; }
}
@media (max-width: 991.98px) {
  .hero-content h1 { font-size: 3rem; }
  .section-title { font-size: 2.2rem; }
  #about .col-lg-6, #bespoke .col-lg-5 { text-align: center; margin-bottom: 2rem; }
  .image-grid { grid-template-columns: 1fr; }
  section { padding: 80px 0; }
}
@media (max-width: 575.98px) {
  .single-title { font-size: 2.4rem; }
  .page-title { font-size: 2.2rem; }
}

/* ===== FOOTER LANG DROPDOWN ===== */
.lang-dropdown-footer {
    display: inline-block;
}

.lang-footer-toggle {
    background: transparent;
    border: none;
    padding: 0;
}

.lang-footer-toggle img {
    width: 26px;
    height: auto;
}

/* Dropdown stílus */
.dropdown-menu-center {
    background: rgba(10,10,10,0.95);
    border: 1px solid rgba(197, 164, 126, 0.3);
    border-radius: 8px;
    padding: 10px 6px;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 90px;
}

.footer-lang-item {
    display: flex;
    justify-content: center;
    padding: 6px 0;
}

.footer-lang-item img {
    width: 22px;
    transition: transform .2s ease, filter .2s ease;
}

.footer-lang-item:hover img {
    transform: translateY(-2px);
    filter: brightness(1.3);
}

.footer-lang-item.active img {
    filter: drop-shadow(0 0 4px var(--primary-gold));
}


/* ===== FOOTER LANG DROPDOWN (TEXT VERSION) ===== */
.lang-dropdown-footer {
    display: inline-block;
}

.lang-footer-toggle {
    background: transparent;
    border: none;
    padding: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--text-light);
}

.dropdown-menu-center {
    background: rgba(10,10,10,0.95);
    border: 1px solid rgba(197, 164, 126, 0.35);
    border-radius: 8px;
    padding: 8px 0;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 140px;
    text-align: center;
}

.footer-lang-item {
    padding: 8px 12px;
    color: var(--text-light);
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: 2px;
}

.footer-lang-item:hover {
    background: transparent;
    color: var(--primary-gold);
}

.footer-lang-item.active {
    color: var(--primary-gold);
}

/* ===== FOOTER LANGUAGE DROPDOWN FIX ===== */

/* Gomb (aktuális nyelv) */
.lang-footer-toggle {
    background: transparent !important;
    border: none !important;
    color: var(--primary-gold) !important;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Dropdown doboz */
.dropdown-menu-center {
    background: rgba(10, 10, 10, 0.95) !important;
    border: 1px solid rgba(197, 164, 126, 0.4) !important;
    border-radius: 6px !important;
    padding: 8px 0;
    min-width: 160px;
}

/* Listaelemek */
.footer-lang-item {
    color: var(--text-light) !important;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 15px;
}

/* Hover */
.footer-lang-item:hover {
    color: var(--primary-gold) !important;
    background: transparent !important;
}

/* Aktív nyelv */
.footer-lang-item.active {
    color: var(--primary-gold) !important;
    background: transparent !important;
}

/* Dropdown arrow arany */
.lang-footer-toggle::after {
    border-top-color: var(--primary-gold) !important;
}


/* ----------------------------------------------------
   JOGI OLDAL SABLON (template-legal.php)
---------------------------------------------------- */
.legal-page-header {
    padding: 60px 0 40px;
    margin-top: 90px; /* Biztosítjuk, hogy a fix fejléc ne takarja ki */
    text-align: center;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.legal-title {
    font-size: 2.8rem;
    color: var(--primary-dark);
    margin: 0;
    text-transform: uppercase;
}

.legal-content-section {
    padding: 80px 0;
    background: var(--background-light);
}

.legal-content {
    max-width: 850px; /* Optimális olvasási sávszélesség */
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
}

.legal-content h2,
.legal-content h3,
.legal-content h4 {
    font-family: var(--font-serif);
    color: var(--primary-dark);
    margin-top: 2.5rem;
    margin-bottom: 1.2rem;
}

.legal-content p {
    margin-bottom: 1.5rem;
    color: var(--primary-dark);
}

.legal-content ul,
.legal-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.legal-content li {
    margin-bottom: 0.5rem;
}

.legal-content a {
    color: var(--primary-red);
    text-decoration: underline;
}

.legal-content a:hover {
    text-decoration: none !important;
}

.legal-content strong,
.legal-content b {
    font-weight: 600;
}

/* ----------------------------------------------------
   TERMÉKEINK - KATEGÓRIA KÁRTYÁK
---------------------------------------------------- */
.product-category-card {
    display: block;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
}

.product-category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08);
    border-color: var(--primary-red);
}

.product-category-card img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.product-category-card:hover img {
    transform: scale(1.05);
}

.product-category-card .card-content {
    padding: 1.5rem 1.25rem;
    text-align: center;
}

.product-category-card h4 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--primary-dark);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 0.5rem 0;
    transition: color 0.3s ease;
}

.product-category-card:hover h4 {
    color: var(--primary-red);
}

.product-category-card .sub-categories {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
    font-family: var(--font-sans);
    letter-spacing: 0.5px;
}

/* ----------------------------------------------------
   HASZNOS LINKEK SZEKCIÓ
---------------------------------------------------- */
.useful-links-list {
    list-style: none;
    padding-left: 0;
    margin-top: 2rem;
}

.useful-links-list li {
    margin-bottom: 1.25rem;
    font-family: var(--font-serif);
    font-size: 1.5rem;
}

.useful-links-list li::before {
    content: '-';
    color: var(--primary-red);
    margin-right: 1.25rem;
}

.useful-links-list a {
    color: var(--primary-dark);
    text-decoration: none;
    transition: color 0.3s ease, letter-spacing 0.3s ease;
}

.useful-links-list a:hover {
    color: var(--primary-red) !important;
    letter-spacing: .5px;
}

/* ----------------------------------------------------
   KAPCSOLAT SZEKCIÓ
---------------------------------------------------- */
.contact-details-list {
    list-style: none;
    padding: 0;
}

.contact-details-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.contact-details-list i {
    font-size: 1.5rem;
    color: var(--primary-red);
    margin-right: 1.5rem;
    margin-top: 0.25rem;
    width: 25px; /* Fix szélesség az ikonoknak */
}

.contact-details-list div {
    display: flex;
    flex-direction: column;
}

.contact-details-list strong {
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--primary-dark);
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-details-list a,
.contact-details-list span {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-details-list a:hover {
    color: var(--primary-red) !important;
}

.contact-details-list .map-link {
    text-decoration: underline;
    font-weight: 600;
    color: var(--primary-dark);
}

.contact-social-icons {
    margin-top: 2rem;
}

.contact-social-icons a {
    font-size: 1.8rem;
    color: var(--primary-dark);
    margin-right: 1.5rem;
    transition: color 0.3s ease;
}

.contact-social-icons a:hover {
    color: var(--primary-red) !important;
}

/* --- Contact Form 7 Teljes Felülírása --- */
.contact-form-wrapper {
    background: #fff;
    padding: 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* Általános beviteli mezők (szöveg, email, textarea) */
.wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
    padding: 12px 18px;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--primary-dark);
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wpcf7-form-control:not(.wpcf7-submit):focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(164, 42, 40, 0.15);
}

.wpcf7-form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}

/* Bekezdések, amik a mezőket tartalmazzák */
.wpcf7-form p {
    margin-bottom: 1.5rem;
}

/* KÜLDÉS GOMB */
.wpcf7-form .wpcf7-submit {
    display: inline-block;
    width: 100%; /* Teljes szélességű gomb */
    padding: 1rem 2rem;
    font-family: 'Karla', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-light) !important;
    background-color: var(--primary-red);
    border: 1px solid var(--primary-red);
    border-radius: 4px;
    cursor: pointer;
    transition: all .3s ease;
}

.wpcf7-form .wpcf7-submit:hover {
    background-color: #8c2422; /* Sötétebb vörös */
    border-color: #8c2422;
}

/* Visszajelző üzenetek (siker, hiba) */
.wpcf7-response-output {
    padding: 1rem 1.5rem;
    margin: 2rem 0 0 0;
    border-radius: 4px;
    font-size: 0.95rem;
}

/* Sikeres küldés */
.wpcf7-mail-sent-ok {
    border: 1px solid #28a745;
    background-color: #e9f5ec;
    color: #155724;
}

/* Hibaüzenet */
.wpcf7-validation-errors, .wpcf7-spam-blocked {
    border: 1px solid #dc3545;
    background-color: #f8d7da;
    color: #721c24;
}

/* === SINGLE PAGE SPACING FIX === */
.single-header {
    padding-top: 120px;    /* felső margó, navbar + adminbar miatt */
    padding-bottom: 80px;  /* hogy legyen lélegzete */
}

/* ha nincs kiemelt kép, akkor még nagyobb padding kell */
.single-header:not(:has(.single-hero-img)) {
    padding-top: 120px;
}

/* ----------------------------------------------------
   VIDEÓ GALÉRIA OLDAL (template-videos.php)
---------------------------------------------------- */
.video-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.75rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Biztosítja, hogy a belső tartalom ne lógjon ki */
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* A reszponzív YouTube beágyazás trükkje */
.video-responsive-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 arány */
    height: 0;
    overflow: hidden;
}

.video-responsive-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}