/* ---------- Global responsive layer ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, iframe, embed, object, svg { max-width: 100%; }
img { height: auto; }
table { max-width: 100%; }
pre, code { overflow-x: auto; max-width: 100%; }
a, p, li, td, th, h1, h2, h3, h4 { overflow-wrap: break-word; }

/* generic content: tables from the editor scroll instead of overflowing */
#main .content table:not(.students-table) { display: block; overflow-x: auto; }
#main .content img.alignleft { float: left; margin: 0 14px 8px 0; }
#main .content img.alignright { float: right; margin: 0 0 8px 14px; }

/* page layout: content + sidebar(s) */
#container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
#main { min-width: 0; }
#main .main { min-width: 0; }
.sidebar img { max-width: 100%; }

@media (min-width: 981px) {
  #container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas:
      "header  header"
      "main    side2"
      "footer  footer";
    gap: 0 28px;
  }
  #header { grid-area: header; }
  #main { grid-area: main; }
  #sidebar-second { grid-area: side2; }
  #sidebar-first { display: none; }
  #footer { grid-area: footer; }
  /* when there is no sidebar the content takes the full width */
  #container:not(:has(#sidebar-second)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "main" "footer"; }
  #container.is-front { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "main" "side2" "footer"; }
}
@media (max-width: 980px) {
  #container { display: block; padding: 0 12px; }
  #sidebar-first, #sidebar-second { width: auto; float: none; margin-top: 24px; }
}

/* images floated inside content stack on phones */
@media (max-width: 600px) {
  #main .content img.alignleft, #main .content img.alignright { float: none; display: block; margin: 0 0 12px; }
  h1 { font-size: 1.6rem; }
}

/* page title (h1 in content region) */
#main h1.title, #page-title { font-family: Georgia, "Times New Roman", serif; color: var(--ces-green, #1d4e3a); }

/* hero slider stacks on small screens */
@media (max-width: 760px) {
  .slider { display: block; }
  .slider .slider-links { margin-top: 10px; }
}

/* search form inside the nav bar */
#navigation .search-block-form form { display: flex; gap: 6px; align-items: center; margin: 0; }
#navigation .search-block-form .form-item { margin: 0; }
#navigation .search-block-form input[type="search"] {
  width: 100%; min-width: 0; padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  background: rgba(255,255,255,.12); color: #fff;
}
#navigation .search-block-form input[type="search"]::placeholder { color: rgba(255,255,255,.7); }
#navigation .search-block-form input[type="submit"] {
  padding: 7px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ces-leaf, #7a8f3a); color: #fff; font-weight: 600;
}