/*
Theme Name: ІФНТУНГ Вступ 2026
Theme URI: https://nung.edu.ua/
Author: Marian Slabinoha
Description: Статичний односторінковий лендинг для вступної кампанії ІФНТУНГ 2026.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ifntung-vstup
*/

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── DESIGN TOKENS ─── */
:root {
  /* Colors */
  --clr-orange:       #ff530b;  /* primary accent / active tab bg */
  --clr-orange-alt:   #e25022;  /* decorative "вступ 2026" text */
  --clr-orange-muted: #ffdfd1;  /* inactive tab bg */
  --clr-peach:        #ffeee7;  /* card / section bg */
  --clr-black:        #000000;
  --clr-white:        #ffffff;
  --clr-gray-hover:   #595959;  /* button hover state */
  --clr-input-filled: #d9d9d9;  /* filled input bg */

  /* Layout */
  --max-w:   1344px;
  --pad-x:   48px;             /* horizontal page padding */
  --pad-sec: 100px;            /* section vertical padding */
}

/* ─── BASE ─── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Onest', sans-serif;
  color: var(--clr-black);
  background: var(--clr-white);
}
h1{
  font-size:62px;
  line-height: 100%;
  text-transform: uppercase;
}
h2{
  font-size:48px;
  line-height: 100%;
  text-transform: uppercase;
}
h4{
  font-size:24px;
  line-height: 100%;
}
p, ul li{
  font-size: 18px;
}
ul{
  list-style: square url("./images/marker-bullet.svg");
  list-style-position: inside;

}
ul li{
  line-height: 150%;
}
img { display: block; max-width: 100%; }

a { color: inherit; font-size: 18px; text-decoration: none; }
a.orange-link {
  text-decoration: underline;
  color:var(--clr-orange);
  font-weight: bold;
  overflow-wrap: anywhere;   /* long links/URLs wrap instead of overflowing the viewport */
}
a.orange-link:hover{
  color:var(--clr-orange-alt);
}

.container{
  max-width: 1440px;
  margin:0 auto;
  padding: 0 40px;
}
/* Hero section */
#hero{
  background-color: var(--clr-orange);
}
.navbar{
  display:flex;
  flex-direction:row;
  justify-content: space-between;
  align-items: center;
  padding-bottom:40px;
  gap:24px;
}
.sticky{
  position:fixed;
  top:0px;
  left:0;
  width:100%;
  z-index:100;
  background-color: var(--clr-white);
  opacity:0;
  visibility:hidden;
  transform: translateY(-100%);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}
.sticky.visible{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}
.sticky .navbar{
  padding-bottom:0px;
}
.logo{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
}
.logo span{
  font-weight: bold;
  max-width:220px;
}
.nav-links{
  display:flex;
  flex-direction: row;
  align-items:center;
  gap:32px;
}
nav a{
  padding:16px 0px;
}
a.btn{
  color:var(--clr-white);
  background-color: var(--clr-black);
  padding:16px 24px;
  font-weight: bold;
  border-radius:50px;
}
a.btn:hover{
  background-color: var(--clr-gray-hover);
}
/* Burger — hidden on desktop, revealed at ≤768px */
.burger{
  display:none;
  flex-direction: column;
  justify-content: space-between;
  width:28px;
  height:18px;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
}
.burger span{
  display:block;
  width:100%;
  height:2px;
  background-color: var(--clr-black);
  border-radius:2px;
}
/* Fullscreen mobile menu overlay */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:200;
  background-color: var(--clr-white);
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:32px;
  opacity:0;
  visibility:hidden;
  transform: translateY(-100%);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}
.mobile-menu.open{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}
.mobile-menu a{
  font-size:24px;
}
.mobile-menu-close{
  position:absolute;
  top:24px;
  right:24px;
  width:40px;
  height:40px;
  background:none;
  border:none;
  font-size:40px;
  line-height:1;
  color:var(--clr-black);
  cursor:pointer;
}
.hero-content{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: space-between;
  gap:40px;
}
.hero-content div{
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items: flex-start;
}
.hero-content h1,.hero-content p{
  max-width:550px;
}
/*Campus section*/
#campus{
  padding-top:160px;
  display: flex;
  flex-direction: column;
  gap:24px;
  align-items: center;
}

#campus p, #campus h2{
  max-width:700px;
  text-align: center;
}
.campus-images{
  display: flex;
  flex-direction:row;
  align-items:center;
  padding-right:200px;
}
.campus-images img{
  margin-right:-200px;
}
#fellowships{
  padding-top:160px;
  padding-bottom:160px;
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: space-between;
}
#fellowships div{
  display: flex;
  flex-direction: column;
  gap:24px;
}
#fellowships p, #fellowships h2, #fellowships li{
  max-width:550px;
}

