/* SBP Academia - responsive site styles.
   Mobile-first: base rules target small screens; the nav/layout switch to
   the desktop two-column arrangement at the "lg" breakpoint below, matching
   Bootstrap 5.3's default grid breakpoints and container widths (used here
   as reference points, not the Bootstrap library itself). */

:root {
  --color-ink:          #262626;
  --color-accent:       #86840D;
  --color-accent-dark:  #6F6D0B;
  --color-bar:          #3B3B3B;
  --color-page-bg:      #F7F5C8;
  --color-panel-bg:     #FFFFFF;
  --color-panel-border: #E6E2C0;
  --font-body:          Verdana, Geneva, Arial, Helvetica, sans-serif;
  --font-heading:       Georgia, "Times New Roman", Times, serif;

  /* Bootstrap 5.3 default container max-widths, keyed to its sm/md/lg/xl/xxl
     breakpoints (576/768/992/1200/1400px) below. */
  --container-sm:       540px;
  --container-md:       720px;
  --container-lg:       960px;
  --container-xl:       1140px;
  --container-xxl:      1320px;

  --sidebar-width:      300px; /* wide enough that no nav label wraps - see README */
}

* { box-sizing: border-box; }

html {
  font-size: 1.1em; /* site-wide base size */
}

body {
  margin:      0;
  font-family: var(--font-body), sans-serif;
  color:       var(--color-ink);
  background:  var(--color-page-bg);
  line-height: 1.5;
}

img { max-width: 100%; height: auto; display: inline-block; }

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

