/*
Theme Name: N.W. Posthumus Institute - Leiden
Theme URI: https://posthumusinstitute.org
Author: Leiden University
Description: Reconstruction of the N.W. Posthumus Institute website layout (formerly built on Utrecht University's UU2014 theme) rebuilt as a standalone theme in Leiden University house style. Keeps the original information architecture, page furniture and content classes so imported content renders unchanged, while replacing all Utrecht branding with Leiden brand tokens.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: posthumus-leiden
Tags: two-columns, custom-menu, custom-logo, featured-images, translation-ready, accessibility-ready
*/

/* ==========================================================================
   1. Design tokens
   --------------------------------------------------------------------------
   Two identities sit side by side here, deliberately:

   * The INSTITUTE's own house colour (magenta #831e84) carries the site, as
     it did on the original Utrecht-hosted version. It is the institute's own
     colour, not an Utrecht one, so it survives the move.
   * LEIDEN house style supplies the university furniture: the Faculty of
     Humanities logo and colour, the typefaces, and the colophon.
     Source: https://huisstijl.universiteitleiden.nl/huisstijl

   House-style rule that shapes the layout: the Leiden logo may only appear on
   a white or a University Blue background - on any other colour the "druppel"
   must be used instead. The colophon is therefore University Blue and carries
   the diapositief (reversed) logo, while the rest of the site is magenta.
   ========================================================================== */

:root {
  /* Institute house colour - primary structural colour */
  --brand:              #831e84;
  --brand-dark:         #6d1a6e;
  --brand-30:           #dcc5dc;
  --brand-08:           #f6f0f6;

  /* Leiden University Blue - Pantone 280 C. Used for the colophon, which is
     an approved background for the university logo. */
  --lu-blue:            #001158;
  --lu-blue-30:         #bcd2ff;   /* official 30% tint */

  /* Faculty of Humanities (Geesteswetenschappen) - Pantone 575 C */
  --accent:             #4D781F;
  --accent-dark:        #3d6019;
  --accent-30:          #E2F6CB;   /* official 30% tint */

  /* Neutrals */
  --lu-ink:             #262626;
  --lu-ink-soft:        #52504a;
  --lu-line:            #d7d7d7;
  --lu-line-soft:       #efefef;
  --lu-bg:              #f6f6f6;
  --lu-bg-sidebar:      #efefef;
  --lu-white:           #ffffff;

  /* Typography - Vestula is licence-restricted (huisstijl@leidenuniv.nl);
     Verdana is the house-style fallback. Merriweather falls back to Georgia. */
  --lu-font-ui:         "Vestula", Verdana, Geneva, Tahoma, sans-serif;
  --lu-font-body:       "Merriweather", Georgia, "Times New Roman", serif;

  /* Layout */
  --lu-container:       1170px;
  --lu-sidebar:         300px;
  --lu-brandbar-h:      90px;
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background-color: var(--lu-bg);
  color: var(--lu-ink);
  font-family: var(--lu-font-ui);
  font-size: 18px;
  line-height: 34px;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; border: 0; }
figure { margin: 1.5em 0; }

