/**
 * PAS4 Theme - core styling
 * NOUN brand palette + friendly typography.
 */

/* Friendly, rounded typefaces. Nunito for UI/body, Poppins for headings. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Poppins:wght@500;600;700&display=swap');

:root {
  --pas4-green: #029443;        /* Lighter brand green - main navbar, buttons */
  --pas4-green-dark: #075435;   /* Darker green - top header, footer, links */
  --pas4-red: #E02928;          /* Header bottom border, tertiary accent */
  --pas4-green-darker: #016e32; /* Button hover */
  --pas4-link-blue: #0d6efd;    /* Dropdown menu links */
  --pas4-text: #2b2f2c;
  --pas4-muted: #6c757d;
  --pas4-bg: #ffffff;
  --pas4-light: #f4f6f5;
  --pas4-border: #e3e6e4;

  --pas4-font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pas4-font-heading: 'Poppins', 'Nunito', system-ui, sans-serif;
}

body.pas4-theme {
  color: var(--pas4-text);
  background-color: var(--pas4-bg);
  font-family: var(--pas4-font-body);
  font-size: 1rem;
  line-height: 1.6;
}

/* ---------- Headings ---------- */
.pas4-theme h1,
.pas4-theme h2,
.pas4-theme h3,
.pas4-theme h4,
.pas4-theme h5,
.pas4-theme h6 {
  font-family: var(--pas4-font-heading);
  color: var(--pas4-green-dark);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Two-tone header ----------
 * Upper utility bar (#navbar-top): darker green.
 * Main brand navbar (#navbar-main): lighter green, red bottom border.
 */
.pas4-theme #navbar-top {
  background-color: var(--pas4-green-dark) !important;
  color: #ffffff;
  font-size: 0.9rem;
}

.pas4-theme #navbar-top a,
.pas4-theme #navbar-top .nav-link {
  color: rgba(255, 255, 255, 0.92);
}

.pas4-theme #navbar-top a:hover,
.pas4-theme #navbar-top .nav-link:hover {
  color: #ffffff;
}

.pas4-theme #navbar-main {
  background-color: var(--pas4-green) !important;
  border-bottom: 4px solid var(--pas4-red);
  /* Breathing room between the red border line and the page content. */
  margin-bottom: 1.5rem;
}

.pas4-theme #navbar-main .navbar-nav > .nav-item > .nav-link,
.pas4-theme #navbar-main > .container .navbar-brand,
.pas4-theme #navbar-main .site-branding__name a {
  color: #ffffff;
}

.site-logo img,
.navbar-brand img {
  max-height: 56px;
  width: auto;
}

/* ---------- Navbar dropdown menu items ----------
 * Dropdowns open on a white panel, so links must not stay white.
 * Default: link blue; hover: brand green on a light-green wash.
 */
.pas4-theme #navbar-main .dropdown-menu .dropdown-item {
  color: var(--pas4-link-blue);
}

.pas4-theme #navbar-main .dropdown-menu .dropdown-item:hover,
.pas4-theme #navbar-main .dropdown-menu .dropdown-item:focus {
  background-color: #e6f5ec;
  color: var(--pas4-green);
}

/* ---------- Links ---------- */
.pas4-theme a {
  color: var(--pas4-green-dark);
  text-decoration: none;
}

.pas4-theme a:hover,
.pas4-theme a:focus {
  color: var(--pas4-green);
  text-decoration: underline;
}

/* ---------- Footer (matches the darker top-header green) ---------- */
.pas4-theme .site-footer,
.pas4-theme .region-footer-bottom {
  background-color: var(--pas4-green-dark);
  color: #eef3f0;
}

.pas4-theme .site-footer a,
.pas4-theme .region-footer-bottom a {
  color: #ffffff;
}

