/* ============================================================
   WordPress layer.
   styles.css is the design system, shared with the static site.
   This file maps it onto what WordPress prints: core blocks with
   class names from the school's patterns, Polylang's language
   list, the admin bar, and pagination.
   ============================================================ */

/* ---------- admin bar: keep the fixed header clear of it ---------- */
.admin-bar .site-header{top:32px}
.admin-bar .subnav{top:104px}
@media (max-width:1279px){
  .admin-bar .site-header .nav-links{top:104px;max-height:calc(100vh - 104px)}
}
@media (max-width:782px){
  .admin-bar .site-header{top:46px}
  .admin-bar .subnav{top:118px}
  .admin-bar .site-header .nav-links{top:118px;max-height:calc(100vh - 118px)}
}

/* ---------- accessibility ---------- */
.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{
  left:12px;top:12px;z-index:100;padding:10px 16px;
  background:var(--card-lift);color:var(--burgundy);font-weight:600;
  border:2px solid var(--gold);border-radius:var(--radius);
}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- language list from Polylang (links, not buttons) ---------- */
.lang-menu a{display:block;padding:9px 12px;border-radius:2px;font-size:14.5px;color:var(--ink)}
.lang-menu a:hover{background:var(--paper-3);color:var(--ink)}
.lang-menu a.active{color:var(--burgundy);font-weight:700;background:var(--paper-2)}
@media (max-width:680px){ .lang-menu a{padding:12px 14px} }

/* ---------- page content ---------- */
/* Sections carry their own padding; blocks between them add none. */
.entry-content:not(.entry-plain) > *{margin-top:0;margin-bottom:0}
/* Inside a section's container, blocks sit a steady distance apart.
   Vertical margins collapse, so paragraphs keep their own rhythm. */
.entry-content .container > * + *,
.entry-content .container-narrow > * + *{margin-top:24px}
.entry-content .eyebrow + *{margin-top:0}
.entry-content .callout > :last-child,
.entry-content .card > :last-child,
.entry-content .vacancy > :last-child{margin-bottom:0}

/* Linked sections land below the header and the section tabs. */
.entry-content [id]{scroll-margin-top:100px}
body:has(.subnav) .entry-content [id]{scroll-margin-top:150px}

/* ---------- home hero, built from blocks ---------- */
/* The photo, glow and frame are painted by the section itself so the
   editable blocks inside stay simple. */
.hero{
  background:
    radial-gradient(ellipse at 70% 25%,rgba(226,199,145,.24),transparent 52%),
    radial-gradient(ellipse at 12% 90%,rgba(58,19,21,.7),transparent 58%),
    linear-gradient(150deg,#4d1b1b 0%,#722e2a 46%,#3a1315 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.3;pointer-events:none;
  background:url("../img/school-building.jpg") center 62% / cover no-repeat;
  mix-blend-mode:luminosity;
}
.hero::after{
  content:"";position:absolute;inset:26px;z-index:1;pointer-events:none;
  border:1px solid rgba(226,199,145,.2);
}
@media (max-width:680px){ .hero::after{inset:14px} }
.hero > .hero-inner{width:100%}
.entry-content .hero-inner > *{margin-top:0}
.entry-content .hero-emblem{width:118px;margin:0 auto 26px}
.entry-content .hero-emblem img{width:100%;height:auto}
@media (max-width:420px){ .entry-content .hero-emblem{width:92px} }
p.hero-badge{display:inline-flex}
.hero .hero-name{color:#fff}
.hero-fact .fact-value{display:block;margin:0;font-family:var(--serif);font-size:29px;line-height:1.2;color:var(--sand)}
.hero-fact .fact-label{
  display:block;margin:5px 0 0;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,250,241,.62);
}
.entry-content .wp-block-buttons.hero-cta{justify-content:center;gap:14px;margin-bottom:46px}
.entry-content .wp-block-buttons.cta-actions{justify-content:center;gap:14px}

/* ---------- buttons from the Buttons block ---------- */
.entry-content .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font);font-weight:600;letter-spacing:.03em;font-size:15px;line-height:1.3;
  padding:13px 28px;border-radius:var(--radius);border:1px solid transparent;
  text-decoration:none;transition:transform .12s,box-shadow .2s,background .2s,border-color .2s,color .2s;
}
.entry-content .hero-cta .wp-block-button__link,
.entry-content .cta-actions .wp-block-button__link{padding:16px 36px;font-size:16px}
.entry-content .wp-block-button:not([class*="is-style-"]) .wp-block-button__link,
.entry-content .wp-block-button.is-style-burgundy .wp-block-button__link{
  color:#fff;background:linear-gradient(180deg,var(--burgundy-soft),var(--burgundy));border-color:var(--burgundy-dark);
  box-shadow:0 6px 18px rgba(114,46,42,.28),inset 0 1px 0 rgba(255,255,255,.18);
}
.entry-content .wp-block-button.is-style-gold .wp-block-button__link{
  color:#3a2408;background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--gold-deep);
  box-shadow:0 6px 18px rgba(195,144,54,.3),inset 0 1px 0 rgba(255,255,255,.45);
}
.entry-content .wp-block-button.is-style-ghost .wp-block-button__link{
  color:var(--burgundy);background:rgba(255,253,246,.6);border-color:var(--line-strong);box-shadow:none;
}
.entry-content .wp-block-button.is-style-ghost-light .wp-block-button__link{
  color:var(--sand-soft);background:rgba(255,255,255,.06);border-color:rgba(226,199,145,.45);box-shadow:none;
}
.entry-content .wp-block-button__link:hover{filter:brightness(1.06)}

