/* Global Styles & Variables */
:root {
    --primary-font: 'Lato', sans-serif;
    --heading-font: 'Playfair Display', serif;

    /* Option B: Vibrant & Modern Palette - Sea Variation */
    /* --color-bg: #f8f9fa; Old simple bg */
    --color-text: #333333;

    /* Theme Colors */
    --color-gastro: #C05621;
    /* Light Salmon / Warm Orange - sötétítve WCAG AA kontrasztért (4.57:1 fehéren) */
    --color-gastro-light: #fff5ee;
    --color-travel: #0F7B7B;
    /* Turquoise - sötétítve WCAG AA kontrasztért (5.07:1 fehéren) */
    --color-travel-light: #e0ffff;
    --color-wine: #800020;
    /* Burgundy */
    --color-wine-light: #fdf5f5;

    --card-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    --card-hover-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

body {
    font-family: var(--primary-font);
    background: linear-gradient(135deg, #E0F7FA 0%, #80DEEA 50%, #4DD0E1 100%);
    /* Sea colors gradient */
    background-attachment: fixed;
    /* Keeps gradient content consistent on scroll */
    min-height: 100vh;
    color: var(--color-text);
}

/* Specific Home Background */
.home-bg {
    /* Adding a dark overlay (40% opacity black) over the image for perfect text contrast */
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../img/sea-bg.png') no-repeat center center fixed;
    background-size: cover;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
    font-family: var(--heading-font);
}

/* Videóbeágyazás (16:9). A .video-embed a cikkekben használt
   sima doboz, a .wp-block-embed__wrapper a WordPress blokkoké. */
.video-embed,
.wp-block-embed__wrapper {
    margin: 1.5rem 0;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    line-height: 0;
}

.video-embed iframe,
.wp-block-embed__wrapper iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Képfeliratok (figcaption).
   A <figure.wp-caption> BLOKK elem, hogy a cikk szövege a kép
   ALATT folytatódjon. (inline-block volt, és emiatt a szöveg a
   kép mellé úszott, felbontva a mondatokat - ez volt a hiba.)
   A KÉP viszont inline-block a figure-en belül, így középre
   igazítható a felirat is. */
figure.wp-caption {
    display: block;
    max-width: 100%;
    margin: 1rem 0;
    text-align: center;
}

/* A képek 300 px szélességűek, egységesen, mint a gasztróban és
   travelben. A WordPress a régi, szűk blog miatt nagyon kicsi
   width="100-199" attribútumokat hagyott (pl. a Champagne-
   cikkekben), így azok aprón jelentek meg, noha a fájl
   1000-1600 px méretű. A width felülírja a width attribútumot,
   a max-width pedig mobilon visszafogja, hogy ne lógjon ki. */
figure.wp-caption img,
figure.wp-caption a {
    display: inline-block;
    width: 300px;
    max-width: 100%;
    height: auto;
}

/* A képfeliratok stílusa - minden figure-ből, nem csak a
   wp-caption-ből (a beágyazott videóknál is van figcaption) */
figure.wp-caption figcaption,
figcaption {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    font-style: italic;
    color: #666;
    line-height: 1.4;
}

/* Navbar Customization - "fagyott üveg" effekt.
   A fejléc fix pozíciójú, így görgetéskor a kártyák szövege
   alá csúszott; a 0.95-es átlátszóságon keresztül átszűrődött.
   A backdrop-filter elmossa a tartalmat a fejléc mögött, így
   megmarad a tenger-hangulatú félig átlátszó fehér, de semmi nem
   olvasható át rajta. A -webkit- előtag a Safari miatt kell. */
.navbar {
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-text);
}

.nav-link {
    font-weight: 500;
    color: #555;
    transition: color 0.3s;
}

.nav-link:hover {
    color: var(--color-wine);
    /* Accent hover */
}

/* Navbar Logo */
.navbar-brand-logo {
    max-height: 50px;
    width: auto;
    mix-blend-mode: multiply;
}

.navbar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Hero Section */
.hero-section {
    padding: 1rem 0;
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: #ffffff;
    /* Strong drop shadow for readability without box */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9);
}

/* Soft Dark Vignette behind text */
.hero-text-shading {
    display: inline-block;
    padding: 1.5rem 3rem;
    /* Large padding for soft fade */
    /* Radial gradient: dark in center, transparent at edges */
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 70%);
    margin-bottom: 0.5rem;
    border-radius: 50%;
    /* Helps the radial shape */
    max-width: 90%;
}

/* Subtitle on Home */
.hero-subtitle {
    color: #f8f9fa;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    font-size: 1.3rem;
    /* Slightly larger for better readability */
    font-weight: 500;
    margin-bottom: 0;
}

