/* assets/css/szekely-style.css */

/*
    Szekely Style Override for Forty Theme
    ---
    This stylesheet aims to bring a traditional, earthy,
    and handcrafted Szekely aesthetic to the Forty theme.
*/

:root {
    /* Szekely Color Palette */
    --szekely-deep-red: #8C1C13;         /* Retained for specific accents like logo strong tag */
    --szekely-forest-green: #4A573E;    /* Retained for some base elements */
    --szekely-dark-brown: #493829;      /* For body text and darker elements */
    --szekely-medium-brown: #7A5C44;    /* Main interactive/menu color */
    --szekely-light-brown-accent: #A07C60; /* Lighter brown for hover/active states */
    --szekely-beige-bg: #F0EAD6;        /* Main light background */
    --szekely-cream-accent: #FFF8E7;    /* Lighter accent for cards, on-dark text */
    --szekely-text-on-dark: var(--szekely-cream-accent);
    --szekely-text-on-light: var(--szekely-dark-brown);
    --szekely-border-color: #C8BBA7;

    /* Fonts */
    --font-primary-body: 'Merriweather', serif; /* For main paragraph text */
    --font-secondary-nav-headings: 'Raleway', sans-serif; /* For less decorative headings, nav text */
    --font-logo-decorative: 'Cinzel Decorative', cursive; /* For Logo, Main Menu Links, H1/H2 if desired */

    /* Layout Variables */
    --header-height-desktop: 3.25em;
    --header-height-mobile: 2.75em;
    --swiper-navigation-size: 44px;
}

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

/* --- Global Resets & Overrides --- */
body {
    background-color: var(--szekely-beige-bg);
    color: var(--szekely-text-on-light);
    font-family: var(--font-primary-body); /* Changed to primary-body */
    font-size: 16pt;
}
@media screen and (max-width: 1680px) { body { font-size: 13pt; } }
@media screen and (max-width: 1280px) { body { font-size: 12pt; } }
@media screen and (max-width: 360px) { body { font-size: 11pt; } }

h1, h2 { /* Applying decorative font to top-level headings */
    font-family: var(--font-logo-decorative);
    color: var(--szekely-dark-brown); /* Darker brown for more impact */
    font-weight: 700; /* Cinzel Decorative might have limited weights, 700 often good */
    letter-spacing: 0.03em; /* Adjust spacing for decorative font */
}
h3, h4, h5, h6 { /* Using secondary for other headings */
    font-family: var(--font-secondary-nav-headings);
    color: var(--szekely-dark-brown);
    font-weight: 600;
    letter-spacing: 0.05em;
}
h1 {text-align: center;letter-spacing: 0.05em; 	color: var(--szekely-medium-brown) !important;
	font-family: var(--font-logo-decorative);} /* Adjust size for decorative font */
h2 {text-align: center;color: var(--szekely-medium-brown) !important;
	font-family: var(--font-logo-decorative); }
h3 {text-align: center;color: var(--szekely-medium-brown) !important;
	font-family: var(--font-logo-decorative); }

#header nav {
		color: var(--szekely-medium-brown) !important;
	font-family: var(--font-logo-decorative) !important;
}
a {
    color: var(--szekely-medium-brown) !important; /* Main link color now medium brown */
    text-decoration: none;
    border-bottom: 1px dotted var(--szekely-medium-brown);
    font-size: 1em !important;
    transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
}
a:hover {
    color: var(--szekely-light-brown-accent) !important; /* Light brown accent on hover */
    border-bottom-color: var(--szekely-light-brown-accent);
    text-shadow: none;
}

strong, b {
	color: var(--szekely-medium-brown) !important;
	font-family: var(--font-logo-decorative);
    font-weight: 700;
}
hr { border-bottom-color: var(--szekely-border-color); }
header.major > :first-child:after { background-color: var(--szekely-medium-brown); } /* Line under headings now medium brown */

