/* ============================================================
   portal-theme.css — the parent portal's shared look, taken from
   staffdashboard.stmichaelsschool.co.uk so the two sites read as
   one system.

   The :root block below is copied verbatim from staffdashboard's
   index.php/start.php <style> — same names, same values — so a
   colour changed there can be pasted straight in here. The font is
   Carlito, staffdashboard's face throughout.

   One deliberate difference: staffdashboard sets `font-style:
   oblique` on <body>, so every word on the page is slanted. That's
   fine for a dense staff tool but hard going for parents reading
   letter titles, so here the oblique is kept only where it carries
   the house style — the admin bar title and panel headings — and
   body text sits upright.
   ============================================================ */

:root {
  --schoolblue:     #002d72;
  --schoolbluel:    #2c5697;
  --schoolgold:     #c6aa76;
  --schoolgoldl:    #EED484;
  --schoolgoldd:    #b9975b;
  --schoolgold3:    #e3c590;
  --schoolbluetext: #ffffff;
  --schooltext:     #002d72;
  --schoolhedder:   #002d72;
  --smsgreen:       #45C234;
  --smsred:         #FF0000;
  --nthchild:       #f2f2f2;

  /* FullCalendar theming — same overrides as staffdashboard's
     calendar-include.php, so the calendar matches button for button. */
  --fc-button-bg-color:            #002d72;
  --fc-button-border-color:        #002d72;
  --fc-button-text-color:          #ffffff;
  --fc-button-hover-bg-color:      #2c5697;
  --fc-button-hover-border-color:  #002d72;
  --fc-button-active-bg-color:     #c6aa76;
  --fc-button-active-border-color: #b9975b;
  --fc-today-bg-color:             #c6aa76ba;
}

/* A targeted reset rather than staffdashboard's blanket
   `* {margin:0;padding:0}`. That rule is what makes the staff tool so
   dense; here paragraphs keep their rhythm, which matters on pages
   that are mostly prose (login, passkeys). */
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
p + p { margin-top: .7em; }

body {
  margin: 0;
  font-family: "Carlito", Calibri, Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--schooltext);
  background-color: #eef1f6;
  -webkit-font-smoothing: antialiased;
}

a, a:visited { color: var(--schoolblue); text-decoration: none; border: none; }
a:hover { text-decoration: underline; }

/* ---------- Admin bar — staffdashboard's start.php header ---------- */

/* Sticky: the letters grid runs long, and keeping the crest and the
   log-out control in reach beats scrolling back up for them. */
.adminbar {
  background-color: var(--schoolblue);
  color: var(--schoolbluetext);
  min-height: 50px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 6px rgba(0,0,0,0.22);
}

