/*
Theme Name: Magyar Örökség Trust
Theme URI: https://magyarorokseg.hu
Author: Magyar Örökség Trust
Author URI: https://magyarorokseg.hu
Description: Government-grade institutional theme for the Hungarian Heritage Trust. WooCommerce compatible with full shop, cart, and checkout support. Includes responsive mobile navigation, tricolor branding, and OKLCH-based design tokens.
Version: 1.1.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: magyar-orokseg
Tags: government, institutional, woocommerce, e-commerce, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, full-width-template, right-sidebar
*/

:root {
  --crimson: oklch(0.45 0.18 25);
  --crimson-deep: oklch(0.36 0.16 25);
  --forest: oklch(0.42 0.09 145);
  --forest-deep: oklch(0.32 0.08 145);
  --ivory: oklch(0.985 0.008 85);
  --gold: oklch(0.74 0.12 80);
  --slate-deep: oklch(0.28 0.02 250);
  --bg: oklch(0.985 0.008 85);
  --fg: oklch(0.18 0.02 250);
  --muted: oklch(0.95 0.01 80);
  --muted-fg: oklch(0.42 0.02 250);
  --border: oklch(0.88 0.015 80);
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.6;
}
h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
a { color: var(--crimson); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

.container-civic {
  width: 100%;
  margin-inline: auto;
  max-width: 1240px;
  padding-inline: 1.5rem;
}

.tricolor-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--crimson) 0% 33.3%, var(--ivory) 33.3% 66.6%, var(--forest) 66.6% 100%);
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(10px);
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; height: 64px;
}
.site-brand { display: flex; align-items: center; gap: 0.75rem; }
.site-brand .crest { width: 36px; height: 36px; }
.brand-title { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.1; }
.brand-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-fg); }

.primary-menu { display: none; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.primary-menu a {
  display: inline-block; padding: 0.5rem 0.75rem;
  font-size: 0.875rem; color: var(--fg); border-radius: 2px;
  transition: background 0.2s, color 0.2s;
}
.primary-menu a:hover, .primary-menu .current-menu-item > a {
  background: var(--muted); color: var(--crimson); text-decoration: none;
}
.header-meta { display: none; align-items: center; gap: 0.75rem; }
.lang-pill { font-size: 0.75rem; border: 1px solid var(--border); padding: 0.25rem 0.5rem; border-radius: 2px; color: var(--muted-fg); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500;
  border-radius: 2px; border: 1px solid var(--border);
  background: transparent; color: var(--fg); cursor: pointer;
  transition: all 0.2s;
}
.btn:hover { border-color: var(--crimson); color: var(--crimson); text-decoration: none; }
.btn-primary { background: var(--crimson); color: var(--ivory); border-color: var(--crimson); }
.btn-primary:hover { background: var(--crimson-deep); color: var(--ivory); border-color: var(--crimson-deep); }

/* Mobile menu */
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid var(--border);
  background: transparent; border-radius: 2px; cursor: pointer;
}
.menu-toggle svg { width: 20px; height: 20px; }
.mobile-nav {
  position: fixed; inset: 0 0 0 auto;
  width: 80%; max-width: 360px;
  background: var(--bg); z-index: 60;
  transform: translateX(100%); transition: transform 0.3s ease;
  padding: 1.5rem; display: flex; flex-direction: column;
  box-shadow: -10px 0 40px rgba(0,0,0,0.15);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-nav-close { align-self: flex-end; background: none; border: none; cursor: pointer; font-size: 1.5rem; }
.mobile-nav ul { list-style: none; padding: 0; margin: 1rem 0; display: flex !important; flex-direction: column; gap: 0.25rem; }
.mobile-nav ul li { display: block; }
.mobile-nav a {
  display: block; padding: 0.75rem; color: var(--fg);
  font-size: 1rem; border-radius: 2px;
}
.mobile-nav a:hover, .mobile-nav .current-menu-item > a {
  background: var(--muted); color: var(--crimson); text-decoration: none;
}
.mobile-nav .mobile-actions {
  margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0.5rem;
}

@media (min-width: 768px) {
  .primary-menu { display: flex; }
  .header-meta { display: flex; }
  .menu-toggle { display: none; }
}

/* Hero */
.page-hero {
  position: relative; padding: 5rem 0; color: var(--ivory);
  background: linear-gradient(180deg, oklch(0.18 0.04 30 / 0.55), oklch(0.12 0.05 30 / 0.85)),
              url('assets/images/hero-parliament.jpg') center/cover;
}
.page-hero .eyebrow { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-top: 0.5rem; }
.page-hero p { max-width: 640px; opacity: 0.9; }

/* Sections */
.section { padding: 4rem 0; }
.section-alt { background: var(--muted); }
.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--border);
  padding: 1.5rem; border-radius: 4px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover { box-shadow: 0 12px 40px -16px rgba(0,0,0,0.18); transform: translateY(-2px); }
.card img { border-radius: 2px; margin-bottom: 1rem; }
.stat { text-align: center; }
.stat .num { font-family: var(--font-display); font-size: 2.5rem; color: var(--crimson); }
.stat .label { font-size: 0.875rem; color: var(--muted-fg); text-transform: uppercase; letter-spacing: 0.1em; }

.transparency-band {
  background: var(--slate-deep);
  background-image: url('assets/images/folk-pattern.jpg');
  background-blend-mode: multiply;
  background-size: cover;
  color: var(--ivory); padding: 4rem 0;
}

