/* =====================================================================
   FLAIR Lab website: site-specific styles on top of Massively (main.css)
   Accent colour: METU red #c8102e (also set in main.css)

   1. Background and panels      6. Research page
   2. Navigation                 7. Projects page
   3. Home banner (intro)        8. Teaching, Team, PI pages
   4. Home content               9. Justified body text
   5. Home footer
   ===================================================================== */


/* ---------- 1. Background and panels ---------- */

/* F-22 background photo with a dark tint so the white text stays legible */
#wrapper > .bg {
  background-image: url("../../images/overlay.png"), linear-gradient(0deg, rgba(10, 20, 35, 0.45), rgba(10, 20, 35, 0.25)), url("../../images/f22.jpg");
}

/* Fallback background if main.js (which creates the .bg layer) does not run */
#wrapper {
  background-color: #212931;
  background-image: url("../../images/overlay.png"), linear-gradient(0deg, rgba(10, 20, 35, 0.45), rgba(10, 20, 35, 0.25)), url("../../images/f22.jpg");
  background-size: auto, auto, 100% auto;
  background-position: center, center, top center;
  background-repeat: repeat, no-repeat, no-repeat;
}

/* Content panels 30 % transparent so the background shows through; blur keeps text readable */
#main {
  background-color: rgba(255, 255, 255, 0.70);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#footer {
  background-color: rgba(242, 242, 242, 0.75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Copyright line readable over the background photo */
#copyright { color: rgba(255, 255, 255, 0.8); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }


/* ---------- 2. Navigation ---------- */

#nav ul.links li.active { background-color: rgba(255, 255, 255, 0.70); }
#nav ul.links li.lang a { font-weight: 900; }

/* Tighter menu so the links, the language switch and six icons fit on one line */
#nav ul.links li a { padding: 0 1.35rem; letter-spacing: 0.1rem; }
#nav ul.icons li { padding-right: 0.25rem; }
#nav ul.icons li .icon:before { width: 2rem; }

/* Academic profile icons (Academicons), styled like the theme's icons */
#nav ul.icons li a.ai-link {
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  line-height: 2.25rem;
  text-align: center;
  border-bottom: 0;
  color: #ffffff;
  font-size: 1.3rem;
  vertical-align: middle;
  transition: color 0.2s ease-in-out;
}
#nav ul.icons li a.ai-link:hover { color: #c8102e; }
#nav ul.icons li a.ai-link .ai { line-height: 2.25rem; }
#nav ul.icons li a.ai-link .label { display: none; }

@media screen and (max-width: 1440px) {
  #nav ul.links li a { padding: 0 1rem; font-size: 0.72rem; letter-spacing: 0.06rem; }
  #nav ul.icons li a.ai-link { width: 2rem; font-size: 1.15rem; }
  #nav ul.icons li .icon:before { width: 1.9rem; font-size: 1.1rem; }
}
@media screen and (max-width: 1150px) {
  #nav ul.links li a { padding: 0 0.7rem; font-size: 0.65rem; }
}


/* ---------- 3. Home banner (intro) ---------- */

/* Tablets and desktops: the flair-banner-dark image */
#intro .lab-banner-img {
  display: block;
  width: 100%;
  max-width: 62rem;
  height: auto;
  margin: 0 auto 2.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

/* Phones: an HTML version of the banner (logo + text), hidden when the image is shown */
#intro .lab-banner {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  max-width: 62rem;
  margin: 0 auto 2.5rem;
  padding: 2rem 2.75rem 2rem 2.25rem;
  text-align: left;
  background: rgba(8, 21, 38, 0.72);
  border-bottom: 5px solid #c8102e;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
#intro .lab-banner-img + .lab-banner { display: none; }
#intro .lab-banner .lab-text,
#intro .lab-banner p { text-align: left; }
#intro .lab-mark {
  flex: 0 0 10rem;
  width: 10rem;
  height: 10rem;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 20px rgba(0, 0, 0, 0.35);
}
#intro .lab-banner h1 { margin: 0; font-size: 4.5rem; line-height: 0.95; letter-spacing: 0.3rem; }
#intro .lab-banner h1 span { font-weight: 400; color: #ffb3b0; letter-spacing: 0.15rem; }
#intro .lab-banner p { margin: 0; }
#intro .lab-banner .lab-full {
  margin-top: 0.9rem;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  color: #e6edf6;
}
#intro .lab-banner .lab-full b { color: #ff6a5c; }
#intro .lab-banner .lab-inst {
  display: inline-block;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 3px solid #c8102e;
  font-size: 0.95rem;
  color: #b9c7d8;
}

