/* Theming */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Inter:wght@400;600;700&family=Source+Serif+4:wght@400;600;700&display=swap");

:root{
  --white: #f9f9f9;
  --black: #36383F;
  --grey: #85888C;

  /* header baseline (mobilon a hamburgerhez) */
  --header-h: 34px;
}

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

/**********************************************************************************/
body{
  /* base colors */
  --hue-primary:220;
  --sat-primary:100%;
  --cxm-hue-primary:212;
  --cxm-sat-primary:29%;
  --hue-secondary:200;
  --sat-secondary:100%;
  --hue-featured:240;
  --sat-featured:100%;
  --luma-flowText:20%;
  --cxm-luma-flowText:56%;
  --luma-headings:5%;
  --luma-featured:10%;
  --luma-nav:25%;
  --luma-header-bg:80%;
  --cxm-luma-header-bg:36%;
  --luma-main-bg:100%;
  --cxm-luma-main-bg:0%;
  --luma-article-bg:90%;
  --luma-fader:70%;

  --color-main-bg:hsl(
    var(--hue-primary),
    var(--sat-primary),
    var(--cxm-luma-main-bg)
  );

  --cxm_color-main-bg:#e6eaed; /* legacy */

  --color-flowText:hsl(
    var(--hue-primary),
    var(--sat-primary),
    var(--luma-flowText)
  );

  --cxm-color-flowText:hsl(
    var(--cxm-hue-primary),
    var(--cxm-sat-primary),
    var(--cxm-luma-flowText)
  );

  --color-featured:hsl(
    var(--hue-featured),
    var(--sat-featured),
    var(--luma-featured)
  );

  --color-chrome-bg:hsl(
    var(--hue-primary),
    var(--sat-primary),
    var(--luma-header-bg)
  );

  --cxm-color-chrome-bg:hsl(
    var(--cxm-hue-primary),
    var(--cxm-sat-primary),
    var(--cxm-luma-header-bg)
  );

  --color-heading-text:hsl(
    var(--hue-primary),
    var(--sat-primary),
    var(--luma-headings)
  );

  --color-modal-fader:hsla(
    var(--hue-primary),
    var(--sat-primary),
    var(--luma-fader),
    0.8
  );

  --color-modal-bg:hsl(
    var(--hue-primary),
    var(--sat-primary),
    var(--luma-main-bg)
  );

  --color-nav-anchor:hsl(
    var(--hue-featured),
    var(--sat-primary),
    var(--luma-nav)
  );

  --cxm-color-nav-anchor:hsl(
    var(--cxm-hue-primary),
    var(--cxm-sat-primary),
    var(--cxm-luma-flowText)
  );

  --color-article-bg:hsl(
    var(--hue-primary),
    var(--sat-primary),
    var(--luma-article-bg)
  );

  --color-shadow:#0003;
  --shadow-chrome:0 0.25em 1em 0.25em var(--color-shadow);
  --shadow-button:0 0.25em 0.25em 0.125em var(--color-shadow);
  --shadow-formElement-focus:0 0 0.25em 0.125em #038;

  --border-hairline:1px solid #0004;

  /* base measurements */
  --maxWidth-constrain:64rem;
  --maxWidth-flow:40rem;
  --maxWidth-modal:32rem;
  --maxWidth-modalForm:24rem;

  --pad:clamp(0.5em, min(2vw, 4vh), 4em);
  --borderRadius-outer:0.5em;
  --borderRadius-inner:0.25em;
}

/**********************************************************************************/
html, body{
  height: 100%;
  margin: 0;
}

body{
  display: flex;
  flex-direction: column;
}

hr{ display:none; }

body, button, input, table, textarea, select{
  font:normal 1em/1.5 "Poppins", arial, helvetica, sans-serif;
}

html,body,div,p,
ul,ol,li,dl,dt,dd,form,fieldset,caption,
table,tr,td,th,address,blockquote,img{
  margin:0;
  padding:0;
}

/**********************************************************************************/
/* Layout */
main{
  display: flex;
  margin: 0 auto;
  width: 100%;
}

main h2{
  font-size:1.2em;
  margin: 0 auto;
  text-align: center;
}