/* Footer */
.site-footer {
  margin-top: 6rem; background: var(--slate-deep); color: oklch(0.92 0.01 80);
}
.footer-inner { padding: 4rem 0; display: grid; gap: 3rem; grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--gold); font-family: var(--font-sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer a { color: rgba(255,255,255,0.8); }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 1.5rem 0; font-size: 0.75rem; color: rgba(255,255,255,0.5);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}

/* Content / posts */
.entry { padding: 3rem 0; }
.entry-title { font-size: 2rem; }
.entry-meta { color: var(--muted-fg); font-size: 0.875rem; margin-bottom: 1rem; }

/* WooCommerce overrides */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--crimson); font-weight: 600; }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--crimson); color: var(--ivory);
  border-radius: 2px; font-weight: 500;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button.alt:hover { background: var(--crimson-deep); color: var(--ivory); }

.woocommerce .woocommerce-message,
.woocommerce-info { border-top-color: var(--forest); }
.woocommerce .woocommerce-message::before,
.woocommerce-info::before { color: var(--forest); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display); font-weight: 500;
}
.woocommerce-breadcrumb { font-size: 0.875rem; color: var(--muted-fg); }

.site-header .cart-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.875rem; color: var(--fg);
}
.site-header .cart-link .count {
  background: var(--crimson); color: var(--ivory);
  font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 999px;
}

/* Forms */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], textarea, select {
  width: 100%; padding: 0.625rem 0.75rem;
  border: 1px solid var(--border); border-radius: 2px;
  font-family: inherit; font-size: 0.875rem; background: #fff;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--crimson); }
label { font-size: 0.875rem; font-weight: 500; }

/* Utilities */
.text-center { text-align: center; }
.eyebrow {
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--crimson);
}
.muted { color: var(--muted-fg); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* =====================================
FINAL WORKING MOBILE MENU
===================================== */

.menu-toggle{
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
}

.menu-toggle svg{
    width:30px;
    height:30px;
}

/* MOBILE */
@media(max-width:768px){

/* hide desktop nav */
.primary-nav{
    display:none;
}

/* hide desktop buttons */
.header-meta{
    display:none;
}

/* show hamburger */
.menu-toggle{
    display:block;
}

.mobile-nav{
    position:fixed;
    top:0;
    right:-100%;
    width:85%;
    max-width:340px;
    height:100vh;
    background:#ffffff;
    z-index:99999999;
    transition:right 0.3s ease;
    overflow-y:auto;
    padding:25px 20px;
    box-shadow:-5px 0 20px rgba(0,0,0,0.15);
}

/* OPEN MENU */
.mobile-nav.active{
    right:0;
}

/* OVERLAY */
.mobile-nav-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.65);
    opacity:0;
    visibility:hidden;
    transition:0.3s;
    z-index:99999998;
    backdrop-filter:blur(2px);
}

/* SHOW OVERLAY */
.mobile-nav-overlay.active{
    opacity:1;
    visibility:visible;
}

/* CLOSE BUTTON */
.mobile-nav-close{
    background:none;
    border:none;
    font-size:32px;
    cursor:pointer;
    margin-bottom:20px;
}

/* MENU */
.mobile-menu{
    list-style:none;
    margin:0;
    padding:0;
}

/* ITEMS */
.mobile-menu li{
    list-style:none;
    margin:0;
    padding:0;
}

/* LINKS */
.mobile-menu li a{
    display:block;
    padding:14px 0;
    border-bottom:1px solid #eee;
    text-decoration:none;
    color:#111;
    font-size:16px;
    font-weight:500;
}

/* ACTION BUTTONS */
.mobile-actions{
    margin-top:25px;
}

/* BUTTONS */
.mobile-actions .btn{
    display:block;
    width:100%;
    text-align:center;
    margin-bottom:12px;
    padding:14px;
    border-radius:4px;
    text-decoration:none;
    box-sizing:border-box;
}

/* SIGN IN */
.mobile-actions .btn:not(.btn-primary){
    border:1px solid #ddd;
    background:#fff;
    color:#111;
}

/* REGISTER */
.mobile-actions .btn-primary{
    background:#b1001c;
    color:#fff;
}

}
/* prevent page showing above mobile menu */

.site-header{
    position:relative;
    z-index:999999;
}

.site-main,
main,
#content{
    position:relative;
    z-index:1;
}

/* =====================================
BLOG LAYOUT
===================================== */

.blog-layout{
    display:flex;
    gap:40px;
    align-items:flex-start;
}

.blog-content{
    flex:1;
    min-width:0;
}

/* Sidebar */

.widget-area.blog-sidebar{
    width:320px;
    flex-shrink:0;
}

.blog-sidebar .widget,
.blog-sidebar .sidebar-widget{
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:8px;
    padding:20px;
    margin-bottom:25px;
}

.blog-sidebar .widget-title,
.blog-sidebar h3{
    margin-bottom:15px;
    font-size:1.2rem;
}

.blog-sidebar ul{
    list-style:none;
    padding:0;
    margin:0;
}

.blog-sidebar li{
    margin-bottom:10px;
}

.blog-sidebar a{
    color:var(--crimson);
    text-decoration:none;
}

.blog-sidebar a:hover{
    text-decoration:underline;
}

/* Blog cards */

.blog-card{
    margin-bottom:40px;
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.blog-card img{
    width:100%;
    height:300px;
    object-fit:cover;
}

.blog-card h2{
    padding:20px 20px 10px;
}

.blog-card p{
    padding:0 20px 20px;
}

/* Single post */

.single-post img,
.entry-content img{
    width:100%;
    height:auto;
    margin-bottom:20px;
}

/* Mobile */

@media(max-width:768px){

    .blog-layout{
        flex-direction:column;
    }

    .widget-area.blog-sidebar{
        width:100%;
    }

}