/* --- Wrapper --- */
#wrapper {
    background-color: var(--szekely-beige-bg);
    padding-top: var(--header-height-desktop); 
}
@media screen and (max-width: 736px) {
    #wrapper { padding-top: var(--header-height-mobile); }
}

/* --- Header (Sticky & Brown) --- */
#header, #header.alt {
    background-color: var(--szekely-medium-brown) !important;
    color: var(--szekely-text-on-dark);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10001; 
    height: var(--header-height-desktop);
    line-height: var(--header-height-desktop);
}
@media screen and (max-width: 736px) {
    #header, #header.alt {
         height: var(--header-height-mobile);
         line-height: var(--header-height-mobile);
    }
}
#header .logo, #header.alt .logo {
    color: var(--szekely-text-on-dark) !important;
    font-family: var(--font-logo-decorative);
    font-weight: 700; /* Cinzel Decorative often looks best bold or normal */
    font-size: 0.9em; /* Adjust size if needed */
    letter-spacing: 0.05em;
}
#header .logo strong, #header.alt .logo strong {
    color: var(--szekely-text-on-dark) !important;
	background: var(--szekely-dark-brown)
    font-family: var(--font-logo-decorative);
    font-weight: 700; /* Cinzel Decorative often looks best bold or normal */
    font-size: 0.9em; /* Adjust size if needed */
    letter-spacing: 0.05em;
}
#header .logo span, #header.alt .logo span { /* "Főoldal" part */
    font-weight: 400; /* Lighter weight for the span */
}
#header .logo:hover strong, #header.alt .logo:hover strong {
    background-color: var(--szekely-brown); /* Darker brown on hover for contrast */
}
#header nav a, #header.alt nav a {
    color: var(--szekely-text-on-dark) !important;
    border-bottom: none;
    font-family: var(--font-secondary-nav-headings); /* Using Raleway for "Menu" text */
}
#header nav a:hover, #header.alt nav a:hover {
    color: var(--szekely-cream-accent) !important;
}
#header nav a[href="#menu"]:after,
#header.alt nav a[href="#menu"]:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 2px%3B stroke: %23F0EAD6%3B %7D%3C/style%3E%3Cline x1='0' y1='11' x2='24' y2='11' /%3E%3Cline x1='0' y1='21' x2='24' y2='21' /%3E%3Cline x1='0' y1='16' x2='24' y2='16' /%3E%3C/svg%3E");
}
#header nav a[href="#menu"]:hover:after,
#header nav a[href="#menu"]:active:after,
#header.alt nav a[href="#menu"]:hover:after,
#header.alt nav a[href="#menu"]:active:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 2px%3B stroke: %23FFF8E7%3B %7D%3C/style%3E%3Cline x1='0' y1='11' x2='24' y2='11' /%3E%3Cline x1='0' y1='21' x2='24' y2='21' /%3E%3Cline x1='0' y1='16' x2='24' y2='16' /%3E%3C/svg%3E");
}

/* --- Menu (#menu) --- */
#menu {
    background-color: rgba(var(--szekely-medium-brown-rgb, 122, 92, 68), 0.97); /* Use RGB for opacity */
    color: var(--szekely-text-on-dark);
    z-index: 10002; 
}
#menu ul.links > li > a:not(.button) {
    color: var(--szekely-text-on-dark) !important;
    border-top-color: rgba(240, 234, 214, 0.2); 
    font-family: var(--font-logo-decorative); /* Decorative font for menu links */
    letter-spacing: 0.05em;
    font-weight: 400; /* Cinzel decorative often looks good at normal weight too */
    text-transform: none; /* Original was uppercase, adjust if needed */
}
#menu ul.links > li > a:not(.button):hover {
    color: var(--szekely-light-brown-accent) !important; /* Light brown hover */
    background-color: rgba(0,0,0,0.1); /* Subtle hover background */
}
#menu .close:before { 
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23F0EAD6%3B stroke-width: 2%3B %7D%3C/style%3E%3Cline x1='0' y1='0' x2='20' y2='20' /%3E%3Cline x1='20' y1='0' x2='0' y2='20' /%3E%3C/svg%3E");
}
#menu .close:after { 
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23A07C60%3B stroke-width: 2%3B %7D%3C/style%3E%3Cline x1='0' y1='0' x2='20' y2='20' /%3E%3Cline x1='20' y1='0' x2='0' y2='20' /%3E%3C/svg%3E"); /* Light brown hover for X */
}