#career{
  padding-top:160px;
  padding-bottom:160px;
  background-color: var(--clr-black);
  color:var(--clr-white);
  display:flex;
  flex-direction:column;
  gap:64px;
  align-items: flex-start;
  scroll-margin-top:100px;   /* offset for the fixed sticky header on anchor scroll */
}
.career-container{
  width:100%;
  max-width: 1440px;
  padding:0 40px;
  margin:0 auto;
}
#career p{
  padding-top:32px;
  max-width:600px;
}
.running-ribbon{
  width:100%;
  overflow:hidden;          /* clip the overflowing track — no horizontal scroll */
}
.ribbon-track{
  display:flex;
  flex-direction: row;
  align-items: center;
  width:max-content;        /* shrink-wrap both image sets so 50% == one full set */
  animation: ribbon-scroll 40s linear infinite;
}
.ribbon-track img{
  margin-right:16px;        /* trailing margin on every logo keeps -50% seamless */
}
.running-ribbon:hover .ribbon-track{
  animation-play-state: paused;
}
@keyframes ribbon-scroll{
  from{ transform: translateX(0); }
  to{   transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .ribbon-track{ animation: none; }
}
/* Mobile two-row ribbon — hidden on desktop */
.ribbon-rows{
  display:none;
}
.ribbon-reverse{
  animation-direction: reverse;   /* second row scrolls the other way */
}
.career-proposals{
  display:flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap:24px;
}
.career-proposals div{
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items: flex-start;
  flex:1;
}
#career .career-proposals p{
  padding-top:0px;
}
/* Offset anchor targets so the fixed sticky header doesn't cover them */
#study-programmes,
#documents,
#alumni,
#cta-form{
  scroll-margin-top:100px;
}
#study-programmes{
  padding-top:160px;
  padding-bottom:160px;
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap:64px;
}