/* ---------- Site branding name (aesthetic + accessible) ---------- */
.pas4-theme #navbar-main .site-branding__name,
.pas4-theme #navbar-main .site-branding__name a,
.pas4-theme .site-branding__name,
.pas4-theme .site-branding__name a {
  color: #ffffff;
  font-family: var(--pas4-font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.pas4-theme .site-branding__name a:hover,
.pas4-theme .site-branding__name a:focus {
  color: #eafff2;
  text-decoration: none;
}

/* Optional slogan, if enabled. */
.pas4-theme .site-branding__slogan {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  margin: 0;
}

/* ---------- Page background below the footer (soft dark, not pure black) ---------- */
body.pas4-theme {
  background-color: #1f2421;
}

.pas4-theme #page-wrapper,
.pas4-theme #page {
  background-color: #ffffff;
}


/* ============================================================
   PAS4 — Accordion views: inline field labels + values
   Paste into the pas4_theme stylesheet (e.g. css/style.css)
   and flush caches (drush cr or Admin > Configuration >
   Performance > Clear all caches).
 
   Applies to any view rendered with the Views Bootstrap
   Accordion format (fields inside .card-body). Table views
   and other formats are untouched.
   ============================================================ */
 
/* --- Each field row: label column + value on one line ------- */
.view .card-body .views-field {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  line-height: 1.4;
}
 
/* --- Label column: fixed width so all values align ---------- */
.view .card-body .views-field .views-label {
  flex: 0 0 220px;          /* label column width — adjust to taste */
  max-width: 45%;           /* never let the label eat the whole row on narrow cards */
  font-weight: 600;
  color: #333;
}
 
/* --- Value: takes the remaining space ------------------------ */
.view .card-body .views-field .field-content {
  flex: 1 1 auto;
  min-width: 0;             /* lets long titles wrap instead of overflowing */
  overflow-wrap: break-word;
}
 
/* --- Empty values: keep the row height tidy ------------------ */
.view .card-body .views-field .field-content:empty::after {
  content: "\2014";         /* em dash placeholder for missing data */
  color: #999;
}
 
/* --- Accordion header button: nicer title row ---------------- */
.view .panel-group .card .btn-link {
  font-weight: 600;
  text-decoration: none;
  text-align: left;
  padding: 0;
}
 
.view .panel-group .card .btn-link a {
  text-decoration: none;
}
 
/* --- Card spacing --------------------------------------------- */
.view .panel-group .card {
  margin-bottom: 0.75rem;
}
 
/* --- Mobile: stack label above value -------------------------- */
@media (max-width: 575.98px) {
  .view .card-body .views-field {
    flex-direction: column;
    gap: 0;
    margin-bottom: 0.6rem;
  }
 
  .view .card-body .views-field .views-label {
    flex: none;
    max-width: none;
  }
}
 
/* ============================================================
   ALTERNATIVE (simpler): if you prefer the value to flow
   right after the label (no aligned column), delete the flex
   rules above and use just this instead:
 
   .view .card-body .views-field .field-content {
     display: inline;
   }
   .view .card-body .views-field .views-label {
     font-weight: 600;
     margin-right: 0.35rem;
   }
   ============================================================ */
 
/* ============================================================
   OPTIONAL: uniform colons after every label.
   Your labels are inconsistent ("Semester of Submission" has
   no colon, others do). If you remove the colons from the
   label text in each view's field settings, uncomment this
   to add them uniformly:
 
   .view .card-body .views-field .views-label::after {
     content: ":";
   }
   ============================================================ */

   /* ============================================================
   PAS4 — Exposed filter forms: one consistent look for ALL views
   v2 — aesthetic border + shading on the filter box.
   Replaces the previous pas4-exposed-filters.css entirely.
   Clear caches after updating (drush cr).
   ============================================================ */

/* Accent colour used for the filter box top border.
   Matches the PAS4 green (headings / Apply button) — adjust once here. */
:root {
  --pas4-accent: #1e7e34;
}

/* --- Filter box: soft card with accent top edge + shadow ----- */
form.views-exposed-form > .d-flex {
  gap: 0.75rem 1.25rem;          /* row gap / column gap between filters */
  align-items: flex-end;         /* controls + Apply button share a baseline */
  background: linear-gradient(180deg, #ffffff 0%, #f4f6f5 100%);
  border: 1px solid #dee2e1;
  border-top: 3px solid var(--pas4-accent);
  border-radius: 0.5rem;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.05),
    0 4px 14px rgba(16, 24, 40, 0.08);
  padding: 1.1rem 1.4rem 1.25rem;
  margin-bottom: 1.5rem;
}

/* Bootstrap's mb-3 utility uses !important, so match it here.
   Spacing between filters now comes from the gap above instead. */
form.views-exposed-form .js-form-item,
form.views-exposed-form .form-actions {
  margin-bottom: 0 !important;
}

/* --- Labels: small, bold, sitting above each control --------- */
form.views-exposed-form label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.25rem;
  white-space: nowrap;
}

/* --- Controls: consistent sizing, gentle depth ---------------- */
form.views-exposed-form .form-select,
form.views-exposed-form .form-control {
  min-width: 11rem;
  font-size: 0.9375rem;
  border-color: #ced4da;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.04);
}

form.views-exposed-form .form-select:focus,
form.views-exposed-form .form-control:focus {
  border-color: var(--pas4-accent);
  box-shadow: 0 0 0 0.2rem rgba(30, 126, 52, 0.15);
}

/* Text inputs render at their size="" attribute (size="60" on the
   Programme Code autocomplete makes it enormous). Cap them: */
form.views-exposed-form input.form-control {
  width: auto;
  max-width: 16rem;
}

/* Keep long dropdowns (e.g. Study Centre) from stretching wide */
form.views-exposed-form .form-select {
  max-width: 16rem;
}

/* --- Apply button --------------------------------------------- */
form.views-exposed-form .form-actions .btn {
  min-width: 6rem;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.15);
}

/* --- Mobile: stack filters full-width ------------------------- */
@media (max-width: 575.98px) {
  form.views-exposed-form > .d-flex {
    flex-direction: column;
    align-items: stretch;
  }

  form.views-exposed-form .js-form-item,
  form.views-exposed-form .form-select,
  form.views-exposed-form .form-control,
  form.views-exposed-form input.form-control {
    width: 100%;
    max-width: none;
  }

  form.views-exposed-form .form-actions .btn {
    width: 100%;
  }
}