/* --- BANNER (SLIDESHOW) --- */
#banner {
    background: var(--szekely-dark-brown);
    color: var(--szekely-text-on-dark);
    padding: 0;
    height: calc(75vh - var(--header-height-desktop));
    min-height: calc(30em - var(--header-height-desktop));
    max-height: calc(90vh - var(--header-height-desktop));
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
/* @media screen and (max-width: 736px) { */
    /* #banner { */
        /* height: calc(65vh - var(--header-height-mobile)); */
        /* min-height: calc(25em - var(--header-height-mobile)); */
    /* } */
/* } */

#banner .swiper-container { width: 100%; height: 100%; }
#banner .swiper-slide {
    text-align: center; font-size: 18px; background: var(--szekely-dark-brown);
    display: flex; justify-content: center; align-items: center; overflow: hidden;
}
#banner .swiper-slide img {
    width: 100vw;
    height: auto;
    max-width: 1000px;
}
#banner .swiper-button-next,
#banner .swiper-button-prev {
    color: var(--szekely-cream-accent) !important; 
    background-color: rgba(122, 92, 68, 0.5); /* Medium brown for nav buttons */
    width: calc(var(--swiper-navigation-size) * 0.8); 
    height: calc(var(--swiper-navigation-size) * 0.8);
    border-radius: 50%;
    transition: background-color 0.2s ease;
    margin-top: calc(0px - (var(--swiper-navigation-size) * 0.8 / 2)); 
}
#banner .swiper-button-next:hover,
#banner .swiper-button-prev:hover {
    background-color: rgba(160, 124, 96, 0.7); /* Light brown accent on hover */
}
#banner .swiper-button-next::after,
#banner .swiper-button-prev::after {
    font-size: calc(var(--swiper-navigation-size) * 0.35); 
    font-weight: 900;
}
#banner .swiper-pagination-bullet {
    background-color: var(--szekely-medium-brown); opacity: 0.6; width: 10px; height: 10px;
}
#banner .swiper-pagination-bullet-active {
    background-color: var(--szekely-light-brown-accent); opacity: 1; /* Light brown for active pagination */
}
#banner .swiper-pagination { bottom: 20px !important; }

/* --- Main Content Area --- */
#main {
    background-color: var(--szekely-beige-bg); position: relative; z-index: 1;
}
#main > * { border-top-color: var(--szekely-border-color); }

/* Tiles */
.tiles { display: flex; flex-wrap: wrap; }
.tiles article {
    color: var(--szekely-text-on-dark); width: 100% !important; box-sizing: border-box;
}
.tiles article h3 {
    color: var(--szekely-cream-accent); text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    font-family: var(--font-logo-decorative); /* Decorative font for tile headers */
    font-size: 1.6em; /* Adjust size */
    letter-spacing: 0.04em;
}
.tiles article p {
    color: var(--szekely-cream-accent); font-size: 0.9em; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    font-family: var(--font-secondary-nav-headings); /* Raleway for tile paragraph */
}
.tiles article:before { opacity: 0.75; }
.tiles article:hover:before { opacity: 0.5; }

/* Using menu theme colors for tile overlays now */
.tiles article.image-tile:nth-of-type(4n - 3):before { background-color: var(--szekely-medium-brown); }
.tiles article.image-tile:nth-of-type(4n - 2):before { background-color: var(--szekely-dark-brown); }
.tiles article.image-tile:nth-of-type(4n - 1):before { background-color: var(--szekely-light-brown-accent); }
.tiles article.image-tile:nth-of-type(4n):before    { background-color: var(--szekely-medium-brown); opacity: 0.85;}