#study-programmes div{
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  gap:24px;
}
#study-programmes div.button-container{
  display:flex;
  flex-direction: row;
  align-items:center;
  background-color: var(--clr-peach);
  border-radius:70px;
  padding:8px;
}
a.btn.transparent{
  background-color: transparent;
  color:var(--clr-black);
  padding:16px 32px;
}
a.btn.transparent.active{
  background-color: var(--clr-orange);
  color:var(--clr-black);
}
a.btn.transparent:not(.active):hover{
  background-color: var(--clr-orange-muted);
}
#study-programmes div.departments-container{
  display:none;
  flex-direction: row;
  flex-wrap: wrap;
}
#study-programmes div.departments-container.active{
  display:flex;
}
#study-programmes .department-item{
  display:flex;
  flex-direction: row;
  align-items:center;
  gap:16px;
  width:48%;
  border-radius: 70px;
}
#study-programmes .department-item:hover{
  background-color: var(--clr-peach);
}
.pricing-text{
  padding-top:32px;
  border-top: 1px solid var(--clr-black);
}
#admission-subjects{
  padding-top:160px;
  padding-bottom:160px;
  background-image: url('./images/subjects-background.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display:flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color:var(--clr-white);
  gap:32px;
}
#admission-subjects p{
  max-width: 750px;
}
#documents{
  padding-top:160px;
  padding-bottom:160px;
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap:64px;
}
#documents > div{
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  gap:24px;
  flex:1;
}
#documents div.button-container{
  display:flex;
  flex-direction: row;
  align-items:center;
  background-color: var(--clr-peach);
  border-radius:70px;
  padding:8px;
}
#documents button.btn{
  border:none;
  cursor:pointer;
  font-family: inherit;
  font-size:18px;
  font-weight: bold;
  border-radius:50px;
}
#documents button.btn.transparent{
  background-color: transparent;
  color:var(--clr-black);
  padding:16px 32px;
}
#documents button.btn.transparent.active{
  background-color: var(--clr-orange);
  color:var(--clr-black);
}
#documents button.btn.transparent:not(.active):hover{
  background-color: var(--clr-orange-muted);
}
#documents div.documents-container{
  display:none;
}
#documents div.documents-container.active{
  display:flex;
  flex-direction: column;
  gap:16px;
}
.military-note{
  display:flex;
  flex-direction: row;
  align-items: flex-start;
  gap:16px;
  background-color: var(--clr-white);
  padding:24px;
  border-radius:16px;
}
.military-note img{
  flex-shrink:0;
}
.alumni-block{
  padding:32px 0px;
  background-image: url('./images/alumni-bg.png');
  background-repeat: no-repeat;
  background-position: top left;
}
.alumni-item{
  display:none;
  flex-direction: row;
  justify-content: space-between;
  gap:32px;
  align-items:flex-end;
}
.alumni-item.active{
  display:flex;
}
.alumni-item .arrow-next{
  position:absolute;
  right:0px;
  bottom:0px;
}
.alumni-item div{
  flex:1;
  display:flex;
  flex-direction: column;
  align-items: left;
  gap:32px;
  position:relative;
}
#cta-form{
  padding-top:160px;
  padding-bottom:160px;
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap:64px;
}
#cta-form > div{
  flex:1;
  display:flex;
  flex-direction: column;
  gap:24px;
}
#cta-form h2, #cta-form p{
  max-width:515px;
}
#cta-form form{
  display:flex;
  flex-direction: column;
  gap:16px;
}
#cta-form input,
#cta-form textarea{
  font-family: inherit;
  font-size:18px;
  color:var(--clr-black);
  background-color: var(--clr-white);
  border:1px solid var(--clr-black);
  border-radius:60px;
  padding:16px 24px;
  width:100%;
}
#cta-form textarea{
  border-radius:27px;
  height:135px;
  resize:vertical;
}
/* Non-active state — placeholder shown at 20% opacity */
#cta-form input::placeholder,
#cta-form textarea::placeholder{
  color:var(--clr-black);
  opacity:0.2;
}
/* Active / filled state — solid black text, keep the crisp black border */
#cta-form input:focus,
#cta-form textarea:focus{
  outline:none;
}
#cta-form .btn{
  display:block;
  width:100%;
  text-align:center;
}
/* Submit is a <button>, so it needs the base button look applied directly */
#cta-form button.btn{
  border:none;
  cursor:pointer;
  font-family: inherit;
  font-size:18px;
  font-weight: bold;
  color:var(--clr-white);
  background-color: var(--clr-black);
  padding:16px 24px;
  border-radius:50px;
}
#cta-form button.btn:hover{
  background-color: var(--clr-gray-hover);
}
#cta-form button.btn:disabled{
  opacity:0.6;
  cursor:default;
}
.form-status{
  font-size:16px;
}
.form-status.success{
  color: #1a7f37;
}
.form-status.error{
  color: var(--clr-orange);
}
#faqs{
  padding-top:160px;
  padding-bottom:160px;
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap:64px;
}
#faqs > div{
  flex:1;
}
.faq-list{
  display:flex;
  flex-direction: column;
  gap:32px;
  max-width:771px;
}
.faq-item{
  display:flex;
  flex-direction: column;
  padding-bottom:32px;
  border-bottom:1px solid var(--clr-black);
}
.faq-list .faq-item:last-child{
  border-bottom:none;
  padding-bottom:0;
}
.faq-heading{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: space-between;
  gap:32px;
  cursor:pointer;
}
.faq-chevron{
  position:relative;
  width:32px;
  height:32px;
  flex-shrink:0;
}
.faq-chevron img{
  position:absolute;
  inset:0;
  width:32px;
  height:32px;
  transition: opacity 0.25s ease;
}
/* Closed: show the down chevron, hide the up one */
.faq-chevron .chevron-open{
  opacity:0;
}
/* Open: crossfade to the up chevron */
.faq-item.open .faq-chevron .chevron-closed{
  opacity:0;
}
.faq-item.open .faq-chevron .chevron-open{
  opacity:1;
}
.faq-content{
  display:none;
  flex-direction: column;
  gap:16px;
  padding-top:16px;
  padding-right:64px;
}
.faq-item.open .faq-content{
  display:flex;
}
footer.container-fluid{
  background-image: url('./images/footer-background.png');
  background-position: 0px 120px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: var(--clr-white);
  padding:0px 40px;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:32px;
  text-align: center;
}
footer h4{
  max-width:600px;
}
.footer-menu ul{
  display:flex;
  flex-direction: row;
  align-items:center;
  gap:32px;
  list-style: none;
}
.footer-menu a:hover{
  color: var(--clr-orange);
}
.footer-content{
  width:100%;
  max-width:1440px;
  margin-top:40px;
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap:40px;
  text-align: left;
}
.footer-content > div:first-child{
  display:flex;
  flex-direction: column;
  gap:24px;
  padding-bottom:64px;
}
.footer-subtext{
  font-size:14px;
  opacity:0.6;
}
.footer-subtext:first-of-type{
  margin-top:16px;
}
/* Keep phone numbers from breaking mid-number (they fit on one line) */
.footer-content a.orange-link{
  white-space: nowrap;
}

