/* ============================================================
   European Drosophila Society Journal
   PLOS Biology-inspired theme for Ubiquity Press / Next.js
   Uses semantic selectors only (hashed classnames are build-time)
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

/* ============================================================
   ROOT VARIABLES
   ============================================================ */
:root {
  --plos-teal:        #19857b;
  --plos-teal-dark:   #0f5c55;
  --plos-teal-light:  #e8f5f4;
  --plos-navy:        #2F338C; /* keep journal's existing primary */
  --plos-accent:      #e67e22;
  --text-main:        #1a1a1a;
  --text-muted:       #666666;
  --border:           #e0e0e0;
  --bg-light:         #f7f9f9;
  --white:            #ffffff;
}

/* ============================================================
   GLOBAL BASE
   ============================================================ */
html, body {
  font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: var(--text-main) !important;
  background: var(--white) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

a {
  color: var(--plos-teal) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--plos-teal-dark) !important;
  text-decoration: underline !important;
}

/* ============================================================
   TOP UTILITY BAR (mobile nav strip)
   The outermost sticky bar at the very top
   ============================================================ */
body > div > div:first-child {
  background: var(--plos-teal-dark) !important;
}

/* Nav links in the top utility bar */
body > div > div:first-child nav a {
  color: rgba(255,255,255,0.85) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
}

body > div > div:first-child nav a:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ============================================================
   MAIN HEADER (sticky nav with search + account)
   ============================================================ */
header {
  background: var(--plos-teal) !important;
  border-bottom: 3px solid var(--plos-teal-dark) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* All nav links inside header */
header nav a,
header nav button {
  color: rgba(255,255,255,0.9) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

header nav a:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Dropdown menus */
header nav ul ul {
  background: var(--plos-teal-dark) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}

header nav ul ul a {
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.88rem !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

header nav ul ul a:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
}

/* Search input in header */
header input[type="text"] {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 3px !important;
  color: #ffffff !important;
  font-family: 'Source Sans 3', sans-serif !important;
  padding: 7px 12px !important;
}

header input[type="text"]::placeholder {
  color: rgba(255,255,255,0.6) !important;
}

header input[type="text"]:focus {
  background: rgba(255,255,255,0.25) !important;
  outline: none !important;
  border-color: rgba(255,255,255,0.6) !important;
}

/* Search submit button */
header button[type="submit"] {
  background: transparent !important;
  color: rgba(255,255,255,0.8) !important;
  border: none !important;
}

/* ============================================================
   BRAND NAVIGATION (logo bar + Start Submission)
   section[aria-label="Brand navigation"]
   ============================================================ */
section[aria-label="Brand navigation"] {
  background: var(--white) !important;
  border-bottom: 2px solid var(--border) !important;
  padding: 12px 0 !important;
}

/* Journal title h1 (visually hidden but present) */
section[aria-label="Brand navigation"] h1 {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: var(--plos-teal-dark) !important;
}

/* Start Submission button */
section[aria-label="Brand navigation"] a[href*="submission"] > div,
section[aria-label="Brand navigation"] a[href*="wizard"] > div {
  background: var(--plos-teal) !important;
  border-radius: 4px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.02em !important;
  padding: 10px 20px !important;
  transition: background 0.2s !important;
}

section[aria-label="Brand navigation"] a[href*="submission"] > div:hover,
section[aria-label="Brand navigation"] a[href*="wizard"] > div:hover {
  background: var(--plos-teal-dark) !important;
}

/* ============================================================
   CAROUSEL
   section[aria-labelledby="carousel-title"]
   ============================================================ */
section[aria-labelledby="carousel-title"] {
  border-bottom: 3px solid var(--plos-teal) !important;
}

/* Carousel slide title overlay */
section[aria-labelledby="carousel-title"] article h3 {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
  line-height: 1.3 !important;
}

/* Carousel nav buttons (prev/next/pause) */
section[aria-labelledby="carousel-title"] nav button {
  background: rgba(25,133,123,0.85) !important;
  border: none !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  transition: background 0.2s !important;
}

section[aria-labelledby="carousel-title"] nav button:hover {
  background: var(--plos-teal) !important;
}

/* ============================================================
   SOCIAL SHARE ROW
   nav[aria-label="Share"]
   ============================================================ */
nav[aria-label="Share"] {
  background: var(--bg-light) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 0 !important;
}

/* ============================================================
   MAIN CONTENT SECTIONS
   Sections use aria-labelledby targeting known IDs
   ============================================================ */

/* All homepage content sections */
section[aria-labelledby="current-issue"],
section[aria-labelledby="about"],
section[aria-labelledby="announcements"],
section[aria-labelledby="table-of-contents"] {
  padding: 32px 0 !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Section headings */
section[aria-labelledby="current-issue"] h2,
section[aria-labelledby="about"] h2,
section[aria-labelledby="announcements"] h2,
section[aria-labelledby="table-of-contents"] h2 {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--plos-teal-dark) !important;
  border-bottom: 2px solid var(--plos-teal) !important;
  padding-bottom: 10px !important;
  margin-bottom: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* About section body text */
section[aria-labelledby="about"] p {
  font-size: 1rem !important;
  color: var(--text-muted) !important;
  max-width: 760px !important;
  line-height: 1.7 !important;
}

/* ============================================================
   CURRENT ISSUE BUTTON
   ============================================================ */
section[aria-labelledby="current-issue"] a > div {
  background: var(--plos-teal-light) !important;
  border: 2px solid var(--plos-teal) !important;
  border-radius: 4px !important;
  color: var(--plos-teal-dark) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  transition: background 0.2s !important;
}

section[aria-labelledby="current-issue"] a > div:hover {
  background: var(--plos-teal) !important;
  color: #ffffff !important;
}

section[aria-labelledby="current-issue"] a > div span {
  color: inherit !important;
}

/* ============================================================
   ANNOUNCEMENTS
   ============================================================ */
section[aria-labelledby="announcements"] article {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--plos-teal) !important;
  border-radius: 0 4px 4px 0 !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  transition: box-shadow 0.2s !important;
}

section[aria-labelledby="announcements"] article:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

section[aria-labelledby="announcements"] article h3 {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--plos-teal-dark) !important;
  margin-bottom: 8px !important;
}

section[aria-labelledby="announcements"] article h3:hover {
  color: var(--plos-teal) !important;
}

section[aria-labelledby="announcements"] article p {
  font-size: 0.92rem !important;
  color: var(--text-muted) !important;
}

/* Read more links */
section[aria-labelledby="announcements"] footer a {
  color: var(--plos-teal) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
}

/* Published date */
section[aria-labelledby="announcements"] time,
section[aria-labelledby="announcements"] div[class*="AMuyK"] {
  color: var(--text-muted) !important;
  font-size: 0.82rem !important;
}

/* More announcements button */
section[aria-labelledby="announcements"] > a > div {
  background: transparent !important;
  border: 2px solid var(--plos-teal) !important;
  border-radius: 4px !important;
  color: var(--plos-teal) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  display: inline-flex !important;
  margin-top: 16px !important;
  transition: all 0.2s !important;
}

section[aria-labelledby="announcements"] > a > div:hover {
  background: var(--plos-teal) !important;
  color: #ffffff !important;
}

/* ============================================================
   TABLE OF CONTENTS (article listings)
   ============================================================ */

/* Section group headings (Research Articles, Book Reviews) */
section[aria-labelledby="table-of-contents"] h3 {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--plos-teal) !important;
  padding: 6px 10px !important;
  background: var(--plos-teal-light) !important;
  border-radius: 2px !important;
  margin-bottom: 12px !important;
}

