/*
Theme Name: Abszurd Legendák
Theme URI:
Author: Géza
Description: Child theme a Twenty Twenty-Five témához.
Version: 1.0
Template: twentytwentyfive
Text Domain: abszurd-legendak
*/
/* ==========================================================
   ABSZURD LEGENDÁK
   GLOBAL STYLE v1.0
   ----------------------------------------------------------
   Projekt: Abszurd Legendák
   Platform: WordPress + HTML blokkok
   ========================================================== */


/* ==========================================================
   GOOGLE FONTS
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Libre+Baskerville:wght@400;700&family=Inter:wght@300;400;500;600&display=swap');


/* ==========================================================
   ROOT VARIABLES
   ========================================================== */

:root{

    --black:#0b0b0b;
    --graphite:#1b1b1b;
    --brown:#2b1e16;

    --gold:#b08d57;
    --gold-light:#d6b979;

    --parchment:#efe6cf;

    --text:#ece8df;
    --text-muted:#b7b0a2;

    --border:#3b2d1f;

    --max-width:1200px;

    --transition:0.3s ease;

}


/* ==========================================================
   RESET
   ========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    background:
        radial-gradient(circle at top,#2a2018 0%,#111 35%,#080808 100%);

    color:var(--text);

    font-family:"Inter",sans-serif;

    line-height:1.7;

}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,h2,h3,h4{

    font-family:"Cinzel",serif;

    color:var(--parchment);

    letter-spacing:1px;

    margin-bottom:20px;

}

h1{

    font-size:3.4rem;

}

h2{

    font-size:2.3rem;

}

h3{

    font-size:1.5rem;

}

p{

    color:var(--text-muted);

    margin-bottom:20px;

}

a{

    color:var(--gold-light);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:white;

}


/* ==========================================================
   CONTAINER
   ========================================================== */

.container{

    width:90%;

    max-width:var(--max-width);

    margin:auto;

}


/* ==========================================================
   HEADER
   ========================================================== */

header{

    position:sticky;

    top:0;

    z-index:999;

    background:rgba(10,10,10,.95);

    backdrop-filter:blur(8px);

    border-bottom:1px solid var(--border);

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.logo{

    font-family:"Cinzel";

    font-size:1.7rem;

    color:var(--gold-light);

}

nav ul{

    list-style:none;

    display:flex;

    gap:35px;

}

nav a{

    color:var(--parchment);

    font-weight:500;

}

nav a:hover{

    color:var(--gold-light);

}


/* ==========================================================
   HERO
   ========================================================== */

.hero{

    min-height:85vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:120px 0;

}

.hero-content{

    max-width:900px;

}

.hero p{

    font-size:1.2rem;

    margin-top:30px;

}


/* ==========================================================
   BUTTONS
   ========================================================== */

.btn{

    display:inline-block;

    margin-top:35px;

    padding:15px 34px;

    color:var(--gold-light);

    border:2px solid var(--gold);

    background:transparent;

    font-family:"Cinzel";

    transition:var(--transition);

    border-radius:4px;

}

.btn:hover{

    background:var(--gold);

    color:black;

}


/* ==========================================================
   SECTION
   ========================================================== */

section{

    padding:100px 0;

}


/* ==========================================================
   CARDS
   ========================================================== */

.grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:40px;

}

.card{

    background:#161616;

    border:1px solid var(--border);

    padding:35px;

    transition:var(--transition);

    border-radius:8px;

}

.card:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

}

.card img{

    width:100%;

    border-radius:4px;

    margin-bottom:20px;

}


/* ==========================================================
   IMAGE PLACEHOLDER
   ========================================================== */

.placeholder{

    width:100%;

    height:320px;

    border:2px dashed var(--gold);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--gold);

    background:#111;

}


/* ==========================================================
   QUOTE
   ========================================================== */

blockquote{

    border-left:4px solid var(--gold);

    padding-left:25px;

    font-style:italic;

    color:var(--parchment);

}


/* ==========================================================
   CTA
   ========================================================== */

.cta{

    text-align:center;

    background:#111;

    border-top:1px solid var(--border);

    border-bottom:1px solid var(--border);

}

.cta h2{

    margin-bottom:20px;

}


/* ==========================================================
   FOOTER
   ========================================================== */

footer{

    background:#090909;

    padding:60px 0;

    text-align:center;

    border-top:1px solid var(--border);

}

footer p{

    margin-bottom:15px;

}

.footer-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

}

.footer-links a{

    color:var(--text-muted);

}

.footer-links a:hover{

    color:var(--gold-light);

}


/* ==========================================================
   TABLES
   ========================================================== */

table{

    width:100%;

    border-collapse:collapse;

}

th,td{

    padding:15px;

    border:1px solid var(--border);

}

th{

    background:#181818;

}


/* ==========================================================
   FORMS
   ========================================================== */

input,
textarea{

    width:100%;

    padding:15px;

    background:#121212;

    border:1px solid var(--border);

    color:white;

    margin-bottom:20px;

}

input:focus,
textarea:focus{

    outline:none;

    border-color:var(--gold);

}

button{

    cursor:pointer;

}


/* ==========================================================
   DIVIDER
   ========================================================== */

.divider{

    width:120px;

    height:2px;

    background:var(--gold);

    margin:35px auto;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:900px){

    .navbar{

        flex-direction:column;

        gap:25px;

    }

    nav ul{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;

    }

    h1{

        font-size:2.4rem;

    }

    h2{

        font-size:2rem;

    }

}

@media(max-width:600px){

    .hero{

        min-height:70vh;

        padding:80px 0;

    }

    .btn{

        width:100%;

    }

}
/* ==================================================
   ABSZURD LEGENDÁK HEADER
   ================================================== */


header,
.wp-block-template-part{

    background:#090909;

}


.wp-site-blocks header{

    border-bottom:1px solid #b08d57;

}


.wp-block-site-title a{

    font-family:"Cinzel",serif;

    color:#d6b979;

    font-size:32px;

    text-decoration:none;

}


.wp-block-navigation a{

    font-family:"Libre Baskerville",serif;

    color:#efe6cf;

    transition:.3s ease;

}


.wp-block-navigation a:hover{

    color:#d6b979;

}


/* fejléc magasság */

.wp-block-template-part > .wp-block-group{

    padding-top:25px;

    padding-bottom:25px;

}
/* ==================================================
   ABSZURD LEGENDÁK HERO
================================================== */


.al-hero{

    min-height:750px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:
    radial-gradient(
    circle at center,
    #2b1e16,
    #090909 70%
    );

}


.al-hero-content{

    width:90%;

    max-width:900px;

}


.al-placeholder{

    height:280px;

    border:2px dashed var(--gold);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:40px;

    color:var(--gold-light);

    font-family:"Cinzel";

}



.al-hero h1{

    font-size:64px;

    color:var(--gold-light);

}


.al-hero p{

    font-size:22px;

    color:var(--parchment);

    max-width:700px;

    margin:30px auto;

}