#fauxBody{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:auto;
}

.fauxBody-bg{
  min-height: 100vh;
  background:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url("/images/background/moon_night_1920_1280.jpg") center / cover no-repeat;
  color: white;
}

#fauxBody > footer{
  font-size:0.85em;
}

/**********************************************************************************/
/* Global elements */
a{ text-decoration: none; }
ul{ list-style: none; }

/**********************************************************************************/
/* Header + Nav (mobil alap) */
.header{
  background-color: var(--black);
  box-shadow: 1px 1px 5px 0px var(--grey);
  position: sticky;
  top: 0;
  width: 100%;

  /* kritikus: ne legyen levágás desktopon sem */
  min-height: var(--header-h);
  height: auto;
}

.logo{
  display: inline-block;
  color: var(--white);
  font-size: 20px;
  margin-left: 10px;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Mobil nav: fixed drawer (a header alatt) */
.nav{
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h);
  bottom: 0;

  background-color: var(--black);
  overflow: auto;

  max-height: 0;
  transition: max-height .5s ease-out;
}

.menu a{
  display: block;
  padding: 8px 30px;
  color: var(--white);
}

.menu a:hover{
  background-color: var(--grey);
}

/* Hamburger icon */
.hamb{
  cursor: pointer;
  float: right;
  padding: 15px 20px;
}

.hamb-line{
  background: var(--white);
  display: block;
  height: 2px;
  position: relative;
  width: 24px;
}

.hamb-line::before,
.hamb-line::after{
  background: var(--white);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.hamb-line::before{ top: 5px; }
.hamb-line::after{ top: -5px; }

.side-menu{ display: none; }

/* Toggle menu */
.side-menu:checked ~ nav{
  max-height: 100vh;
}

.side-menu:checked ~ .hamb .hamb-line{
  background: transparent;
}

.side-menu:checked ~ .hamb .hamb-line::before{
  transform: rotate(-45deg);
  top:0;
}

.side-menu:checked ~ .hamb .hamb-line::after{
  transform: rotate(45deg);
  top:0;
}

/**********************************************************************************/
/* Hero */
.hero{
  flex: 1;
  padding: min(24vh, 12vw) var(--pad);
  font-size: 1.25em;
  background-size: cover;
  color: #000;
}

.hero h2,
.hero p{
  text-shadow:
    -0.25em -0.125em 0.5em #FFF,
     0.25em -0.125em 0.5em #FFF,
     0.25em  0.125em 0.5em #FFF,
    -0.25em  0.125em 0.5em #FFF;
}

.hero section{
  max-width: var(--maxWidth-flow);
  margin: auto;
}

.section_cxm{
  width: 94vw;
  padding: 20px;
  text-align: justify;
}

.hero p{
  margin: 1em 0;
  text-align: justify;
}

.reporter{
  color: #0000cc;
  font-weight: bold;
}

.hero article p{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  font-size: 17px;
}

/* Text helpers */
.text_center{
  display: inline-block;
  width: 100%;
  text-align: center;
}
.text_left{
  display: inline-block;
  width: 100%;
  text-align: left;
}
.text_right{
  display: inline-block;
  width: 100%;
  text-align: right;
}
.text_justify{
  display: inline-block;
  width: 100%;
  text-align: justify;
}

/* Home centering helper (mainClass=parent) */
.parent{
  display: flex;
  align-items: center;       /* függőleges közép */
  justify-content: center;   /* vízszintes közép */
}

/**********************************************************************************/
/* Responsiveness (desktop) */
@media (min-width: 768px){
  /* Header/nav: desktop soros menü */
  .header{
    display: flex;
    align-items: center; /* a nav ne üljön túl magasan */
  }

  .nav{
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    max-height: none;
    overflow: visible;

    float: right;
    width: fit-content;
    margin-left: auto;
    background-color: transparent;
  }

  .menu li{ float: left; }

  .menu a:hover{
    background-color: transparent;
    color: var(--grey);
  }

  .hamb{ display: none; }

  .logo{
    margin-top: 0;
    margin-bottom: 0;
  }
}

/**********************************************************************************/
/* Gallery modal nav layout tweak */
#fauxBody .gmodal__nav{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: .5rem;
}

