/* =========================================================
   KR — front-page.css (Home: marquee behind, big image, intro section, remark at end)
   Colors/size from Customizer → Front Page Colors.
   ========================================================= */

/* -------------------------
   Home: header & footer — lighter than main content (use scheme secondary)
   -------------------------- */
body.home .kr-site-header {
  background: var(--kr-fp-footer-bg);
  color: var(--kr-fp-text);
  border-bottom: 1px solid var(--kr-fp-border);
  backdrop-filter: none;
}
body.home .kr-site-title__first,
body.home .kr-site-title__rest,
body.home .kr-menu a,
body.home .kr-icon-btn,
body.home .kr-lang-btn,
body.home .kr-site-tagline {
  color: var(--kr-fp-text);
}
body.home .kr-nav-toggle,
body.home .kr-icon-btn,
body.home .kr-lang-btn {
  border-color: var(--kr-fp-border);
  background: transparent;
  color: var(--kr-fp-text);
}
@media (hover: hover) {
  body.home .kr-menu a:hover,
  body.home .kr-menu a:focus,
  body.home .kr-icon-btn:hover,
  body.home .kr-lang-btn:hover {
    background: var(--kr-fp-hover);
    color: var(--kr-fp-text-alt);
  }
}
body.home .kr-menu .sub-menu,
body.home .kr-dropdown__panel {
  background: var(--kr-fp-bg);
  border-color: var(--kr-fp-border);
}
body.home .kr-dropdown__item {
  color: var(--kr-fp-text);
}
@media (max-width: 900px) {
  body.home .kr-nav {
    background: var(--kr-fp-footer-bg);
    border-color: var(--kr-fp-border);
  }
  body.home .kr-drawer-close,
  body.home .kr-nav .kr-icon-btn,
  body.home .kr-nav .kr-lang-btn {
    border-color: var(--kr-fp-border);
    background: transparent;
    color: var(--kr-fp-text);
  }
}

/* -------------------------
   Home: hero — marquee at very back, image only (bigger), bottom sits on intro
   -------------------------- */
body.home .kr-hero--profile {
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem) 0;
  min-height: min(75vh, 680px);
  background: var(--kr-fp-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
}
/* Scrolling name: very back, behind image */
body.home .kr-hero--profile .kr-marquee__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--kr-marquee-opacity, 0.12);
  pointer-events: none;
}
body.home .kr-hero--profile .kr-marquee__track {
  color: var(--kr-fp-outline);
  mix-blend-mode: normal;
}
/* Fixed name: static text behind image; gradient fill in slow motion */
body.home .kr-hero__name-back {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0.5;
  pointer-events: none;
  font-family: var(--kr-font-latin);
  font-weight: 900;
  font-size: clamp(4rem, 14vw, var(--kr-fp-fixed-name-size, 11rem));
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px var(--kr-fp-fixed-name-color, var(--kr-fp-outline));
  paint-order: stroke fill;
  white-space: nowrap;
  opacity: 0.28;
  background: linear-gradient(
    90deg,
    var(--kr-fp-fixed-name-color, rgba(255,255,255,.15)) 0%,
    var(--kr-accent, #d0a058) 18%,
    rgba(232,201,122,.9) 38%,
    var(--kr-accent, #d0a058) 58%,
    var(--kr-fp-fixed-name-color, rgba(255,255,255,.15)) 76%,
    var(--kr-accent, #d0a058) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kr-hero-name-back-gradient 12s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.home .kr-hero__name-back { animation: none; }
}
@keyframes kr-hero-name-back-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
html[lang^="ar"] body.home .kr-hero__name-back,
body.rtl.home .kr-hero__name-back {
  text-transform: none;
  letter-spacing: 0;
}
body.home .kr-hero--profile .kr-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(var(--kr-max), 92vw);
  background: transparent;
}
body.home .kr-hero--profile::before {
  display: none;
}

body.home .kr-hero__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
  padding: 0;
}
body.home .kr-hero__media {
  order: 1;
  justify-content: center;
  width: 100%;
  /* Image bottom overlaps onto the intro section */
  margin-bottom: clamp(-4rem, -12vw, -8rem);
}
/* Portrait: admin size (--kr-fp-hero-image-width), transparent, no frame; bottom overlaps intro */
body.home .kr-hero__media .kr-hero__frame {
  width: min(var(--kr-fp-hero-image-width, 520px), 92vw);
  max-width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  padding: 0;
  background: transparent !important;
  box-shadow: none;
  border: none;
}
body.home .kr-hero__media .kr-hero__frame-inner {
  border-radius: 0;
  border: none;
  background: transparent !important;
}
body.home .kr-hero__media .kr-hero__frame-inner::before {
  display: none;
}
body.home .kr-hero__media .kr-hero__mat {
  background: transparent !important;
  padding: 0;
  border: none;
}
body.home .kr-hero__media .kr-hero__img {
  object-fit: contain;
  object-position: center bottom;
  filter: none;
  background: transparent;
}
body.home .kr-hero__media .kr-hero__placeholder {
  background: transparent;
}

@media (max-width: 900px) {
  body.home .kr-hero--profile {
    min-height: auto;
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 1.5rem) 0;
  }
  body.home .kr-hero__media .kr-hero__frame {
    width: min(var(--kr-fp-hero-image-width, 520px), 92vw);
  }
}
@media (max-width: 480px) {
  body.home .kr-hero__media .kr-hero__frame {
    width: min(92vw, var(--kr-fp-hero-image-width, 520px));
  }
}

/* -------------------------
   Intro section — different background, wider container, name in caps, remark at end
   -------------------------- */
.kr-fp-intro {
  background: var(--kr-fp-intro-bg);
  color: var(--kr-fp-intro-text);
  padding: clamp(2.5rem, 8vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2rem, 6vw, 3.5rem);
  position: relative;
  z-index: 2;
}
/* Container: admin-set max-width (ch), responsive */
.kr-fp-intro__container {
  width: 100%;
  max-width: min(var(--kr-fp-intro-container-max, 90ch), 92vw);
  margin-inline: auto;
  text-align: center;
}
.kr-fp-intro__title {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--kr-fp-intro-heading);
  margin: 0 0 1rem;
  line-height: 1.1;
}
body.kr-fp-intro-caps .kr-fp-intro__title {
  text-transform: uppercase;
}
html[lang^="ar"] .kr-fp-intro__title,
body.rtl .kr-fp-intro__title {
  letter-spacing: 0;
}
body.kr-fp-intro-caps html[lang^="ar"] .kr-fp-intro__title,
body.kr-fp-intro-caps body.rtl .kr-fp-intro__title {
  text-transform: none;
}