a { color: #1A4FB4; }

a:hover, a:focus { color: #123A86; }

/* Utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position:   absolute; left: -9999px; top: 0;
  background: #FFFFFF; color: var(--color-ink);
  padding:    .6em 1em; z-index: 1000;
}

.skip-link:focus { left: .5em; top: .5em; }

/* Header - full width bar, contents capped to a readable max-width.
   White background so it reads as one piece with the logo graphic's own
   white background, with a 10px bar underneath in the site's dark accent
   to keep the established colour scheme. */
.site-header { background: #FFFFFF; border-bottom: 10px solid var(--color-bar); }

.site-header-inner,
.page-shell,
.site-footer-inner {
  max-width: 100%;
  margin:    0 auto;
}

@media (min-width: 576px) {
  .site-header-inner, .page-shell, .site-footer-inner { max-width: var(--container-sm); }
}

@media (min-width: 768px) {
  .site-header-inner, .page-shell, .site-footer-inner { max-width: var(--container-md); }
}

@media (min-width: 992px) {
  .site-header-inner, .page-shell, .site-footer-inner { max-width: var(--container-lg); }
}

@media (min-width: 1200px) {
  .site-header-inner, .page-shell, .site-footer-inner { max-width: var(--container-xl); }
}

@media (min-width: 1400px) {
  .site-header-inner, .page-shell, .site-footer-inner { max-width: var(--container-xxl); }
}

.site-header-inner {
  padding:         .75rem 1rem;
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
}

.brand {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  flex:            1 1 auto;
  min-width:       0;
  text-decoration: none;
}

.brand-logo { display: block; max-height: 140px; width: auto; }

.brand-text {
  color:       var(--color-accent);
  font-family: var(--font-body), sans-serif;
  font-size:   1.5rem;
  font-weight: bold;
}

.nav-toggle {
  flex:       0 0 auto;
  display:    inline-flex; align-items: center; gap: .6rem;
  background: transparent; border: 1px solid rgba(0, 0, 0, .35);
  color:      var(--color-ink); font: inherit; font-size: .95rem;
  padding:    .5rem .85rem; border-radius: 4px; cursor: pointer;
}

.nav-toggle:hover, .nav-toggle:focus { border-color: var(--color-ink); }

.nav-toggle-box { display: flex; flex-direction: column; gap: 4px; width: 20px; }

.nav-toggle-box span {
  display:    block; height: 2px; background: var(--color-ink); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }

.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(2) { opacity: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Nav - collapsible on mobile, sidebar column from the "lg" breakpoint up */
.page-shell { padding: 0 0 1.5rem; }

.site-nav {
  background: var(--color-panel-bg);
  max-height: 0;
  overflow:   hidden;
  transition: max-height .25s ease;
}

/* Fallback only - JS sets an exact inline max-height from scrollHeight
   so the menu never clips regardless of how long the list gets. */
.site-nav.is-open { max-height: 3000px; }

.site-nav ul { list-style: none; margin: 0; padding: 0; }

.site-nav a {
  display:         block;
  padding:         .6rem 1rem;
  color:           var(--color-ink);
  text-decoration: none;
  white-space:     nowrap;
  line-height:     1.25;
  border-bottom:   1px solid #EEEEEE;
}

.site-nav a:hover, .site-nav a:focus { background: #F5F2D6; }

.site-nav a.active {
  background:  var(--color-accent);
  color:       #FFFFFF;
  font-weight: bold;
}

.nav-heading {
  padding:        .5rem 1rem;
  background:     var(--color-bar);
  color:          #FFFFFF;
  text-transform: uppercase;
  font-size:      .8rem;
  letter-spacing: .05em;
  font-weight:    bold;
  white-space:    nowrap;
  margin-top:     1em !important;
}

.nav-divider { border-top: 2px solid var(--color-bar); margin: .4rem 0 0; }

/* Content */
.page-content { padding: 0 1rem; }

.content-inner { padding: 1.5rem 0; }

h1 {
  font-size:      1.7rem;
  color:          var(--color-accent);
  text-transform: uppercase;
  margin:         0 0 1rem;
}

h2 { font-size: 1.35rem; color: var(--color-accent); margin: 1.5rem 0 .6rem; }

h3, h4 { font-size: 1.05rem; color: #333333; margin: 1.25rem 0 .5rem; }

p, li { margin: 0 0 1em; text-align: left; }

p.close { margin-bottom: 0; }

ul, ol { margin: 0 0 1em 1.25em; }

hr {
  border:     none;
  border-top: 1px solid var(--color-accent);
  margin:     0 0 1.4em;
}

/* PDF download button */
.pdf-single { margin: 0 0 1rem; }

.pdf-inner a {
  display:         inline-flex;
  align-items:     center;
  gap:             .5rem;
  max-width:       100%;
  background:      var(--color-accent);
  color:           #FFFFFF;
  text-decoration: none;
  font-weight:     bold;
  padding:         .65rem 1.1rem;
  border-radius:   6px;
}

.pdf-inner a::before { content: "\2b07"; }

.pdf-inner a:hover, .pdf-inner a:focus { background: var(--color-accent-dark); color: #FFFFFF; }

/* Contact tables - stack on very small screens, label + value row from 480px */
table.contact,
table.contact tbody,
table.contact tr,
table.contact td { display: block; width: auto; }

table.contact td { padding-bottom: .35em; }

table.contact td.label { font-weight: bold; }

@media (min-width: 480px) {
  table.contact tr { display: flex; gap: .75rem; margin-bottom: .5rem; }

  table.contact td.label { flex: 0 0 140px; }
}

/* Footer - full width bar, centred content */
.site-footer { background: var(--color-bar); color: #FFFFFF; margin-top: 1rem; }

.site-footer-inner {
  padding:     1rem;
  text-align:  center;
  font-size:   .85rem;
  line-height: 1.6;
}

.site-footer a { color: #FFFFFF; }

/* Desktop layout - Bootstrap 5.3's "lg" breakpoint (>=992px), the same
   point navbar-expand-lg switches a collapsed nav to inline. */
@media (min-width: 992px) {
  .nav-toggle { display: none; }

  .page-shell {
    padding:               1.5rem 1rem;
    display:               grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap:                   2rem;
    align-items:           start;
  }

  .site-nav {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    border:     1px solid var(--color-panel-border);
    position:   sticky;
    top:        1rem;

    li {margin: 0;}

    li p {margin: 0;}
  }

  .page-content { padding: 0; }

  .content-inner { padding: 0; }
}

#home-intro {
  text-align:    center;
  padding:       1em;
  margin-bottom: 2em;
  border:        1px solid silver;

  p { text-align: center; }

  img { max-height: 400px; }
}

.country-table {
  width:           100%;
  max-width:       600px;
  border-collapse: collapse;
}

.country-table th,
.country-table td {
  padding:        8px 12px;
  border:         1px solid #DDDDDD;
  text-align:     left;
  vertical-align: middle;
}

.country-table th {
  background:  #F2F2F2;
  font-weight: 600;
}

.country-table .flag-cell {
  width:      70px;
  text-align: center;
}

.country-table .flag {
  display: block;
  width:   48px;
  height:  auto;
  margin:  0 auto;
}