/* ─── SMOOTH TRANSITIONS ─── */
/* Hover/active colour changes on every link and button */
a,
a.btn,
button.btn{
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
/* Department cards highlight on hover */
#study-programmes .department-item{
  transition: background-color 0.25s ease;
}
/* Form inputs: smooth border/background between non-active and filled states */
#cta-form input,
#cta-form textarea{
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
/* Alumni carousel arrows */
.alumni-item .arrow-next{
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.alumni-item .arrow-next:hover{
  opacity:0.7;
  transform: translateX(4px);
}

/* Fade-in for anything that toggles into view (tabs, carousel, FAQ panels) */
@keyframes fade-in{
  from{ opacity:0; transform: translateY(8px); }
  to{   opacity:1; transform: translateY(0); }
}
#study-programmes div.departments-container.active,
#documents div.documents-container.active,
.alumni-item.active,
.faq-item.open .faq-content{
  animation: fade-in 0.3s ease;
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .sticky{ transition: none; }
}

/* ─── RESPONSIVE: screens smaller than 1440px ─── */
@media (max-width: 1440px){
  .campus-images{
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ─── RESPONSIVE: 1200px → 992px ─── */
@media (max-width: 1199px){
  /* Smaller display headings */
  h1{ font-size:48px; }
  h2{ font-size:40px; }
  .logo span{
    display:none;
  }
  /* Tighter vertical rhythm — trim the 160px section paddings */
  #campus{ padding-top:100px; }
  #fellowships,
  #career,
  #study-programmes,
  #admission-subjects,
  #documents,
  #cta-form,
  #faqs{
    padding-top:100px;
    padding-bottom:100px;
  }

  /* Trim the large column gaps so two-column sections breathe */
  #fellowships,
  #study-programmes,
  #documents,
  #cta-form,
  #faqs{
    gap:40px;
  }
  #career{ gap:40px; }

  /* Ease nav crowding */
  .nav-links{ gap:16px; }

  /* Career cards wrap instead of squeezing to three narrow columns */
  .career-proposals{
    flex-wrap: wrap;
  }
  .career-proposals div{
    flex:1 1 45%;
  }
  .hero-content{
    padding-bottom:32px;
  }
  #study-programmes div.button-container{
    gap:8px;
  }
  #study-programmes .department-item {
    width:45%
  }
}
@media (max-width: 990px){
  .container{
    padding: 0 24px;
  }
  .hero-content, #fellowships, .career-proposals, #study-programmes,
  #documents,#cta-form, #faqs,.footer-content{
    flex-direction: column;
  }
  .campus-images{
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding-right:0px;
    padding-top:50px;
  }
  .campus-images img {

    margin-top:-50px;
    margin-right: 0px;
  }
}

/* ─── RESPONSIVE: mobile ≤768px ─── */
@media (max-width: 768px){
  /* Collapse nav: only logo, Консультація button and burger remain */
  .nav-links a:not(.btn){
    display:none;
  }
  .burger{
    display:flex;
  }

  /* Smaller display headings */
  h1{ font-size:36px; }
  h2{ font-size:30px; }

  /* Shrink the tab pills so all three fit on one row */
  a.btn.transparent,
  #documents button.btn.transparent{
    padding:12px 18px;
  }

  /* Stack remaining row layouts */
  .alumni-item{
    flex-direction: column;
    align-items: stretch;
  }
  #documents>div:first-child{
    order:2;
  }
  #documents>div:last-child{
    order:1;
  }
  #cta-form>div:first-child{
    order:2;
  }
  #cta-form>div:last-child{
    order:1;
  }
  #study-programmes .department-item{
    width:100%;
  }
  #study-programmes div.button-container, #documents div.button-container{
    flex-direction: column;
  }
  #study-programmes div.button-container a, #documents div.button-container a{
    text-align: center;
    width:100%;
  }
  .faq-content{
    padding-right:0;
  }
  .footer-menu ul{
    flex-direction: column;
    gap:16px;
  }

  /* One phone number per row */
  .footer-phones{
    display:flex;
    flex-direction: column;
    gap:8px;
  }
  .footer-phones .phone-sep{
    display:none;
  }

  /* Running ribbon → two animated rows, 4 logos each */
  .ribbon-desktop{
    display:none;
  }
  .ribbon-rows{
    display:flex;
    flex-direction: column;
    gap:24px;
  }
}