@media screen and (max-width: 980px) {
  /* no forced full-screen intro, so the banner starts right under the Menu button */
  #intro { min-height: 0; justify-content: flex-start; padding: 6rem 3rem 3rem 3rem; }
  /* the theme fades the intro out once the content is in view; keep the banner visible */
  #intro.hidden { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  #intro.hidden + #header + #nav { opacity: 1; transform: none; }
  /* the banner already shows the lab name, so the small header logo box is not needed on Home */
  #intro + #header { display: none; }

  #intro .lab-banner { gap: 1.5rem; padding: 1.5rem; margin-bottom: 1.5rem; }
  #intro .lab-mark { flex-basis: 7rem; width: 7rem; height: 7rem; border-radius: 10px; }
  #intro .lab-banner h1 { font-size: 3.25rem; }
}
@media screen and (max-width: 736px) {
  #intro { padding: 5rem 1.25rem 2rem 1.25rem; }
  #intro .lab-banner-img { display: none; }
  #intro .lab-banner-img + .lab-banner { display: flex; }
  #intro .lab-banner { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.25rem; margin-bottom: 1rem; }
  #intro .lab-mark { flex-basis: 5.5rem; width: 5.5rem; height: 5.5rem; }
  #intro .lab-banner h1 { font-size: 2.5rem; }
  #intro .lab-banner .lab-full { font-size: 0.7rem; letter-spacing: 0.08rem; }
  #intro .lab-banner .lab-inst { font-size: 0.8rem; }
}


/* ---------- 4. Home content ---------- */

#main > .post.featured header.major h2 { font-size: 3.25rem; line-height: 1.25; }

/* Welcome paragraph */
#main > .post.featured p.lab-intro { font-size: 1.05rem; line-height: 2; margin-bottom: 3rem; }

/* "Why FLAIR?" box */
.name-story {
  margin: 0 0 1rem;
  padding: 1.75rem 2rem 1.5rem;
  border-left: 4px solid #c8102e;
  background: rgba(255, 255, 255, 0.45);
  text-align: left;
}
.name-story h3 { margin: 2.5rem 0 0.75rem; }
.name-story p { margin: 0; font-size: 0.95rem; line-height: 1.9; }

@media screen and (max-width: 980px) {
  #main > .post.featured header.major h2 { font-size: 2.5rem; }
}
@media screen and (max-width: 736px) {
  #main > .post.featured header.major h2 { font-size: 1.75rem; }
  #main > .post.featured p.lab-intro { font-size: 0.95rem; line-height: 1.9; }
  .name-story { padding: 1.25rem; }
}


/* ---------- 5. Home footer (prospective students and contact) ---------- */

#footer, #footer p, #footer ul.apply-list li { color: #3d4650; }
#footer h3, #footer a, #footer strong, #footer b { color: #1e252d; }

/* Application checklist */
#footer ul.apply-list { margin: -0.5rem 0 2rem; padding-left: 1.25rem; }
#footer ul.apply-list li { padding-left: 0.25rem; margin-bottom: 0.35rem; font-size: 0.8rem; line-height: 1.9; }

/* Address / Phone / Email share the column height equally */
#footer .contact p { margin-bottom: 0; }
#footer > section.split.contact p { text-align: left; }
#footer > section.split.contact > section { flex: 1 1 0; align-items: center; padding-top: 2rem; padding-bottom: 2rem; }
#footer > section.split.contact > section:first-child,
#footer > section.split.contact > section:last-child { padding-top: 2rem; padding-bottom: 2rem; }
#footer > section.split.contact > section.alt { align-items: center; }
#footer > section.split.contact > section.alt > :last-child { margin-top: 0; }