.tiles article.text-tile {
    background-color: var(--szekely-cream-accent) !important;
    background-image: none !important;
    color: var(--szekely-text-on-light);
    padding: 3em 2em; display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start; text-align: left;
    min-height: 23em; 
}
.tiles article.text-tile:before,
.tiles article.text-tile:after { content: none !important; display: none !important; }

.tiles article.text-tile h2 { /* Uses global H2 style with Cinzel Decorative */
    color: var(--szekely-dark-brown); text-shadow: none; margin-bottom: 0.75em;
}
.tiles article.text-tile p {
    color: var(--szekely-text-on-light); text-shadow: none; font-size: 1em;
    font-family: var(--font-primary-body); /* Merriweather for this paragraph */
}
.tiles article.text-tile .actions { margin-top: 1.5em; }
.tiles article.text-tile .button.next { /* "Programjaink" button */
    background-color: var(--szekely-medium-brown);
    color: var(--szekely-cream-accent) !important;
    box-shadow: inset 0 0 0 2px var(--szekely-medium-brown);
}
.tiles article.text-tile .button.next:hover {
    background-color: var(--szekely-light-brown-accent);
    box-shadow: inset 0 0 0 2px var(--szekely-light-brown-accent);
}

@media screen and (min-width: 981px) { .tiles article { width: 50% !important; } }
@media screen and (max-width: 736px) {
    .tiles article { padding: 3em 1.5em 1em 1.5em ; height: auto; min-height: 16em; }
    .tiles article.text-tile { min-height: 16em; }
}
@media screen and (max-width: 480px) {
    /* .tiles { display: block; } */
    /* .tiles article { height: auto; width: 100% !important; min-height: 20em; } */
    /* .tiles article.text-tile { min-height: 20em; } */
}

/* --- Contact Section --- */
#contact {
    background-color: var(--szekely-cream-accent);
    border-top: 2px solid var(--szekely-medium-brown);
    border-bottom: 2px solid var(--szekely-medium-brown);
    padding-top: 2em; padding-bottom: 2em;
}
#contact h2, #contact h3 { /* H2 uses global Cinzel, H3 uses Raleway */
    color: var(--szekely-dark-brown); /* Consistent darker brown for headings */
}
#contact .features article {
    background-color: var(--szekely-beige-bg); padding: 1.5em; border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid var(--szekely-border-color);
    display: flex; flex-direction: column; width: 100%; box-sizing: border-box;
}
#contact .icon.alt:before { 
    background-color: var(--szekely-medium-brown) !important; /* Medium brown icon bg */
    color: var(--szekely-cream-accent) !important; 
}
#contact .icon.major { margin-bottom: 1em; }
#contact .features article iframe {
    display: block; max-width: 100%; height: 300px;  
    border: 1px solid var(--szekely-border-color); border-radius: 3px; margin-top: 1em; 
}
@media screen and (max-width: 736px) {
    #contact .features article iframe { height: 250px; }
}
#contact .features article p { margin-bottom: 1em; flex-grow: 1; }
.sponsor-logo-container { text-align: center; padding-top: 2em; padding-bottom: 1em; }
.sponsor-logo-container p { margin-bottom: 0.5em; color: var(--szekely-dark-brown); font-weight: 600; }
.sponsor-logo img { max-width: 200px; height: auto; }

/* --- Footer --- */
#footer {
    background-color: var(--szekely-dark-brown); color: var(--szekely-text-on-dark);
}
#footer .copyright { color: var(--szekely-beige-bg); opacity: 0.8; }
#footer .copyright li {
    border-left-color: rgba(240, 234, 214, 0.2); color: rgba(240, 234, 214, 0.7);
}
#footer .copyright a {
    color: var(--szekely-cream-accent) !important; border-bottom-color: var(--szekely-cream-accent);
}
#footer .copyright a:hover {
    color: var(--szekely-light-brown-accent) !important; border-bottom-color: var(--szekely-light-brown-accent);
}
#footer .icons a.icon.alt:before {
    background-color: var(--szekely-medium-brown); color: var(--szekely-cream-accent);
}
#footer .icons a.icon.alt:hover:before {
    background-color: var(--szekely-light-brown-accent);
}

