/* ==========================================================================
   VIZTÉR.HU - Core Design System & Global Styles
   Typography: Jost (Google Fonts / Local fallback)
   Color Palette:
     - Primary: #032034 (Deep navy / water dark)
     - Primary Dark: #021624
     - Accent Blue: #1a6ea8
     - Accent Teal: #0d8b99
     - Light Gray Bg: #f1f2f7
     - Card Border: #e5e7eb
     - Text Primary: #032034
     - Text Body: #2d3748
     - Text Muted: #64748b
     - White: #ffffff
   ========================================================================== */

@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DM_Sans/DMSans-VariableFont_opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DM_Sans/DMSans-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../assets/fonts/Jost/Jost-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../assets/fonts/Jost/Jost-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Fallback / Google Font Import */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --color-primary: #032034;
  --color-primary-dark: #011422;
  --color-primary-light: #0d3654;
  --color-primary-2: #04345c;
  /* --color-primary-3: #062c46; */
  --color-accent-blue: #166ba2;
  --color-accent-teal: #107e8d;
  --color-text-main: #032034;
  --color-text-body: #1e293b;
  --color-text-muted: #64748b;
  --color-bg-light: #f1f2f7;
  --color-bg-white: #ffffff;
  --color-border: #e3e5ef;
  --color-border-subtle: #f1f5f9;

  /* Category Palette */
  --color-cat-epitett-kornyezet: #1b81c9;
  --color-cat-kultura: #8593a5;
  --color-cat-varos: #04345c;
  --color-cat-taj: #067a00;
  --color-cat-tudas: #333d43;
  
  --font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading: 'DM Sans', 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  --max-width: clamp(950px, 78.5vw, 1464px);
  --max-width: clamp(950px, 76.5vw, 1464px);
  --content-width: 920px;
  --content-width: 780px;
  --border-radius-sm: 0.375rem;
  --border-radius-md: 0.75rem;
  --border-radius-lg: 1.25rem;
  --border-radius-xl: 1.5rem;
  
  --shadow-sm: 0 2px 8px rgba(3, 32, 52, 0.04);
  --shadow-md: 0 8px 24px rgba(3, 32, 52, 0.08);
  --shadow-lg: 0 16px 40px rgba(3, 32, 52, 0.12);
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: 1.0625rem;
  /* line-height: 1.65; */
  line-height: 1.4;
  color: var(--color-text-body);
  background-color: #fefefe;
  background-image: url('../assets/images/bg-2.webp');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  /* font-family: var(--font-family-heading); */
  font-family: var(--font-family-base);
  color: var(--color-primary);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  margin-bottom: 1.5rem;
}

h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: 1.25rem;
}

