/* ============================================================
   Testmester.eu – Pontos eredeti stílus & arányok
   ============================================================ */

/* --- Globális változók & Reset --- */
:root {
    --color-bg: #f2ed8a;
    --color-primary: #28303d; /* Eredeti Twenty Twenty-One sötétszürke */
    --color-maroon: Maroon;
    --color-white-text: #e0e0e0;
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --content-width: 670px;   /* 10%-kal szélesebb: 610px -> 670px */
    --radius: 10px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    margin-left: calc(100vw - 100%);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-stack);
    font-size: 1.1rem; /* 10%-kal nagyobb alapszöveg: 1rem -> 1.1rem */
    line-height: 1.85; /* Nagyobb, szellős sorköz az eredeti szerint */
    color: var(--color-primary); /* Eredeti finom sötétszürke betűszín */
    background-color: var(--color-bg);
    background: radial-gradient(circle, rgba(241,234,141,1) 0%, rgba(233,226,134,1) 25%, rgba(255,251,203,1) 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* --- Fő konténer (szélesebb 670px) --- */
.site-container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 20px 16px 40px;
}

/* --- Tipográfia --- */
h1, h2, h3, strong {
    color: var(--color-primary);
    font-weight: 700;
}

.main-title {
    font-size: 2.4rem; /* 10%-kal nagyobb cím: 2.2rem -> 2.4rem */
    font-weight: 700;
    text-align: center;
    margin: 18px 0 22px;
    line-height: 1.2;
    color: var(--color-primary);
}

p {
    margin-bottom: 1.25em;
    line-height: 1.85;
}

.text-justify {
    text-align: justify;
}

.text-center {
    text-align: center;
}

/* Drop-cap az első bekezdéshez */
.has-drop-cap::first-letter {
    float: left;
    font-size: 3.3em;
    line-height: 0.72;
    font-weight: 700;
    margin: 0.08em 0.12em 0 0;
    color: var(--color-primary);
}

/* --- Linkek --- */
a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.15s ease;
}

a:hover,
a:focus {
    opacity: 0.7;
}

/* --- Menü (aláhúzott linkek, kisebb hézag) --- */
.site-nav {
    text-align: center;
    padding: 10px 0 16px;
    font-size: 1.05rem; /* 10%-kal nagyobb menü: 0.95rem -> 1.05rem */
    line-height: 1.6;
}

.site-nav a {
    display: inline-block;
    margin: 0 6px; /* Kisebb távolság az elemek között */
    font-weight: 700;
    text-decoration: underline; /* Aláhúzva, ahogy az eredetiben volt */
    color: var(--color-primary);
}

.site-nav a:hover {
    opacity: 0.7;
}

.bottom-nav {
    margin-top: 24px;
    padding-top: 10px;
}

/* --- Képek --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
}

.hero-figure {
    margin: 15px auto 25px;
    max-width: 100%;
}

.hero-figure img {
    margin: 0 auto;
}

/* --- Maroon (bordó) dobozok --- */
.box-maroon {
    background-color: var(--color-maroon);
    color: var(--color-white-text);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin: 22px 0;
    line-height: 1.75;
}

.box-maroon h2 {
    color: #ffffff;
    font-size: 1.38rem; /* 10%-kal nagyobb: 1.25rem -> 1.38rem */
    font-weight: 700;
    margin-bottom: 10px;
}

.box-maroon strong {
    color: #ffffff;
}

.box-maroon a {
    color: #ffffff;
    text-decoration: underline;
}

.box-maroon a:hover {
    color: #fff4a3;
}

.box-maroon ul {
    list-style: disc;
    padding-left: 24px;
    margin: 10px 0;
}

.box-maroon li {
    margin-bottom: 6px;
    line-height: 1.65;
}

.box-maroon li::marker {
    color: #ffffff;
}

.box-maroon p:last-child {
    margin-bottom: 0;
}

/* Árlista sorok */
.box-maroon .price-list {
    list-style: none;
    padding-left: 0;
    margin: 12px 0;
}

.box-maroon .price-list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
}

.box-maroon .price-list li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: #ffffff;
    font-weight: bold;
}

/* --- Elérhetőségek szekció --- */
.section-plain {
    padding: 4px 0;
    margin: 20px 0;
}

.section-plain h2 {
    font-size: 1.38rem; /* 10%-kal nagyobb: 1.25rem -> 1.38rem */
    font-weight: 700;
    margin-bottom: 12px;
}

.contact-info {
    line-height: 1.85;
}

/* --- Elválasztó vonal (eredeti méret) --- */
.separator {
    border: none;
    border-bottom: 2px solid var(--color-primary);
    width: 100px;
    margin: 25px auto;
    opacity: 0.35;
}

/* --- Galéria Grid --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 20px 0;
}

.gallery-grid figure {
    margin: 0;
}

.gallery-grid img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius);
    cursor: zoom-in;
    transition: opacity 0.2s ease;
}

.gallery-grid img:hover {
    opacity: 0.92;
}

@media (max-width: 520px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* --- Animációk --- */
/* Eredeti finom beúszás a szövegekre */
@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.scale-in-element {
    animation: scale-in 0.9s ease-out both;
}

/* Gyors, finom Fade-in a galériához (NEM nő meg a méret!) */
@keyframes quick-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.appear-with-scale {
    opacity: 0;
}

.appear-fade {
    opacity: 0;
}

.fade-in-element {
    animation: quick-fade 0.4s ease-out both;
}

/* --- Lightbox --- */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.lightbox-overlay.active {
    display: flex;
    opacity: 1;
}

.lightbox-overlay img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: var(--radius);
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.8);
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.lightbox-overlay.loaded img {
    opacity: 1;
}

/* --- Lábléc --- */
.site-footer {
    text-align: center;
    padding: 24px 16px 36px;
    font-size: 0.85rem;
    color: var(--color-primary);
    opacity: 0.7;
}

/* Mobil beállítások */
@media (max-width: 620px) {
    .site-container {
        padding: 14px 12px 30px;
    }
    .main-title {
        font-size: 1.75rem;
    }
    .site-nav a {
        margin: 0 4px;
        font-size: 0.9rem;
    }
    .box-maroon {
        padding: 15px 16px;
    }
}