/* --- BUTTONS --- */
.button {
    background-color: var(--szekely-medium-brown); /* Main button color medium brown */
    color: var(--szekely-cream-accent) !important; 
    box-shadow: inset 0 0 0 2px var(--szekely-medium-brown); 
    border: none; border-radius: 4px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    font-family: var(--font-secondary-nav-headings); /* Raleway for buttons */
    font-weight: 600; padding: 0 1.75em; height: 3.5em; line-height: 3.5em;
    text-transform: uppercase; /* Keep uppercase for buttons */
}
.button:hover {
    background-color: var(--szekely-light-brown-accent); /* Light brown on hover */
    color: var(--szekely-cream-accent) !important;
    box-shadow: inset 0 0 0 2px var(--szekely-light-brown-accent);
}
/* Special buttons might use a different primary color, e.g., forest green or keep medium brown */
.button.special {
    background-color: var(--szekely-forest-green); /* Example for special button */
    color: var(--szekely-cream-accent) !important;
    box-shadow: inset 0 0 0 2px var(--szekely-forest-green);
}
.button.special:hover {
    background-color: var(--szekely-dark-brown); /* Darker hover for special */
    color: var(--szekely-cream-accent) !important;
    box-shadow: inset 0 0 0 2px var(--szekely-dark-brown);
}
.button.next:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='36px' height='24px' viewBox='0 0 36 24' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23FFF8E7%3B stroke-width: 2px%3B %7D%3C/style%3E%3Cline x1='0' y1='12' x2='34' y2='12' /%3E%3Cline x1='25' y1='4' x2='34' y2='12.5' /%3E%3Cline x1='25' y1='20' x2='34' y2='11.5' /%3E%3C/svg%3E") !important;
}
.button.next:hover:after, .button.next:active:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='36px' height='24px' viewBox='0 0 36 24' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23FFF8E7%3B stroke-width: 2px%3B %7D%3C/style%3E%3Cline x1='0' y1='12' x2='34' y2='12' /%3E%3Cline x1='25' y1='4' x2='34' y2='12.5' /%3E%3Cline x1='25' y1='20' x2='34' y2='11.5' /%3E%3C/svg%3E") !important;
    opacity: 1;
}

/* --- Forms --- */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
select, textarea {
    background: var(--szekely-cream-accent);
    border: 1px solid var(--szekely-border-color);
    color: var(--szekely-text-on-light);
    border-radius: 3px;
    font-family: var(--font-primary-body); /* Merriweather for form inputs */
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
select:focus, textarea:focus {
    border-color: var(--szekely-medium-brown);
    box-shadow: 0 0 0 1px var(--szekely-medium-brown);
}
label {
    color: var(--szekely-dark-brown);
    font-family: var(--font-secondary-nav-headings); /* Raleway for labels */
}

/* Add RGB version of medium brown for opacity, if not already present from a converter */
:root {
    --szekely-medium-brown-rgb: 122, 92, 68; /* Corresponding to #7A5C44 */
}

/* Contact Page Styles */
.contact-section {
    margin: 2em auto;
    padding: 2em;
    max-width: 800px;
    border-bottom: 1px solid rgba(122, 92, 68, 0.2);
}

.contact-section:last-child {
    border-bottom: none;
}

.contact-section h3 {
    margin-bottom: 1em;
}

.contact-section p {
    margin-bottom: 1.5em;
}

.contact-section .button.special {
    font-size: 1.2em;
    padding: 0.8em 2em;
    margin: 1em 0;
    background-color: var(--szekely-medium-brown);
    color: var(--szekely-cream-accent) !important;
}