/* Article list items */
section[aria-labelledby="table-of-contents"] ul > li > article {
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  background: var(--white) !important;
  transition: box-shadow 0.2s !important;
}

section[aria-labelledby="table-of-contents"] ul > li > article:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
}

/* Article titles */
section[aria-labelledby="table-of-contents"] article a[href*="/articles/"] {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--plos-teal-dark) !important;
  line-height: 1.4 !important;
}

section[aria-labelledby="table-of-contents"] article a[href*="/articles/"]:hover {
  color: var(--plos-teal) !important;
  text-decoration: none !important;
}

/* Author names */
section[aria-labelledby="table-of-contents"] address {
  color: var(--text-muted) !important;
  font-size: 0.88rem !important;
  font-style: normal !important;
  margin-top: 4px !important;
}

/* Publication dates */
section[aria-labelledby="table-of-contents"] time {
  color: var(--text-muted) !important;
  font-size: 0.82rem !important;
}

/* ============================================================
   SIDEBAR (Latest / Popular Articles)
   aside element
   ============================================================ */
aside {
  border-left: 1px solid var(--border) !important;
  padding-left: 24px !important;
}

/* Tab buttons (Latest Articles / Popular Articles) */
aside [role="tablist"] button {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  border-bottom: 3px solid transparent !important;
  padding: 10px 14px !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  transition: all 0.2s !important;
}

aside [role="tablist"] button[aria-selected="true"],
aside [role="tablist"] button[data-state="active"] {
  color: var(--plos-teal-dark) !important;
  border-bottom-color: var(--plos-teal) !important;
}

/* Sidebar article items */
aside article {
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 0 !important;
}

/* Sidebar article titles */
aside article a[href*="/articles/"] {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--plos-teal-dark) !important;
  line-height: 1.4 !important;
}

aside article a[href*="/articles/"]:hover {
  color: var(--plos-teal) !important;
}

aside address {
  font-style: normal !important;
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
}

aside time {
  font-size: 0.8rem !important;
  color: var(--text-muted) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: #1a2a2a !important;
  color: rgba(255,255,255,0.7) !important;
  padding: 36px 0 20px !important;
  margin-top: 40px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 0.88rem !important;
}

footer a {
  color: rgba(255,255,255,0.7) !important;
}

footer a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

footer li {
  color: rgba(255,255,255,0.7) !important;
}

/* Powered by Ubiquity strip */
footer a[href*="ubiquity.pub"] {
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.8rem !important;
}

footer a[href*="ubiquity.pub"]:hover {
  color: rgba(255,255,255,0.8) !important;
}

/* ============================================================
   GENERAL BUTTONS & LINKS (sitewide)
   ============================================================ */

/* Any prominent CTA div inside an anchor */
a > div[class*="bZRhvx"],
a > div[class*="cmumxy"] {
  transition: background 0.2s, color 0.2s !important;
}

/* Form inputs sitewide */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select {
  font-family: 'Source Sans 3', sans-serif !important;
  border-radius: 3px !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
  outline: 2px solid var(--plos-teal) !important;
  outline-offset: 1px !important;
}

/* ============================================================
   SKIP LINK (accessibility)
   ============================================================ */
a[href="#main-content"] {
  background: var(--plos-teal) !important;
  color: #ffffff !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  border-radius: 0 0 4px 4px !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  html, body {
    font-size: 15px !important;
  }

  section[aria-labelledby="current-issue"],
  section[aria-labelledby="about"],
  section[aria-labelledby="announcements"],
  section[aria-labelledby="table-of-contents"] {
    padding: 20px 0 !important;
  }

  aside {
    border-left: none !important;
    border-top: 2px solid var(--border) !important;
    padding-left: 0 !important;
    padding-top: 20px !important;
    margin-top: 20px !important;
  }

  section[aria-labelledby="carousel-title"] article h3 {
    font-size: 1.2rem !important;
  }
}