a { color: var(--brand); }
a:hover, a:focus { color: var(--accent); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.screen-reader-text, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link:focus {
  position: fixed; top: 8px; left: 8px;
  width: auto; height: auto; clip: auto;
  z-index: 2000; padding: 12px 20px;
  background: var(--brand); color: #fff;
  font-family: var(--lu-font-ui); text-decoration: none;
}

.clearfix::after { content: ""; display: table; clear: both; }

/* ==========================================================================
   3. Grid - replicates the Bootstrap 3 classes the imported content uses
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--lu-container);
  margin: 0 auto;
  padding: 0 15px;
}

.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.row::after { content: ""; display: table; clear: both; }

[class*="col-sm-"], [class*="col-md-"], [class*="col-xs-"] {
  position: relative;
  width: 100%;
  padding: 0 15px;
}

@media (min-width: 768px) {
  .col-sm-1  { width: 8.3333%; }
  .col-sm-2  { width: 16.6667%; }
  .col-sm-3  { width: 25%; }
  .col-sm-4  { width: 33.3333%; }
  .col-sm-6  { width: 50%; }
  .col-sm-8  { width: 66.6667%; }
  .col-sm-9  { width: 75%; }
  .col-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
  .col-md-4  { width: 33.3333%; }
  .col-md-6  { width: 50%; }
  .col-md-8  { width: 66.6667%; }
  .col-md-12 { width: 100%; }
}

.pull-right { margin-left: auto; }
.hidden-xs { display: none; }
@media (min-width: 768px) { .hidden-xs { display: block; } }
@media print { .hidden-print { display: none !important; } }
.visible-print-block { display: none; }
@media print { .visible-print-block { display: block !important; } }

/* ==========================================================================
   4. Typography scale  (was: Open Sans / Frutiger -> now Vestula / Verdana)
   ========================================================================== */

h1, h2, h3, h4, h5, h6 { font-family: var(--lu-font-ui); }

#masthead h1 {
  font-weight: 300;
  font-size: 38px;
  line-height: 48px;
  color: var(--brand);
  margin: 0;
  padding: 22px 0;
}
#masthead h1 a,
#masthead h1 a:hover,
#masthead h1 a:focus { color: var(--brand); text-decoration: none; }

h2, .h2 {
  font-weight: 300;
  font-size: 28px;
  line-height: 40px;
  color: var(--brand);
  margin: 2em 0 1em;
}
h3 { font-weight: 400; font-size: 22px; line-height: 32px; color: var(--brand); margin: 1.8em 0 .8em; }
h4 { font-weight: 600; font-size: 19px; line-height: 28px; color: var(--brand); margin: 1.6em 0 .6em; }

/* Body copy inside articles keeps the original serif reading face */
.page-content,
.page-content-inner,
.entry-content,
.mce-content-body { font-family: var(--lu-font-body); }

.entry-content { font-size: 17px; line-height: 32px; }
.entry-content p { margin: 0 0 1.4em; }
.entry-content ul, .entry-content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.entry-content li { margin-bottom: .4em; }

blockquote, .uu-quote {
  font-family: var(--lu-font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 34px;
  border-left: 5px solid var(--accent);
  margin: 1.6em 0;
  padding: .2em 0 .2em 24px;
  color: var(--lu-ink-soft);
}

/* External-link affordance carried over from the original theme */
.entry-content a[target="_blank"]::after {
  content: "\2197";
  display: inline-block;
  font-size: .8em;
  padding-left: 4px;
  text-decoration: none;
}

hr { border: 0; border-top: 1px solid var(--lu-line); margin: 2em 0; }

table { border-collapse: collapse; width: 100%; margin: 1.5em 0; font-family: var(--lu-font-ui); font-size: 16px; }
th, td { padding: 8px; border-top: 1px solid var(--lu-line); text-align: left; vertical-align: top; }
thead th { border-bottom: 2px solid var(--brand); color: var(--brand); }
tbody tr:nth-of-type(odd) { background-color: #f9f9f9; }

/* ==========================================================================
   5. Brandbar - institute wordmark + search   (was: UU logo bar)
   ========================================================================== */

#brandbar {
  background: var(--lu-white);
  border-bottom: 1px solid var(--lu-line-soft);
  height: var(--lu-brandbar-h);
  overflow: hidden;
}
#brandbar .row { align-items: center; min-height: var(--lu-brandbar-h); }
#brandbar img.alternative-logo { height: 70px; width: auto; display: block; }

@media (max-width: 767px) {
  #brandbar { height: 66px; }
  #brandbar .row { min-height: 66px; }
  #brandbar img.alternative-logo { height: 44px; }
}

.logodiv { display: flex; align-items: center; gap: 12px; }

/* Mobile menu button */
.navbar-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--brand-30);
  border-radius: 3px;
  padding: 9px 10px;
  cursor: pointer;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px; height: 2px;
  background-color: var(--brand);
  border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }
@media (max-width: 767px) { .navbar-toggle { display: block; } }

/* Search */
#searchform .search-wrapper { position: relative; display: flex; }
#searchform .searchfield {
  font-family: var(--lu-font-ui);
  font-size: 15px;
  padding: 8px 12px;
  width: 220px;
  border: 1px solid var(--lu-line);
  border-right: 0;
  background: var(--lu-white);
  color: var(--lu-ink);
}
#searchform .searchbutton {
  border: 0;
  background: var(--brand);
  color: #fff;
  padding: 0 16px;
  cursor: pointer;
  font-family: var(--lu-font-ui);
  font-size: 15px;
}
#searchform .searchbutton:hover { background: var(--accent); }
@media (max-width: 767px) { #brandbar .search-wrapper { display: none; } }

/* ==========================================================================
   6. Masthead - site title
   ========================================================================== */

#masthead { background: var(--lu-white); }
@media (max-width: 767px) {
  #masthead h1 { font-size: 24px; line-height: 30px; padding: 14px 0; }
}

/* ==========================================================================
   7. Main navigation   (was: .navbar-inverse on Posthumus magenta)
   ========================================================================== */

#access {
  background-color: var(--brand);
  border: 0;
  position: relative;
  z-index: 500;
}
#access .navbar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
#access .navbar-nav > li { position: relative; }
#access .navbar-nav > li > a {
  display: block;
  color: #fff;
  font-family: var(--lu-font-ui);
  font-size: 16px;
  line-height: 20px;
  padding: 15px 16px;
  text-decoration: none;
}
#access .navbar-nav > li > a:hover,
#access .navbar-nav > li > a:focus,
#access .navbar-nav > .active > a,
#access .navbar-nav > li.current-menu-item > a,
#access .navbar-nav > li.current-menu-parent > a,
#access .navbar-nav > li.current-menu-ancestor > a,
#access .navbar-nav > .open > a {
  background-color: var(--brand-dark);
  color: #fff;
}

/* Caret on parent items */
#access .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  margin-left: 8px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  vertical-align: middle;
}

/* Dropdowns */
#access .dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--brand);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  display: none;
  z-index: 600;
}
#access li.open > .dropdown-menu,
#access li:hover > .dropdown-menu,
#access li:focus-within > .dropdown-menu { display: block; }

#access .dropdown-menu > li > a {
  display: block;
  color: #fff;
  font-size: 15px;
  line-height: 22px;
  padding: 9px 18px;
  text-decoration: none;
}
#access .dropdown-menu > li > a:hover,
#access .dropdown-menu > li > a:focus {
  background-color: var(--brand-dark);
  color: #fff;
  text-decoration: underline;
}

/* Mobile navigation */
@media (max-width: 767px) {
  #main-menu-collapse {
    display: none;
    width: 100%;
  }
  #main-menu-collapse.in { display: block; }
  #access .navbar-nav { flex-direction: column; }
  #access .navbar-nav > li > a { padding: 12px 15px; border-top: 1px solid rgba(255,255,255,.15); }
  #access .dropdown-menu {
    position: static;
    display: block;
    box-shadow: none;
    background: rgba(0,0,0,.18);
    padding: 0;
  }
  #access .dropdown-menu > li > a { padding-left: 32px; }
  #access .menu-item-has-children > a::after { float: right; margin-top: 8px; }
}

/* ==========================================================================
   8. Page furniture - header image, title bar, accent block
   ========================================================================== */

#content { background: var(--lu-white); }

#content .header-image {
  position: relative;
  overflow: hidden;
  max-height: 400px;
}
#content .header-image img { width: 100%; height: auto; vertical-align: middle; }

/* The accent block that sat bottom-right of the header image.
   Was Utrecht yellow #ffcd00 -> now the Leiden faculty accent. */