h3 {
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

h4, h5, h6 {
  margin-bottom: 0.75rem;
}

p {
  margin-bottom: 1.25rem;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: var(--font-family);
  cursor: pointer;
  border: none;
  background: none;
}

/* Layout Containers */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.container-narrow {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.main-content {
  flex: 1 0 auto;
  padding-bottom: 4rem;
}

/* Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-bold { font-weight: 500; }
.font-semibold { font-weight: 500; }
.font-medium { font-weight: 500; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.05em; }

.section-spacing {
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.wp-block-image :where(figcaption) {
    margin-bottom: 1em;
    margin-top: -1.5rem;
}

/* Framed Highlight Block */
.wp-block-group.vizter-framed-highlight,
.wp-block-group.is-style-framed-highlight {
  background-color: #f1f2f7;
  border-radius: 0;
  padding: 2.25rem 2.5rem;
  margin: 2.5rem 0;
}

.wp-block-group.vizter-framed-highlight > *,
.wp-block-group.is-style-framed-highlight > * {
  border-left: 8px solid #032034;
  padding-left: 1.75rem;
  margin-top: 0!important;
  margin-bottom: 0!important;
}

.wp-block-group.vizter-framed-highlight h2,
.wp-block-group.vizter-framed-highlight h3,
.wp-block-group.vizter-framed-highlight h4,
.wp-block-group.is-style-framed-highlight h2,
.wp-block-group.is-style-framed-highlight h3,
.wp-block-group.is-style-framed-highlight h4 {
  color: #032034;
  font-size: 1.625rem;
  font-weight: normal;
  /* margin-bottom: 1rem; */
}

.wp-block-group.vizter-framed-highlight p:last-child,
.wp-block-group.is-style-framed-highlight p:last-child {
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* What is it Box Block */
.wp-block-group.vizter-what-is-it,
.wp-block-group.is-style-what-is-it {
  background-color: #f1f2f7;
  border-radius: 20px;
  padding: 1.75rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 3rem 0;
}

/* Doboz 1 (fehér kerettel) Block */
.wp-block-group.vizter-box-1-bordered,
.wp-block-group.box-1-bordered,
.wp-block-group.is-style-box-1-bordered,
.wp-block-group.is-style-box-1 {
  background-color: #f1f2f7;
  border: 1px solid #ffffff;
  border-radius: 20px;
  padding: 1.75rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 3rem 0;
}

.wp-block-group.vizter-box-1-bordered h1,
.wp-block-group.vizter-box-1-bordered h2,
.wp-block-group.vizter-box-1-bordered h3,
.wp-block-group.vizter-box-1-bordered h4,
.wp-block-group.vizter-box-1-bordered h5,
.wp-block-group.vizter-box-1-bordered h6,
.wp-block-group.box-1-bordered h1,
.wp-block-group.box-1-bordered h2,
.wp-block-group.box-1-bordered h3,
.wp-block-group.box-1-bordered h4,
.wp-block-group.box-1-bordered h5,
.wp-block-group.box-1-bordered h6,
.wp-block-group.is-style-box-1-bordered h1,
.wp-block-group.is-style-box-1-bordered h2,
.wp-block-group.is-style-box-1-bordered h3,
.wp-block-group.is-style-box-1-bordered h4,
.wp-block-group.is-style-box-1-bordered h5,
.wp-block-group.is-style-box-1-bordered h6,
.wp-block-group.is-style-box-1 h1,
.wp-block-group.is-style-box-1 h2,
.wp-block-group.is-style-box-1 h3,
.wp-block-group.is-style-box-1 h4,
.wp-block-group.is-style-box-1 h5,
.wp-block-group.is-style-box-1 h6 {
  margin-top: 0 !important;
}

/* Doboz 1 (fehér kerettel, block) Block */
.wp-block-group.vizter-box-1-bordered-block,
.wp-block-group.box-1-bordered-block,
.wp-block-group.is-style-box-1-bordered-block,
.wp-block-group.is-style-box-1-block {
  background-color: #f1f2f7;
  border: 1px solid #ffffff;
  border-radius: 20px;
  padding: 1.75rem 2.5rem;
  display: block;
  margin: 3rem 0;
}

.wp-block-group.vizter-box-1-bordered-block h1,
.wp-block-group.vizter-box-1-bordered-block h2,
.wp-block-group.vizter-box-1-bordered-block h3,
.wp-block-group.vizter-box-1-bordered-block h4,
.wp-block-group.vizter-box-1-bordered-block h5,
.wp-block-group.vizter-box-1-bordered-block h6,
.wp-block-group.box-1-bordered-block h1,
.wp-block-group.box-1-bordered-block h2,
.wp-block-group.box-1-bordered-block h3,
.wp-block-group.box-1-bordered-block h4,
.wp-block-group.box-1-bordered-block h5,
.wp-block-group.box-1-bordered-block h6,
.wp-block-group.is-style-box-1-bordered-block h1,
.wp-block-group.is-style-box-1-bordered-block h2,
.wp-block-group.is-style-box-1-bordered-block h3,
.wp-block-group.is-style-box-1-bordered-block h4,
.wp-block-group.is-style-box-1-bordered-block h5,
.wp-block-group.is-style-box-1-bordered-block h6,
.wp-block-group.is-style-box-1-block h1,
.wp-block-group.is-style-box-1-block h2,
.wp-block-group.is-style-box-1-block h3,
.wp-block-group.is-style-box-1-block h4,
.wp-block-group.is-style-box-1-block h5,
.wp-block-group.is-style-box-1-block h6 {
  margin-top: 0 !important;
}

/* Doboz 1 (fehér kerettel, block) Block */
.wp-block-group.vizter-box-1-bordered-block,
.wp-block-group.box-1-bordered-block,
.wp-block-group.is-style-box-1-bordered-block,
.wp-block-group.is-style-box-1-block {
  background-color: #f1f2f7;
  border: 1px solid #ffffff;
  border-radius: 20px;
  padding: 1.75rem 2.5rem;
  display: block;
  margin: 3rem 0;
}

.wp-block-group.vizter-box-1-bordered-block h1,
.wp-block-group.vizter-box-1-bordered-block h2,
.wp-block-group.vizter-box-1-bordered-block h3,
.wp-block-group.vizter-box-1-bordered-block h4,
.wp-block-group.vizter-box-1-bordered-block h5,
.wp-block-group.vizter-box-1-bordered-block h6,
.wp-block-group.box-1-bordered-block h1,
.wp-block-group.box-1-bordered-block h2,
.wp-block-group.box-1-bordered-block h3,
.wp-block-group.box-1-bordered-block h4,
.wp-block-group.box-1-bordered-block h5,
.wp-block-group.box-1-bordered-block h6,
.wp-block-group.is-style-box-1-bordered-block h1,
.wp-block-group.is-style-box-1-bordered-block h2,
.wp-block-group.is-style-box-1-bordered-block h3,
.wp-block-group.is-style-box-1-bordered-block h4,
.wp-block-group.is-style-box-1-bordered-block h5,
.wp-block-group.is-style-box-1-bordered-block h6,
.wp-block-group.is-style-box-1-block h1,
.wp-block-group.is-style-box-1-block h2,
.wp-block-group.is-style-box-1-block h3,
.wp-block-group.is-style-box-1-block h4,
.wp-block-group.is-style-box-1-block h5,
.wp-block-group.is-style-box-1-block h6 {
  margin-top: 0 !important;
}

/* Inverse Text Box Block */
.wp-block-group.vizter-inverse-box,
.wp-block-group.is-style-inverse-box {
  background-color: #032034;
  color: #ffffff;
  border-radius: 20px;
  padding: 2rem 2.25rem;
  margin-bottom: 2rem;
}

.wp-block-group.vizter-inverse-box h3,
.wp-block-group.vizter-inverse-box p,
.wp-block-group.is-style-inverse-box h3,
.wp-block-group.is-style-inverse-box p {
  color: #ffffff;
}

/* Standard Lists (wp-block-list / ul / ol) - Bullet points aligned with text column */
.wp-block-list:not(.is-style-highlight-list):not(.highlight-list),
ul:not(.is-style-highlight-list):not(.highlight-list):not(.nav-links):not(.share-links) {
  padding-left: 1.25rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  list-style-position: outside;
}

ol:not(.is-style-highlight-list):not(.highlight-list):not(.nav-links) {
  padding-left: 1.35rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  list-style-position: outside;
}

.wp-block-list:not(.is-style-highlight-list):not(.highlight-list) li,
ul:not(.is-style-highlight-list):not(.highlight-list):not(.nav-links):not(.share-links) li,
ol:not(.is-style-highlight-list):not(.highlight-list):not(.nav-links) li {
  margin-bottom: 0.35rem;
}

/* Highlight List Block Style */
.wp-block-list.is-style-highlight-list,
ul.is-style-highlight-list {
  list-style: none !important;
  list-style-type: none !important;
  margin: 2.25rem 0 2.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1.5rem 2.25rem;
  background: #f1f2f7;
  border-radius: 12px;
}
ul.is-style-highlight-list {
  padding-left: 2.25rem !important;
}

.wp-block-list.is-style-highlight-list li,
ul.is-style-highlight-list li {
  position: relative;
  padding: 0.7rem 0 0.7rem 2.05rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: #1e293b;
  border-bottom: 1px solid rgba(3, 32, 52, 0.24);
  list-style: none !important;
  list-style-type: none !important;
}

.wp-block-list.is-style-highlight-list li:first-child,
ul.is-style-highlight-list li:first-child {
  padding-top: 0.5rem;
}

.wp-block-list.is-style-highlight-list li:last-child,
ul.is-style-highlight-list li:last-child {
  border-bottom: none;
  padding-bottom: 0.5rem;
}

.wp-block-list.is-style-highlight-list li::before,
ul.is-style-highlight-list li::before {
  content: ' ';
  position: absolute;
  background-color: var(--color-primary-2);
  border-radius: 100%;
  left: 0;
  top: 1.25rem;
  width: 0.65rem;
  height: 0.65rem;
  /* background-image: url('assets/icons/vizter-point.svg'); */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.wp-block-list.is-style-highlight-list li:first-child::before,
ul.is-style-highlight-list li:first-child::before {
  top: 1.1rem;
}

.wp-block-list.is-style-highlight-list li strong,
ul.is-style-highlight-list li strong {
  color: #032034;
  font-weight: 600;
}

/* Lead Text Block Style */
.wp-block-paragraph.is-style-lead-text,
p.is-style-lead-text {
  font-size: 1.25rem !important;
  line-height: 1.7 !important;
}

/* Author Box */
.wp-block-group.vizter-author-box {
  background-color: #f1f2f7;
  border-radius: 20px;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem 0;
}

/* Pre-Footer Brand */
.vizter-pre-footer {
  display: flex;
  justify-content: center;
  margin-bottom: -65px;
  position: relative;
  z-index: 10;
}

.vizter-pre-footer img {
  max-width: 440px;
  height: auto;
}

/* ==========================================================================
   Gutenberg Color Palette Helper Classes
   ========================================================================== */
.has-primary-color { color: var(--color-primary) !important; }
.has-primary-background-color { background-color: var(--color-primary) !important; }
.has-primary-border-color { border-color: var(--color-primary) !important; }

.has-primary-light-color { color: var(--color-primary-light) !important; }
.has-primary-light-background-color { background-color: var(--color-primary-light) !important; }
.has-primary-light-border-color { border-color: var(--color-primary-light) !important; }

.has-primary-2-color { color: var(--color-primary-2) !important; }
.has-primary-2-background-color { background-color: var(--color-primary-2) !important; }
.has-primary-2-border-color { border-color: var(--color-primary-2) !important; }

.has-primary-dark-color { color: var(--color-primary-dark) !important; }
.has-primary-dark-background-color { background-color: var(--color-primary-dark) !important; }
.has-primary-dark-border-color { border-color: var(--color-primary-dark) !important; }

.has-accent-blue-color { color: var(--color-accent-blue) !important; }
.has-accent-blue-background-color { background-color: var(--color-accent-blue) !important; }
.has-accent-blue-border-color { border-color: var(--color-accent-blue) !important; }

.has-accent-teal-color { color: var(--color-accent-teal) !important; }
.has-accent-teal-background-color { background-color: var(--color-accent-teal) !important; }
.has-accent-teal-border-color { border-color: var(--color-accent-teal) !important; }

.has-text-body-color { color: var(--color-text-body) !important; }
.has-text-body-background-color { background-color: var(--color-text-body) !important; }
.has-text-body-border-color { border-color: var(--color-text-body) !important; }

.has-text-muted-color { color: var(--color-text-muted) !important; }
.has-text-muted-background-color { background-color: var(--color-text-muted) !important; }
.has-text-muted-border-color { border-color: var(--color-text-muted) !important; }

.has-bg-light-color { color: var(--color-bg-light) !important; }
.has-bg-light-background-color { background-color: var(--color-bg-light) !important; }
.has-bg-light-border-color { border-color: var(--color-bg-light) !important; }

.has-bg-white-color { color: var(--color-bg-white) !important; }
.has-bg-white-background-color { background-color: var(--color-bg-white) !important; }
.has-bg-white-border-color { border-color: var(--color-bg-white) !important; }

.has-border-color { color: var(--color-border) !important; }
.has-border-background-color { background-color: var(--color-border) !important; }
.has-border-border-color { border-color: var(--color-border) !important; }

.has-border-subtle-color { color: var(--color-border-subtle) !important; }
.has-border-subtle-background-color { background-color: var(--color-border-subtle) !important; }
.has-border-subtle-border-color { border-color: var(--color-border-subtle) !important; }

.cky-box-bottom-left {
    position: absolute;
    bottom: unset;
    left: 50%!important;
    right: unset;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 600px;
    max-width: min(90%, 600px);
    z-index: 1000!important;
}
.cky-consent-container .cky-consent-bar {
    /* min-height: 100%; */
}
.cky-overlay {
   display: block;
   z-index: 100!important;
    background: rgba(0,0,0,1) !important; 
}
.cky-overlay.cky-hide {
   display: none;
}
.cky-overlay.cky-hide:has(+ .cky-revisit-hide) {
   display: block;
}
.cky-btn-accept, .cky-btn-preferences {
  color: #fff!important;
	border-color: #032034!important;
  background-color: #032034!important;
}
.cky-btn-customize {
  color: #032034!important;
	border-color: #032034!important;
  background-color: #FFFFFF!important;
}