.pagetitle {
  margin: 0;
  color: var(--schoolbluetext);
  font-weight: normal;
  font-family: "Carlito", Calibri, Arial, Helvetica, sans-serif;
  font-style: oblique;
  font-size: 1.3em;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* width:auto is load-bearing — the crest is 39x45, not square, and the
   img carries width/height attributes (for layout stability). Without
   this the attribute width wins and the crest stretches, worst of all
   at the reduced height used on narrow screens. */
.pagetitle img { height: 45px; width: auto; vertical-align: middle; padding-right: 5px; }
.pagetitle .title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.adminbar h1 a,
.adminbar h1 a:hover,
.adminbar h1 a:visited { color: var(--schoolbluetext); text-decoration: none; }

.adminbar .spacer { flex: 1 1 auto; }

/* Tear-off date block, right of the bar — staffdashboard's .cal */
.cal {
  display: inline-block;
  border: 0.1px solid #CCCAC5;
  background-color: var(--schoolbluetext);
  width: 40px;
  flex: 0 0 auto;
  font-family: "Carlito", Calibri, Arial, Helvetica, sans-serif;
  text-align: center;
}
.cal .month {
  height: 10px; line-height: 2; font-size: 6px; text-transform: uppercase;
  background-color: var(--schoolblue); color: var(--schoolbluetext);
}
.cal .date { font-size: 24px; color: #585858; line-height: 30px; }

.myaccount {
  display: flex; align-items: center; gap: 10px;
  color: var(--schoolbluetext); font-size: 0.95em; white-space: nowrap;
}
.myaccount a, .myaccount a:visited {
  color: var(--schoolbluetext); text-decoration: none;
  border: 1px solid rgba(255,255,255,0.45); border-radius: 6px; padding: 4px 10px;
}
.myaccount a:hover { background-color: var(--schoolbluel); text-decoration: none; }

/* ---------- Page body ---------- */

.mainpage {
  padding: 10px 8px 40px;
  max-width: 1800px;   /* wide on desktop, as asked — not the old 960px box */
  margin: 0 auto;
}

/* For pages that are a single column of text and controls rather than
   a grid — the full 1800px would leave them stranded in white space. */
.mainpage-narrow { max-width: 760px; }

/* ---------- Panels — staffdashboard's .statusblock ---------- */

.statusblock {
  color: var(--schoolblue);
  border: 1px solid var(--schoolblue);
  margin-bottom: 14px;
  border-radius: 10px;
  width: 100%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.statusblock h2 {
  color: var(--schoolbluetext);
  background-color: var(--schoolblue);
  margin: 0;
  padding: 5px 10px;
  min-height: 35px;
  font-weight: normal;
  font-style: oblique;
  font-size: 1.15em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.statusblock h2 a, .statusblock h2 a:hover, .statusblock h2 a:visited {
  color: var(--schoolbluetext); text-decoration: none;
}
.statusblock h2 .count {
  margin-left: auto; font-size: 0.8em; font-style: normal;
  background: var(--schoolbluel); border-radius: 10px; padding: 1px 10px;
}

.blockbody { padding: 12px; }

.btn {
  border: 1px solid var(--schoolgoldl);
  background: var(--schoolgold);
  font-weight: bold;
  color: var(--schoolblue);
  border-radius: 6px;
  text-decoration: none;
  padding: .4em 1em;
  display: inline-block;
  line-height: normal;
  cursor: pointer;
  text-align: center;
  font-family: "Carlito", Calibri, Arial, Helvetica, sans-serif;
  font-size: 1em;
}
.btn:hover { background: var(--schoolgoldl); text-decoration: none; }

.emptynote { color: #666; font-size: 0.95em; padding: 4px 2px; }

/* ---------- Welcome panel / launch announcement ---------- */

.intro-lead {
  font-size: 1.05em;
  color: var(--schoolblue);
  max-width: 70ch;   /* long lines are unreadable at 1800px wide */
}

/* The "no passwords" explanation, set apart in school gold so it
   reads as reassurance rather than as more body copy. */
.intro-secure {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  max-width: 80ch;
  background: #fbf7ef;
  border-left: 4px solid var(--schoolgoldd);
  border-radius: 0 6px 6px 0;
  font-size: 0.95em;
  color: #4a4a4a;
  /* Explicit — the login card centres its text, and a centred
     paragraph this long is hard to read. */
  text-align: left;
}
.intro-secure i { color: var(--schoolgoldd); font-size: 1.15em; margin-top: 2px; flex: 0 0 auto; }

.signin-meta { color: #6b7280; font-size: 0.85em; margin-top: 12px; }

/* ---------- Year group tags — same colours as staffdashboard ---------- */

.yg-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-yeargroup {
  display: inline-block; background-color: #2980b9; color: #fff;
  font-size: 0.7em; font-weight: bold; padding: 2px 7px;
  border-radius: 3px; letter-spacing: 0.02em; white-space: nowrap;
}
.tag-yeargroup.all { background-color: var(--schoolgoldd); }

/* ---------- Letters: one card per letter ---------- */

/* Each year group gets a heading rule in that group's own tag colour
   (set inline as --yg-color), so a parent can scan down the page for
   "their" colour instead of reading every heading. */
.yg-section + .yg-section { margin-top: 28px; }
.yg-section { scroll-margin-top: 70px; }   /* clear the sticky admin bar */

.yg-heading {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.05em; font-weight: bold; font-style: oblique;
  color: var(--schoolblue);
  border-left: 5px solid var(--yg-color, var(--schoolblue));
  padding: 2px 0 2px 10px;
  margin-bottom: 12px;
}
.yg-heading .yg-count {
  font-weight: normal; font-style: normal; font-size: 0.8em; color: #777;
}

/* The split between year groups. Rather than a separate rule floating
   between sections — which would be a second separator competing with
   the coloured accent bar already on the heading — the heading itself
   carries it: a school-blue hairline running from the label out to the
   right, fading as it goes so it stops at roughly three-quarters
   width without a hard edge. flex:1 makes it absorb whatever space the
   label leaves, so it lands in the same place on every section. */
.yg-heading::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  min-width: 0;
  background: linear-gradient(to right, rgba(0, 45, 114, 0.45), rgba(0, 45, 114, 0));
}

/* Jump links to each year group — the page is long once a family has
   children in three or four of them. */
.yg-jump {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid #e6e9f0;
}
.yg-jump a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 8px;
  border: 1px solid #dde2ea; border-radius: 20px;
  background: #fff; color: var(--schoolblue);
  font-size: 0.82em; white-space: nowrap;
  transition: border-color .12s ease, background .12s ease;
}
.yg-jump a:hover { text-decoration: none; border-color: var(--yg-color); background: #f7f9fc; }
.yg-jump a .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--yg-color); flex: 0 0 auto;
}
.yg-jump a .n { color: #8b93a1; font-size: 0.9em; }

.letter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.letter-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #d8dde6;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.letter-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,45,114,0.18);
  border-color: var(--schoolgoldd);
}

/* A4-ish preview well. The image is object-fit:cover anchored to the
   top, so every card shows the letterhead end of the page at the same
   size regardless of the source page's exact aspect ratio. */
.letter-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1.414;
  background: #f4f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3C/svg%3E") center/contain no-repeat;
  border-bottom: 1px solid #e3e7ee;
  overflow: hidden;
}
/* position/z-index so the rendered page paints over the .noprev
   placeholder below it — the placeholder is absolutely positioned and
   would otherwise sit on top of an in-flow image. */
.letter-thumb img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; border: 0;
}
.letter-thumb:hover { text-decoration: none; }
/* Shown in place of the image when there's no preview to be had
   (non-PDF original, or Imagick unavailable) — see letter-preview.php. */
.letter-thumb .noprev {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--schoolbluel); font-size: 2.4em;
}
.letter-thumb .noprev span { font-size: 0.3em; letter-spacing: .04em; }