#content .page-header-placeholder {
  position: absolute;
  display: block;
  height: 70px;
  width: 250px;
  right: 0;
  bottom: 0;
  background: var(--accent);
  z-index: 100;
}

/* Page title bar - was magenta #831e84, now University Blue */
#content .page-title h1 {
  background: var(--brand);
  color: #fff;
  font-weight: 300;
  font-size: 32px;
  line-height: 40px;
  margin: -70px 0 0;
  min-height: 70px;
  padding: 14px 24px 14px 30px;
  position: relative;
  z-index: 100;
}
#content .full-width .page-title h1 {
  width: 100%;
  padding-left: 18px;
  margin-top: 0;
  margin-bottom: 0;
}
.home .page-title,
.home #content .page-header-placeholder { display: none; }

@media (max-width: 767px) {
  #content .page-title h1 {
    padding: 10px 15px;
    margin: 0;
    font-size: 24px;
    line-height: 30px;
    min-height: 40px;
  }
  #content .page-header-placeholder { display: none; }
}

/* ==========================================================================
   9. Two-column layout - left section navigation + content
   ========================================================================== */

#content-wrapper { padding: 0; }

.two-col #content-wrapper { background: var(--lu-white); }
@media (min-width: 992px) {
  .two-col #content-wrapper {
    background: linear-gradient(to right,
      var(--lu-bg-sidebar) 0,
      var(--lu-bg-sidebar) var(--lu-sidebar),
      var(--lu-white) var(--lu-sidebar),
      var(--lu-white) 100%);
  }
}

.row-offcanvas { display: flex; flex-wrap: wrap; margin: 0 -15px; }

#left-sidebar {
  width: 100%;
  padding: 30px 15px;
}
.page-content { width: 100%; padding: 0 15px; }

@media (min-width: 992px) {
  #left-sidebar { width: var(--lu-sidebar); padding: 40px 25px 40px 15px; }
  .page-content { width: calc(100% - var(--lu-sidebar)); }
}

.page-content-inner { padding: 40px 0 30px 40px; }
@media (max-width: 991px) { .page-content-inner { padding: 25px 0; } }

/* Sidebar widgets / section menu */
#left-sidebar .widget { margin: 0 0 2.2em; }
#left-sidebar .widgettitle,
#left-sidebar .widget h4 {
  font-weight: 300;
  font-size: 24px;
  line-height: 32px;
  color: var(--brand);
  border-bottom: 4px solid var(--lu-line);
  padding-bottom: 6px;
  margin: 0 0 .4em;
}
#left-sidebar .widget ul { margin: 0; padding: 0; list-style: none; }
#left-sidebar .widget ul li {
  border-bottom: 1px solid var(--lu-line);
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
#left-sidebar .widget ul li a {
  color: var(--lu-ink);
  font-family: var(--lu-font-ui);
  font-size: 16px;
  line-height: 22px;
  padding: 9px 0;
  display: block;
  text-decoration: none;
}
#left-sidebar .widget ul li a:hover { color: var(--brand); text-decoration: underline; }
#left-sidebar .widget ul .current-menu-item > a,
#left-sidebar .current-menu-item > a { font-weight: 700; color: var(--brand); }

#left-sidebar .widget ul.sub-menu { margin: 0 0 8px; padding: 0; }
#left-sidebar .widget ul.sub-menu li { border: 0; }
#left-sidebar .widget ul.sub-menu li a {
  color: var(--lu-ink-soft);
  font-size: 14px;
  line-height: 20px;
  padding: 3px 0 3px 16px;
  position: relative;
}
#left-sidebar .widget ul.sub-menu li a::before {
  content: "\203A";
  position: absolute;
  left: 2px;
  color: var(--lu-ink-soft);
}
#left-sidebar .menu-item ul { display: none; }
#left-sidebar .current-menu-parent > ul,
#left-sidebar .current-menu-ancestor > ul,
#left-sidebar .current-menu-item > ul { display: block; }