#fauxBody .gmodal__nav a{
  white-space: nowrap;
}

#fauxBody .gmodal__nav a:first-child{
  margin-right: auto;
}

#fauxBody .gmodal__nav .gmodal__title{
  flex: 0 0 100% !important;
  width: 100%;
  text-align: center;
  margin-top: .25rem;
}

/**********************************************************************************/
/* CV helpers + readability */
#narrow_content{
  max-width: var(--maxWidth-flow);
  margin: 0 auto;
}

.center{ text-align: center; }

.kiem{ font-weight: 700; }

.small{ font-size: 1.1em; }

/* CV reading mode (pageClass=cv-view) */
#fauxBody.cv-view{
  font-family: "Source Serif 4", Georgia, serif;
}

/* címsorok/kiemelések sans-szal */
#fauxBody.cv-view h1,
#fauxBody.cv-view h2,
#fauxBody.cv-view .reporter{
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* CV: tartalom olvasási szélesség + „papír” háttér */
#fauxBody.cv-view #narrow_content{
  max-width: 42ch;
  margin: 0 auto;
  background: rgba(255,255,255,0.85);
  color: #111;
  border-radius: var(--borderRadius-outer);
  padding: calc(var(--pad) * 1.2);
}

/* CV: tipográfia */
#fauxBody.cv-view p,
#fauxBody.cv-view li{
  font-size: 1.05rem;
  line-height: 1.7;
}

#fauxBody.cv-view p{
  margin-bottom: 1.2em;
}

#fauxBody.cv-view p + p{
  margin-top: 1.4em;
}

/* Globálisan letiltott bullet miatt CV-n visszakapcsoljuk */
#fauxBody.cv-view ul{
  list-style: disc;
  margin: 0.75em 0 1.5em 1.25em;
  padding-left: 1.25em;
}

/* FIX: CV oldalon a fenti bullet-visszakapcsolás ne érintse a header navigációt */
#fauxBody.cv-view .header .menu,
#fauxBody.cv-view .header .menu li{
  list-style: none;
  margin: 0;
  padding: 0;
}

#fauxBody.cv-view li{
  margin-bottom: 0.6em;
}

#fauxBody.cv-view h1,
#fauxBody.cv-view h2{
  line-height: 1.25;
  margin: 1.6em 0 0.6em;
}

#fauxBody.cv-view h1{ font-size: 1.3rem; }
#fauxBody.cv-view h2{ font-size: 1.15rem; }

/* CV: main flex viselkedés + hero padding csak CV-n */
#fauxBody.cv-view > main{
  align-items: flex-start;    /* felül indul */
  justify-content: center;    /* vízszint közép */
}

#fauxBody.cv-view > main .hero{
  flex: 0 0 auto;             /* ne töltse ki a magasságot */
  padding: var(--pad);        /* ne legyen óriási hero padding */
}

#fauxBody.blog-view .hero article img{ /* Blog Post images */
  display: block;
  width: 100%;
  max-width: 80%;
  height: auto;
  margin: 1.25rem auto;
}

/**********************************************************************************/
/* Articles reading mode (pageClass=article-view) */

/* Paper card: ugyanaz az elv, mint blog postnál */
#fauxBody.article-view #narrow_content{
  max-width: 60ch; /* olvasási szélesség */
  margin: 0 auto;
  background: rgba(255,255,255,0.85);
  color: #111;
  border-radius: var(--borderRadius-outer);
  padding: calc(var(--pad) * 1.2);
}

/* Cím kisebb + tipográfia */
#fauxBody.article-view h1{
  font-size: 1.15rem; /* kisebb title */
  line-height: 1.25;
  margin: 0 0 .65em;
}

#fauxBody.article-view article p,
#fauxBody.article-view article li{
  font-size: 1.05rem;
  line-height: 1.75;
}

#fauxBody.article-view article p{
  margin: 0 0 1.15em;
}

/* képek az article-ben */
#fauxBody.article-view .hero article img{
  display: block;
  width: 100%;
  max-width: 80%;
  height: auto;
  margin: 1.25rem auto;
}