/* Corner flag on anything from the last fortnight — the one thing a
   parent most wants to pick out of a wall of cards. Sits above the
   preview image (which is z-index:1). */
.newflag {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--schoolgoldd); color: #fff;
  font-size: 0.66em; font-weight: bold; text-transform: uppercase;
  letter-spacing: .06em; padding: 2px 8px; border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.letter-card.is-new { border-color: var(--schoolgold); }

.letter-body {
  padding: 9px 10px 10px;
  display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto;
}

.letter-title {
  font-weight: bold; font-size: 0.95em; color: var(--schoolblue);
  line-height: 1.25;
  /* Clamp to three lines so a long title can't make one card taller
     than the rest of its row; the full title is on the link's title
     attribute and on the View button's target. */
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}

.letter-date { color: #6b7280; font-size: 0.8em; }
.letter-date i { color: var(--schoolgoldd); }

.letter-actions { margin-top: auto; padding-top: 4px; }
.letter-actions .btn { width: 100%; font-size: 0.9em; padding: .35em .6em; }

/* ---------- Policies ---------- */

.policy-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.policy-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid #e3e7ee; border-radius: 8px; background: #fff;
}
.policy-row:hover { border-color: var(--schoolgoldd); background: #fcfaf5; }
.policy-row i { color: var(--schoolgoldd); flex: 0 0 auto; }
.policy-row .policy-title { flex: 1 1 auto; font-size: 0.92em; }
.policy-row .policy-date { color: #6b7280; font-size: 0.78em; white-space: nowrap; }

/* ---------- Calendar — mirrors calendar-include.php ---------- */

#calendar {
  max-width: 100%;
  margin: 0 auto;
  background: white;
  padding: 5px;
  border-top: 3px solid var(--schoolblue);
}
.fc-daygrid-day-number { color: #333; font-weight: bold; font-size: 0.85em !important; padding: 2px 5px !important; }
.fc-col-header-cell { background: #eee; padding: 10px 0; }
.fc-event-holiday { background-color: red !important; border: none !important; }
.school-event { background-color: #3498db !important; border: none !important; }
.fc-daygrid-day-frame { padding: 2px !important; min-height: 40px !important; }
.holiday-event-cell .fc-daygrid-day-number { color: red !important; }
.fc-toolbar-title { color: var(--schoolblue) !important; background-color: var(--schoolbluetext) !important; font-style: oblique; }
.fc { font-size: 0.95em; }

/* ---------- Narrow screens ---------- */

/* Card lift, chip transitions and the smooth jump-link scroll are all
   decoration — honour a request to do without them. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .letter-card, .yg-jump a { transition: none; }
  .letter-card:hover { transform: none; }
}

@media (max-width: 640px) {
  .pagetitle { font-size: 1.05em; }
  .pagetitle img { height: 34px; }
  .myaccount .whoami { display: none; }
  .letter-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .mainpage { padding: 8px 6px 30px; }
  .fc .fc-toolbar { flex-direction: column; gap: 6px; }
}