/* Mobile: collapsible section nav */
.toggle-btn-div { padding: 12px 15px 0; }
@media (min-width: 992px) { .toggle-btn-div { display: none; } }
.sidebar-toggle {
  font-family: var(--lu-font-ui);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--brand);
  color: #fff;
  border: 0;
  padding: 10px 18px;
  cursor: pointer;
}
@media (max-width: 991px) {
  #left-sidebar { display: none; background: var(--lu-bg-sidebar); }
  #left-sidebar.is-open { display: block; }
}

/* ==========================================================================
   10. Articles, archives, home news/agenda
   ========================================================================== */

.article-header-main { background-color: var(--lu-white); }

.entry-header, .article-header h1 { color: var(--brand); }

.home-blog { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.home-blog h2 { margin-top: .6em; }

.frontpage-news-item {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid var(--lu-line-soft);
  background: var(--lu-white);
}
.frontpage-news-item > a {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.frontpage-news-item:hover { border-color: var(--brand-30); }
.frontpage-news-item .archive-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}
.frontpage-news-item .article-header h1,
.frontpage-news-item .entry-header {
  font-family: var(--lu-font-ui);
  font-size: 17px;
  line-height: 26px;
  font-weight: 600;
  color: var(--brand);
  margin: 0 0 .4em;
}
.frontpage-news-item .entry-content {
  font-size: 15px;
  line-height: 24px;
  color: var(--lu-ink-soft);
}
.frontpage-news-item a:hover .entry-header { text-decoration: underline; }

/* Agenda date chip */
.widget-date, .agenda-date {
  float: left;
  margin-right: 12px;
  width: 65px;
  text-align: center;
  background: var(--brand);
  color: #fff;
  padding: 6px 0;
  font-family: var(--lu-font-ui);
}
.widget-date .home-agenda-date-day { display: block; font-size: 22px; line-height: 26px; font-weight: 700; }
.widget-date .home-agenda-date-month { display: block; font-size: 13px; line-height: 16px; text-transform: uppercase; }

/* Archive listing */
.archive-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--lu-line);
}
.archive-item h2 { margin: 0 0 .3em; font-size: 22px; line-height: 30px; }
.archive-item .entry-meta { font-family: var(--lu-font-ui); font-size: 14px; color: var(--lu-ink-soft); }

.entry-meta { font-family: var(--lu-font-ui); font-size: 14px; color: var(--lu-ink-soft); margin-bottom: 1em; }
.article-footer { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--lu-line); font-family: var(--lu-font-ui); font-size: 14px; color: var(--lu-ink-soft); }

/* Pagination */
.pagination { margin: 2.5em 0; font-family: var(--lu-font-ui); }
.pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  margin-right: 4px;
  border: 1px solid var(--lu-line);
  color: var(--brand);
  text-decoration: none;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ==========================================================================
   11. Buttons  (was magenta bg / yellow hover text)
   ========================================================================== */