/* ---------- two columns ---------- */
.entry-content .wp-block-columns.split{display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:center;margin:0}
.entry-content .wp-block-columns.split > .wp-block-column{flex:none;min-width:0}
@media (max-width:920px){ .entry-content .wp-block-columns.split{grid-template-columns:1fr;gap:40px} }

/* ---------- images ---------- */
.entry-content .icon-plate{margin:0 auto}
.entry-content .figure{margin:0}
.entry-content .figure img{width:100%;height:auto}

/* ---------- numbered principles ---------- */
.tenet .tenet-num{margin:0;flex:none;min-width:38px;font-family:var(--serif);font-size:26px;line-height:1;color:var(--gold)}

/* ---------- timeline ---------- */
.tl-item .tl-date{
  display:block;margin:0 0 6px;font-size:12.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
}

/* ---------- lists styled as components ---------- */
ul.doclist,ul.people,ul.factlist,ul.contact-list,ul.quicklinks,ul.subnav{list-style:none;padding-left:0}
ul.doclist li::before,ul.people li::before,ul.factlist li::before,ul.quicklinks li::before,ul.subnav li::before{content:none}

/* Document list: each item is a link. The badge says PDF, or WWW for an
   outside website; a date in italics sits at the right. */
ul.doclist{display:grid;gap:10px;margin:0}
ul.doclist li{margin:0}
ul.doclist a::before{
  content:"PDF";flex:none;width:36px;height:36px;border-radius:3px;display:grid;place-items:center;
  background:var(--paper-3);color:var(--burgundy);font-size:10px;font-weight:700;letter-spacing:.05em;
  border:1px solid var(--line);
}
ul.doclist a:not([href*=".pdf"])::before{content:"WWW"}
ul.doclist a em{margin-left:auto;font-style:normal;font-size:13px;color:var(--ink-faint);white-space:nowrap}
@media (max-width:600px){
  ul.doclist a{flex-wrap:wrap;row-gap:4px}
  ul.doclist a em{margin-left:0;white-space:normal;flex:0 0 100%;padding-left:51px}
}

/* People: bold name, role underneath. */
ul.people li{
  position:relative;margin:0;padding:20px 22px 20px 82px;min-height:88px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  font-size:14.5px;line-height:1.5;color:var(--ink-dim);
}
ul.people li::before{
  content:"✦";position:absolute;left:20px;top:20px;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;font-size:16px;color:var(--burgundy);
  background:linear-gradient(150deg,var(--sand-soft),var(--sand));border:1px solid var(--gold-line);
}
ul.people li strong{display:block;margin-bottom:4px;font-family:var(--serif);font-size:17.5px;line-height:1.3;color:var(--burgundy-dark)}

/* Facts: bold label on the left, value on the right. */
ul.factlist{margin:0;border-top:1px solid var(--line)}
ul.factlist li{position:relative;margin:0;padding:17px 0 17px 254px;border-bottom:1px solid var(--line);color:var(--ink-dim)}
ul.factlist li strong{position:absolute;left:0;top:17px;width:230px;font-weight:600;font-size:16px;color:var(--burgundy)}
@media (max-width:680px){
  ul.factlist li{padding-left:0}
  ul.factlist li strong{position:static;display:block;width:auto;margin-bottom:4px}
}

/* Contact details with an icon per line, in order: phone, email,
   address, office hours. */
ul.contact-list{display:block;margin:0}
ul.contact-list li{
  position:relative;margin:0;padding:16px 0 16px 58px;min-height:74px;
  border-bottom:1px solid var(--line);font-size:17px;color:var(--ink);
}
ul.contact-list li:last-child{border-bottom:0}
ul.contact-list li strong{
  display:block;margin-bottom:3px;font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}