.kr-fp-intro__slogan {
  color: var(--kr-fp-intro-text);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  margin: 0 0 1.25rem;
  opacity: 0.95;
}
body.kr-fp-intro-caps .kr-fp-intro__slogan {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kr-fp-intro__body {
  color: var(--kr-fp-intro-text);
  line-height: 1.7;
  margin: 0 0 1.5rem;
  max-width: min(var(--kr-fp-intro-body-max, 90ch), 92vw);
  margin-inline: auto;
}
body.kr-fp-intro-caps .kr-fp-intro__body {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
html[lang^="ar"] .kr-fp-intro__body,
body.rtl .kr-fp-intro__body {
  text-transform: none;
}
.kr-fp-intro__body p {
  margin: 0 0 1rem;
}
.kr-fp-intro__body p:last-child {
  margin-bottom: 0;
}

/* CTAs: scheme-specific (accent and outline use dedicated vars so they differ per theme) */
.kr-fp-intro__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 2rem;
}
body.home.kr-fp-scheme-light .kr-fp-intro__cta .kr-btn--accent,
body.home.kr-fp-scheme-dark .kr-fp-intro__cta .kr-btn--accent {
  background: var(--kr-fp-cta-accent-bg);
  border-color: var(--kr-fp-cta-accent-bg);
  color: var(--kr-fp-cta-accent-color);
}
body.home.kr-fp-scheme-light .kr-fp-intro__cta .kr-btn--outline,
body.home.kr-fp-scheme-dark .kr-fp-intro__cta .kr-btn--outline {
  border-color: var(--kr-fp-cta-outline-border);
  color: var(--kr-fp-cta-outline-color);
  background: transparent;
}
@media (hover: hover) {
  body.home.kr-fp-scheme-light .kr-fp-intro__cta .kr-btn--accent:hover,
  body.home.kr-fp-scheme-dark .kr-fp-intro__cta .kr-btn--accent:hover {
    background: var(--kr-fp-cta-accent-color);
    border-color: var(--kr-fp-cta-accent-color);
    color: var(--kr-fp-cta-accent-bg);
  }
  body.home.kr-fp-scheme-light .kr-fp-intro__cta .kr-btn--outline:hover,
  body.home.kr-fp-scheme-dark .kr-fp-intro__cta .kr-btn--outline:hover {
    background: var(--kr-fp-cta-outline-border);
    border-color: var(--kr-fp-cta-outline-border);
    color: var(--kr-fp-cta-accent-color);
  }
}

/* Remark block — "This website serves as..." — distinct design, admin size/color (per scheme) */
.kr-fp-intro__remark {
  color: var(--kr-fp-remark-color);
  font-size: var(--kr-fp-remark-font-size, 1rem);
  margin: 0;
  max-width: 58ch;
  margin-inline: auto;
  padding: 1.25rem 1.5rem;
  border-inline-start: 3px solid var(--kr-fp-footer-bg);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 8px 8px 0;
  text-align: start;
  font-style: italic;
}
body.rtl .kr-fp-intro__remark,
html[dir="rtl"] .kr-fp-intro__remark {
  border-inline-start: none;
  border-inline-end: 3px solid var(--kr-fp-footer-bg);
  border-radius: 8px 0 0 8px;
}
body.kr-fp-intro-caps .kr-fp-intro__remark {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-style: normal;
}
html[lang^="ar"] .kr-fp-intro__remark,
body.rtl .kr-fp-intro__remark {
  text-align: start;
}
.kr-fp-intro__remark p {
  margin: 0 0 0.5rem;
}
.kr-fp-intro__remark p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .kr-fp-intro__cta {
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  .kr-fp-intro__cta a {
    width: 100%;
    max-width: 280px;
    justify-content: center;
    min-height: 48px;
  }
  .kr-fp-intro__remark {
    padding-top: 1.25rem;
  }
}

/* -------------------------
   Home: footer (contrasting bar, same nav as header)
   -------------------------- */
body.home .kr-site-footer {
  background: var(--kr-fp-footer-bg);
  border-top: 1px solid var(--kr-fp-border);
}
body.home .kr-footer__inner {
  padding-block: 1rem 1.25rem;
}
body.home .kr-footer-bottom {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
body.home .kr-footer-bottom__left {
  color: var(--kr-fp-text);
  opacity: 0.85;
  font-size: 0.9rem;
}
body.home .kr-footer-bottom__right {
  width: 100%;
  justify-content: center;
}
body.home .kr-footer-menu a {
  color: var(--kr-fp-text);
  opacity: 0.95;
}
@media (hover: hover) {
  body.home .kr-footer-menu a:hover {
    opacity: 1;
  }
}
@media (min-width: 600px) {
  body.home .kr-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  body.home .kr-footer-bottom__right {
    width: auto;
    justify-content: flex-end;
  }
}