.bttn, .button, .button-primary, .button.icon,
.frm_submit .btn, .frm_button_submit,
.wp-block-button__link, input[type="submit"] {
  display: inline-block;
  padding: 0 24px;
  font-family: var(--lu-font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 44px;
  text-transform: uppercase;
  text-decoration: none !important;
  text-shadow: none !important;
  background-color: var(--brand);
  color: #fff !important;
  border: 0;
  border-radius: 0;
  margin-bottom: 5px;
  cursor: pointer;
  transition: background-color .15s ease-in-out;
}
/* The original theme turned the label Utrecht-yellow on hover. The faculty
   green would only reach 1.62:1 against the magenta, so its official 30% tint
   is used instead - same gesture, 7.36:1, AAA. */
.bttn:hover, .button:hover, .button-primary:hover, .button.icon:hover,
.frm_submit .btn:hover, .frm_button_submit:hover,
.wp-block-button__link:hover, input[type="submit"]:hover {
  background-color: var(--brand-dark);
  color: var(--accent-30) !important;
}

/* ==========================================================================
   12. Collapsibles  - replaces the uu-shortcodes accordion
       [collapsibles] / [collapse title="..."]
   ========================================================================== */

.panel-group { margin: 1.6em 0; }
.panel {
  border: 1px solid var(--lu-line);
  margin-bottom: 8px;
  background: var(--lu-white);
}
.panel-heading { background-color: var(--brand); padding: 0; }
.panel-title { margin: 0; font-size: 17px; line-height: 24px; }
.panel-title > a {
  display: block;
  color: #fff;
  font-family: var(--lu-font-ui);
  font-weight: 600;
  padding: 12px 44px 12px 20px;
  text-decoration: none;
  position: relative;
  cursor: pointer;
}
.panel-title > a:hover,
.panel-title > a:focus { background-color: var(--brand-dark); color: #fff; }
.panel-title > a::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -3px;
  border: 6px solid transparent;
  border-top-color: #fff;
  transition: transform .2s ease-in-out;
}
.panel-title > a.collapsed::after { transform: rotate(-90deg); }
.panel-collapse { display: none; }
.panel-collapse.in { display: block; }
.panel-body { padding: 20px 24px; font-family: var(--lu-font-body); }

/* ==========================================================================
   13. Footer widget area + colophon
   ========================================================================== */

#footer-widget-area {
  background-color: var(--brand);
  color: #fff;
  font-family: var(--lu-font-ui);
  padding: 60px 0 38px;
  font-size: 16px;
  line-height: 26px;
}
#footer-widget-area a,
#footer-widget-area a:visited { color: #fff; text-decoration: underline; }
#footer-widget-area a:hover { color: var(--accent-30); }
#footer-widget-area .widgettitle,
#footer-widget-area .widget h4 {
  font-weight: 300;
  font-size: 21px;
  color: #fff;
  margin: 0 0 .5em;
  border: 0;
}
#footer-widget-area .widget { margin-bottom: 15px; }
#footer-widget-area .widget ul { margin: 0; padding: 0; list-style: none; }
#footer-widget-area .widget ul li { list-style: none; margin-left: 0; }

/* University Blue: one of the two backgrounds the house style permits for the
   Leiden logo (the other is white). Do not recolour without swapping the logo
   for the "druppel". */
#colophon {
  clear: both;
  background-color: var(--lu-blue);
  color: var(--lu-blue-30);
  padding: 32px 0;
  font-family: var(--lu-font-ui);
  font-size: 15px;
}
#colophon a, #colophon a:visited { color: #fff; }
#colophon .row { align-items: center; }
#colophon .leiden-footer-logo { width: 240px; max-width: 100%; height: auto; margin-bottom: 10px; }
#colophon .copyright { margin: 0; }
@media (min-width: 768px) { #colophon .copyright { text-align: right; } }

/* ==========================================================================
   14. Forms (Formidable + core)
   ========================================================================== */

input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="number"], input[type="date"], input[type="password"],
select, textarea, .frm_form_field input, .frm_form_field select, .frm_form_field textarea {
  font-family: var(--lu-font-ui);
  font-size: 16px;
  padding: 9px 12px;
  border: 1px solid var(--lu-line);
  background: var(--lu-white);
  color: var(--lu-ink);
  max-width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: 2px solid var(--brand-30); }
label, .frm_primary_label { font-family: var(--lu-font-ui); font-weight: 600; font-size: 16px; }

/* ==========================================================================
   15. WordPress core / block content
   ========================================================================== */