/* Wider left column (Prospective students), narrower contact column */
@media screen and (min-width: 981px) {
  #footer > section:first-child { flex-basis: 58%; flex-grow: 0; padding-left: 3.5rem; padding-right: 3.5rem; }
  #footer > section.split.contact { flex-basis: 42%; flex-grow: 0; }
  #footer > section.split.contact > section,
  #footer > section.split.contact > section:first-child,
  #footer > section.split.contact > section:last-child { padding-left: 3rem; padding-right: 2.5rem; }
}


/* ---------- 6. Research page ---------- */

/* Dark band: heading, introduction, Outlook and Methods & Tools over research-hero.svg */
#main > .post.gnc-band {
  color: #d5deea;
  padding: 5rem 8rem 4rem;
  background:
    linear-gradient(90deg, rgba(4,9,20,0.95) 0%, rgba(4,9,20,0.85) 46%, rgba(4,9,20,0.1) 62%, rgba(4,9,20,0) 100%),
    linear-gradient(180deg, rgba(4,9,20,0) 0%, rgba(4,9,20,0) 38%, rgba(4,9,20,0.9) 60%, rgba(4,9,20,0.97) 100%),
    #050b18 url("../../images/research-hero.svg") -120px top / auto 540px no-repeat;
}
#main > .post.gnc-band header.major { margin-bottom: 2rem; text-align: left; max-width: 58%; }
#main > .post.gnc-band header.major h2 { color: #fff; border-bottom-color: rgba(255,255,255,0.35); }
#main > .post.gnc-band header.major p { color: #ffb3b0; font-style: normal; margin-top: 1rem; text-align: left; }
#main > .post.gnc-band p.band-text { color: #d5deea; max-width: 58%; margin-bottom: 1.75rem; font-size: 1rem; line-height: 2; }