ul.contact-list li::before{
  content:"";position:absolute;left:0;top:17px;width:40px;height:40px;border-radius:50%;
  background:var(--paper-3) var(--sjk-icon) center / 19px no-repeat;border:1px solid var(--line);
}
ul.contact-list li:nth-child(1){--sjk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23722e2a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}
ul.contact-list li:nth-child(2){--sjk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23722e2a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
ul.contact-list li:nth-child(3){--sjk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23722e2a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
ul.contact-list li:nth-child(4){--sjk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23722e2a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}

/* Quick links: each item is one link with a bold title, a line of
   description and an italic "read more". */
ul.quicklinks{margin:0}
ul.quicklinks li{margin:0;background:var(--card)}
ul.quicklinks li a{
  display:flex;flex-direction:column;gap:8px;height:100%;padding:26px 24px;
  font-size:14.5px;color:var(--ink-dim);transition:background .18s;
}
ul.quicklinks li a:hover{background:var(--paper-2);color:var(--ink-dim)}
ul.quicklinks li a strong{font-family:var(--serif);font-size:18px;color:var(--burgundy-dark)}
ul.quicklinks li a em{font-style:normal;font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--gold-deep)}

/* ---------- section tabs (a list of #links at the top of a page) ---------- */
ul.subnav{
  margin:0;display:flex;gap:4px;overflow-x:auto;
  justify-content:center;justify-content:safe center;
  padding:0 22px;scrollbar-width:none;-ms-overflow-style:none;
}
ul.subnav::-webkit-scrollbar{display:none}
ul.subnav li{margin:0;flex:none}
ul.subnav a{
  display:block;padding:15px 14px;font-size:14.5px;white-space:nowrap;color:var(--ink-dim);
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
ul.subnav a:hover{color:var(--burgundy)}
ul.subnav a.active{color:var(--burgundy);font-weight:600;border-bottom-color:var(--gold)}
@media (max-width:760px){
  /* the list scrolls itself, so the "more this way" hint is a fade on the
     list rather than an overlay that would scroll away with it */
  ul.subnav::after{content:none}
  ul.subnav{
    justify-content:flex-start;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);
    mask-image:linear-gradient(90deg,#000 85%,transparent);
  }
}

/* ---------- tables from the Table block ---------- */
.entry-content figure.wp-block-table{margin:0}
.entry-content .wp-block-table table{border-collapse:collapse;width:100%;min-width:420px;font-size:16px}
.entry-content .wp-block-table td,
.entry-content .wp-block-table th{border:0;border-bottom:1px solid var(--line);padding:13px 20px;text-align:left}
.entry-content .wp-block-table thead{border-bottom:0}
.entry-content .wp-block-table thead th{
  background:var(--paper-3);color:var(--burgundy-dark);font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;
}
.entry-content .wp-block-table tbody tr:last-child td{border-bottom:0}
.entry-content .table-wrap.num-last td:last-child,
.entry-content .table-wrap.num-last th:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.entry-content .table-wrap.has-total tbody tr:last-child td{font-weight:700;color:var(--burgundy-dark);background:var(--paper-3)}

/* ---------- news ---------- */
.news-card h3 a{color:inherit}
.news-card h3 a:hover{color:var(--burgundy)}
.entry-content .news-more{margin-top:34px}

.pagination{margin-top:40px}
.pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pagination .page-numbers{
  display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);
}
.pagination .page-numbers.current{background:var(--burgundy);border-color:var(--burgundy);color:#fff}
.pagination a.page-numbers:hover{border-color:var(--gold);color:var(--burgundy)}

/* ---------- layout helpers used by the installed pages ---------- */
/* a group whose children need the usual spacing between them */
.entry-content .flow > * + *,
.entry-content .wp-block-column > * + *{margin-top:24px}
/* groups of topics on one page (day plan / work plan, document groups) */
.entry-content .stack > * + *{margin-top:58px}
/* a second row of two columns (home page, "Our school") */
.entry-content .wp-block-columns.split + .wp-block-columns.split{margin-top:62px}
.entry-content .jobs > * + *{margin-top:18px}
.entry-content .vacancy{margin-bottom:0}

.entry-content .wp-block-columns.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;margin:0}
.entry-content .wp-block-columns.contact-grid > .wp-block-column{flex:none;min-width:0}
@media (max-width:920px){ .entry-content .wp-block-columns.contact-grid{grid-template-columns:1fr;gap:34px} }

.entry-content .section-title-sm{font-size:28px}
.entry-content .cta-actions.cta-left{justify-content:flex-start}
.entry-content .cta-actions .wp-block-buttons{margin:0}
.entry-content p.note{margin:0}

/* ---------- plain pages (no section blocks) ---------- */
.entry-plain > :first-child{margin-top:0}
.entry-plain img{height:auto}

/* YouTube players carried over from the old news: full width, 16:9 */
.video-embed{position:relative;aspect-ratio:16/9;margin:24px 0;background:var(--burgundy-deep);border-radius:var(--radius);overflow:hidden}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}