/* Theme Cards */
.theme-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* Thin subtle border */
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    height: 100%;
    cursor: pointer;
    box-shadow: var(--card-shadow);
}

.theme-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-hover-shadow);
}

.theme-card .card-body {
    padding: 0.5rem 1rem;
    /* Reduced padding to minimize white strip */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: auto;
}

/* Hosszú, szóköz nélküli címek (pl. "libamell,libamájjal,birsalmapürével")
   korábban kiszélesítették a címet a kártyán túl, ahol az overflow:hidden
   levágta őket. A max-width visszaszorítja a kártya szélességére, az
   overflow-wrap pedig ilyenkor megtöri a hosszú szót. */
.theme-card .card-body>* {
    max-width: 100%;
    overflow-wrap: break-word;
}

/* A kártyakivonatok egységes, 7 soros magassága. A -webkit-line-clamp
   levágja a hosszabb kivonatokat, a min-height pedig a rövidebbeket
   kitölti, így a sorban álló kártyák mindig azonos méretűek
   (különben a legrövidebb kivonat határozta meg a sor magasságát,
   és a többi kártyán üres hely maradt). */
.theme-card .card-text {
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.5em * 7);
}

/* A kártyacím is 2 sor, fixen. A 2. soros magasság minden
   kártyát azonos méretűvé teszi, hogy a sorok ne csússzanak el
   egymáshoz képest. A 3+ soros címek ...-szal levágva, a teljes
   cím a cikkoldalon megmarad. */
.theme-card .card-title {
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.2em * 2);
}

.theme-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

/* A címekben a "&" karakter. A Playfair Display-nek van egy díszített,
   gúnyos ampersandje, ami kiszúr a sorból, ezért a "&" a szöveges
   (Lato) betűtípust kapja: így tiszta, modern és jól illeszkedik. */
.amp {
    font-family: var(--primary-font);
    font-style: normal;
    font-weight: 400;
}

.theme-card-img {
    height: 45vh;
    /* Increased height again for better visibility */
    object-fit: cover;
    border-bottom: 1px solid #eee;
}

/* Specific Theme Styling */
.card-gastro .theme-card-img {
    object-position: bottom;
    /* Adjust to show the plate usually at bottom */
}

.card-gastro {
    background: white;
    border-bottom: 5px solid var(--color-gastro);
}

.card-gastro .theme-icon,
.card-gastro .card-title {
    color: var(--color-gastro);
}

.card-travel {
    background: white;
    border-bottom: 5px solid var(--color-travel);
}

/* A korábbi #17a2b8 felülírás megszűnt: az a beégetett érték
   (3.05:1) levágta a --color-travel változót, és a WCAG AA-s
   sötétebb türkiz (5.07:1) nem érvényesült a kártyacímen. */
.card-travel .theme-icon,
.card-travel .card-title {
    color: var(--color-travel);
}

.card-wine {
    background: white;
    border-bottom: 5px solid var(--color-wine);
}

.card-wine .theme-icon,
.card-wine .card-title {
    color: var(--color-wine);
}

/* Intro Section */
.intro-section {
    background-color: #ffffff;
    padding: 3rem 0;
    margin-top: 3rem;
    border-top: 1px solid #eee;
}

.intro-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.profile-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    box-sizing: border-box;
    /* Belső tengerzöld gyűrű: a fotó (zömmel fehér) nem olvad a fehér
       kártyákba, a tartalom így 126px-re zsugorul a 150px-es körben. */
    padding: 8px;
    background-color: #E0F7FA;
    margin-bottom: 1.5rem;
    border: 4px solid white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Utazási címke-navigáció (Ország › Város › Szálllda).
   A régi ongo.hu navigáció helyére: a szöveg megmaradt, a
   halott linkek és gifek helyett itt egy CSS háromszög jelöli
   az elválasztást, 8px térrel minden oldalon. */
.trip-labels {
    margin-bottom: 1.25rem;
}

.trip-label:not(:last-child)::after {
    content: "▶";
    display: inline-block;
    margin: 0 8px;
    font-size: 0.8em;
    color: var(--color-text);
    opacity: 0.55;
    vertical-align: middle;
}

/* Footer */
.footer {
    background-color: #333;
    color: #fff;
    padding: 2rem 0;
    text-align: center;
    margin-top: 0;
}

.footer a {
    color: #ddd;
    text-decoration: none;
}

.footer a:hover {
    color: #fff;
}

/* Blog Post Content Images - Half Width */
.post-content img {
    max-width: 50%;
    height: auto;
    display: block;
    margin: 1rem auto;
}