/* Outlook (four numbered directions) inside the band */
#main > .post.gnc-band .band-outlook { max-width: none; margin-top: 4rem; text-align: left; }
#main > .post.gnc-band h3.outlook-title {
  color: #fff;
  font-size: 1.4rem;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(255,255,255,0.25);
}
#main > .post.gnc-band p.outlook-lead { color: #c9d6e6; font-style: italic; margin: 0 0 2rem; max-width: none; }
.outlook { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; text-align: left; }
.direction { position: relative; padding: 0.25rem 0 0 4.75rem; }
.direction .num {
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
  color: #ff6a5c;
}
.direction h3 { font-size: 0.9rem; margin: 0 0 0.5rem; color: #fff; }
.direction p { font-size: 0.85rem; line-height: 1.85; color: #c9d6e6; }

/* Methods & Tools pills */
h3.tools-title { margin-top: 2.5rem; text-align: left; color: #fff; }
ul.tools { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
ul.tools li {
  padding: 0.25rem 0.9rem;
  border: solid 2px rgba(255,255,255,0.35);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 0.02rem;
  color: #e6edf6;
}

/* Research Themes cards */
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: left; }
.theme {
  border: solid 2px #eeeeee;
  border-top: 4px solid #c8102e;
  padding: 1.75rem 1.5rem 1.25rem;
  background: #fff;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.theme:hover { box-shadow: 0 10px 30px rgba(15, 37, 65, 0.12); transform: translateY(-3px); }
.theme .ticon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: #0f2541;
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.theme h3 { font-size: 0.95rem; line-height: 1.5; margin: 0 0 0.75rem; }
.theme p { font-size: 0.85rem; line-height: 1.85; text-align: left; margin-bottom: 0.75rem; }
.theme p.kw {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid #eee;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-weight: 900;
  font-size: 0.65rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: #c8102e;
}

@media screen and (max-width: 1280px) {
  .themes { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 980px) {
  #main > .post.gnc-band {
    padding: 4rem 4rem 3rem;
    background:
      linear-gradient(180deg, rgba(4,9,20,0.55) 0%, rgba(4,9,20,0.92) 40%, rgba(4,9,20,0.97) 100%),
      #050b18 url("../../images/research-hero.svg") 70% top / auto 480px no-repeat;
  }
  #main > .post.gnc-band header.major,
  #main > .post.gnc-band p.band-text { max-width: none; }
}
@media screen and (max-width: 736px) {
  #main > .post.gnc-band { padding: 3rem 2rem 2.5rem; }
  .themes, .outlook { grid-template-columns: 1fr; }
  .direction { padding-left: 3.75rem; }
  .direction .num { font-size: 2rem; }
}


/* ---------- 7. Projects page ---------- */

/* Card: one image beside the text, alternating sides */
article.project { border: solid 2px #eeeeee; margin: 0 0 3rem; text-align: left; }
article.project:last-child { margin-bottom: 0; }
article.project.split { display: grid; grid-template-columns: 5fr 7fr; align-items: stretch; }
article.project.split.reverse { grid-template-columns: 7fr 5fr; }
article.project.split.reverse .pimage { order: 2; }
article.project.split .pimage { display: block; position: relative; border-bottom: 0; min-height: 300px; background: #0f2541; }
article.project.split .pimage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
article.project.split .pimage.contain { background: linear-gradient(180deg, #3d406d 0%, #8f92bd 100%); }
article.project.split .pimage.contain img { object-fit: contain; }
article.project.split .pimage.contain.light { background: #ffffff; }
article.project.split .pimage.contain.light img { padding: 0.75rem 0.5rem 2.25rem; object-position: center top; }
article.project.split .pcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.3rem 0.6rem;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
}
.pbody { padding: 1.75rem 2rem 1.5rem; }
article.project.split .pbody { display: flex; flex-direction: column; justify-content: center; }
.pbody h3 { margin: 0 0 1rem; font-size: 1rem; line-height: 1.5; }
.pbody .pmeta {
  margin: 0 0 0.75rem;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: #888;
  text-align: left;
}
.pbody p:last-child { margin-bottom: 0; }

/* Ongoing / Completed badges */
.status {
  display: inline-block;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
  padding: 0 0.5rem;
  margin-right: 0.4rem;
  border: solid 2px currentColor;
  border-radius: 2px;
}
.status.ongoing { color: #c8102e; }
.status.done { color: #2b9a4f; }

@media screen and (max-width: 980px) {
  article.project.split, article.project.split.reverse { grid-template-columns: 1fr; }
  article.project.split.reverse .pimage { order: 0; }
  article.project.split .pimage { min-height: 240px; }
  /* tall stacked figure: show at natural height instead of squeezing it into the image strip */
  article.project.split .pimage.contain.light img { position: static; display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; }
}
@media screen and (max-width: 736px) {
  .pbody { padding: 1.25rem; }
}


/* ---------- 8. Teaching, Team and Principal Investigator pages ---------- */

/* Teaching: course codes should not wrap */
td.code { white-space: nowrap; }
/* Turkish page: official English course name under the Turkish one */
td .en-name { display: block; font-size: 0.8em; font-style: italic; color: #6b7480; }

/* Team: student names */
ul.theses li { margin-bottom: 0.75rem; }
ul.theses .who { font-weight: 700; }

/* PI: profile card (photo appears if images/photo.jpg exists) */
.profile-card {
  display: flex;
  gap: 2rem;
  align-items: center;
  text-align: left;
  margin: 0 0 2.5rem;
  padding: 1.5rem 1.75rem;
  border-left: 4px solid #c8102e;
  background: rgba(255, 255, 255, 0.45);
}
.profile-card .photo { flex: 0 0 130px; width: 130px; height: 160px; object-fit: cover; border-radius: 4px; }
.profile-card p { margin: 0; text-align: left; }
.profile-card .ptitle {
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: #212931;
}
.profile-card .prole { font-size: 0.9rem; color: #666; margin-top: 0.25rem; }
@media screen and (max-width: 736px) {
  .profile-card { flex-direction: column; align-items: flex-start; padding: 1.25rem; }
}

/* PI: publication list */
ol.pubs { padding-left: 1.5rem; }
ol.pubs li { margin-bottom: 0.9rem; padding-left: 0.25rem; }
ol.pubs .ptitle { font-weight: 700; }
ol.pubs .venue { font-style: italic; }


/* ---------- 9. Justified body text (Home, Research, Projects; all screen sizes) ----------
   Hyphenation (by page language) keeps word gaps small in narrow columns. */
#main > .post.featured p.lab-intro,
.name-story p,
#footer > section:first-child p,
#footer ul.apply-list li,
#main > .post.gnc-band p.band-text,
#main > .post.gnc-band p.outlook-lead,
.direction p,
.theme p:not(.kw),
article.project .pbody p:not(.pmeta) {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}