.alignleft  { float: left;  margin: .4em 1.6em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.6em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide, .alignfull { max-width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption {
  font-family: var(--lu-font-ui);
  font-size: 14px;
  line-height: 20px;
  color: var(--lu-ink-soft);
  margin-top: .5em;
}
.sticky { border-left: 5px solid var(--accent); padding-left: 20px; }

.wp-block-columns { display: flex; flex-wrap: wrap; gap: 24px; }
.wp-block-column { flex: 1 1 0; min-width: 240px; }
@media (max-width: 781px) { .wp-block-columns { display: block; } }

.wp-block-latest-posts__list { margin: 0; padding: 0; list-style: none; }
.wp-block-latest-posts__list li {
  clear: both;
  border: 1px solid var(--lu-line-soft);
  padding: 10px;
  list-style: none;
  margin-bottom: 8px;
}
a.wp-block-latest-posts__post-title {
  display: block;
  font-family: var(--lu-font-ui);
  font-size: 15px;
  line-height: 24px;
  color: var(--brand);
  text-decoration: none;
}
a.wp-block-latest-posts__post-title:hover { text-decoration: underline; }

/* Colour utilities matching the palette registered in theme.json */
.has-institute-magenta-color { color: var(--brand) !important; }
.has-institute-magenta-background-color { background-color: var(--brand) !important; }
.has-institute-magenta-dark-color { color: var(--brand-dark) !important; }
.has-institute-magenta-dark-background-color { background-color: var(--brand-dark) !important; }
.has-university-blue-color { color: var(--lu-blue) !important; }
.has-university-blue-background-color { background-color: var(--lu-blue) !important; }
.has-university-blue-tint-color { color: var(--lu-blue-30) !important; }
.has-university-blue-tint-background-color { background-color: var(--lu-blue-30) !important; }
.has-humanities-color { color: var(--accent) !important; }
.has-humanities-background-color { background-color: var(--accent) !important; }
.has-humanities-tint-color { color: var(--accent-30) !important; }
.has-humanities-tint-background-color { background-color: var(--accent-30) !important; }
.has-white-color { color: #fff !important; }
.has-white-background-color { background-color: #fff !important; }

/* ==========================================================================
   16. Print
   ========================================================================== */

@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  #access, #brandbar .search-wrapper, #footer-widget-area, .navbar-toggle { display: none !important; }
  #content .page-title h1 { background: none; color: #000; margin: 0; padding: 0; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ==========================================================================
   17. Agenda  (mirrors the original uu-blocks agenda markup)
   ========================================================================== */

/* Date / Location / Url block above an agenda post body */
.agenda-date {
  font-family: var(--lu-font-ui);
  font-size: 16px;
  line-height: 26px;
  background: var(--lu-bg-sidebar);
  border-left: 5px solid var(--brand);
  padding: 14px 20px;
  margin: 0 0 1.8em;
}
.agenda-item { margin: 0; }
.agenda-item-label { font-weight: 700; color: var(--brand); }

/* Agenda list on the front page */
.agenda-archive { margin-bottom: 1em; }

.home-agenda-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid var(--lu-line-soft);
  background: var(--lu-white);
}
.home-agenda-item > a {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.home-agenda-item:hover { border-color: var(--brand-30); }

.home-agenda-date {
  text-align: center;
  background: var(--brand);
  color: #fff;
  padding: 8px 4px;
  font-family: var(--lu-font-ui);
  max-width: 78px;
}
.home-agenda-date-day   { font-size: 24px; line-height: 28px; font-weight: 700; }
.home-agenda-date-month { font-size: 13px; line-height: 16px; text-transform: uppercase; }

.home-agenda-date-full {
  font-family: var(--lu-font-ui);
  font-size: 13px;
  line-height: 20px;
  color: var(--lu-ink-soft);
  margin-bottom: 2px;
}
.home-agenda-title h1 {
  font-family: var(--lu-font-ui);
  font-size: 17px;
  line-height: 26px;
  font-weight: 600;
  color: var(--brand);
  margin: 0 0 .3em;
}
.home-agenda-item a:hover .home-agenda-title h1 { text-decoration: underline; }
.home-agenda-excerpt {
  font-size: 15px;
  line-height: 24px;
  color: var(--lu-ink-soft);
}
.home-agenda-thumbnail img { width: 100%; height: auto; display: block; }

.home-more { margin: 1.2em 0 2em; }

/* The lower home widget area */
.home-widget-area { clear: both; }