/* ══════════════════════════════════════════════════════
   FONT STACK
   Drop your @font-face for "Fields" here.
   Falls back to Georgia → serif.
══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   DESIGN TOKENS — LIGHT MODE (default)

   Fibonacci rem scale:
     xxs  0.382 | xs  0.618 | sm  1
     md   1.382 | base 1.618 | lg  2
     xl   2.618 | 2xl 4.236  | 3xl 6.854

   Heading scale (reduced to match XD mockup proportions)
   maps fibonacci values downward one or two steps:
     banner-title : fib-xl   2.618rem  ≈ 42px
     intro-heading: fib-lg   2rem      ≈ 32px
     section-h    : fib-base 1.618rem  ≈ 26px
     card-header  : fib-md   1.382rem  ≈ 22px
     action-h     : fib-lg   2rem      ≈ 32px
══════════════════════════════════════════════════════ */
:root {
  /* Fibonacci scale */
  --fib-xxs:  0.382rem;
  --fib-xs:   0.618rem;
  --fib-sm:   1rem;
  --fib-md:   1.382rem;
  --fib-base: 1.618rem;
  --fib-lg:   2rem;
  --fib-xl:   2.618rem;
  --fib-2xl:  3rem;
  --fib-3xl:  3.618rem;

  /* Arithmetic border-radius */
  --radius-1:   2px;
  --radius-2:   3px;
  --radius-3:   4px;
  --radius-4:   6px;
  --radius-btn: 2px;

  /* Brand colours */
  --color-primary:   #1f4040;
  --color-secondary: #C7DC5D;
  --color-neutral:   #F6F6F4;
  --color-neutral-20: #ebebea;

  /* ── Light mode semantic tokens ── */
  --body-bg:          #F6F6F4;
  --body-color:       #222222;
  --heading-color:    #1f4040;

  --content-bg:       rgba(255, 255, 255, 0.50);
  --content-solid:    #ffffff;

  --card-header-bg:   #1f4040;
  --card-header-txt:  #ffffff;
  --card-body-bg:     #F6F6F4;
  --card-body-txt:    #222222;

  --logo-light-show:  block;
  --logo-dark-show:   none;

  --bg-art-opacity:   1;

  --banner-title-c:   #1f4040;
  --intro-heading-c:  #1f4040;
  --section-h-c:      #1f4040;
  --action-heading-c: #1f4040;
  --footer-color:     rgba(33, 37, 41, 0.55);

  /* Theme tile colours — light */
  --theme-collab:          #0071BA;
  --theme-collab-txt:      #ffffff;
  --theme-ai:              #C44233;
  --theme-ai-txt:          #ffffff;
  --theme-assessment:      #007C71;
  --theme-assessment-txt:  #ffffff;
  --theme-identity:        #865AB1;
  --theme-identity-txt:    #ffffff;
  --theme-students:        #7D7547;
  --theme-students-txt:    #ffffff;
}

/* ══════════════════════════════════════════════════════
   DESIGN TOKENS — DARK MODE
══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --body-bg:          #163232;
    --body-color:       #F6F6F4;
    --heading-color:    #C7DC5D;

    --content-bg:       rgba(30, 56, 56, 0.72);
    --content-solid:    #2a5050;

    --card-header-bg:   #F6F6F4;
    --card-header-txt:  #1f4040;
    --card-body-bg:     #1f4040;
    --card-body-txt:    #F6F6F4;

    --logo-light-show:  none;
    --logo-dark-show:   block;
    
    --color-neutral-20: #4c6666;

    /* Same art image, reduced to 60% opacity */
    --bg-art-opacity:   0.6;

    --banner-title-c:   #ffffff;
    --intro-heading-c:  #C7DC5D;
    --section-h-c:      #C7DC5D;
    --action-heading-c: #1f4040;
    --footer-color:     rgba(248, 249, 250, 0.45);

    /* Theme tile colours — dark (pastels) */
    --theme-collab:          #A8CFFE;
    --theme-collab-txt:      #212529;
    --theme-ai:              #F5B3A8;
    --theme-ai-txt:          #212529;
    --theme-assessment:      #B4E4DD;
    --theme-assessment-txt:  #212529;
    --theme-identity:        #D8C2EE;
    --theme-identity-txt:    #212529;
    --theme-students:        #BCB489;
    --theme-students-txt:    #212529;
  }
}

/* ══════════════════════════════════════════════════════
   BASE RESET & BODY
══════════════════════════════════════════════════════ */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background-color: var(--body-bg);
  color: var(--body-color);
  font-family: "Noto Sans", "Tahoma", sans-serif;
  font-size: var(--fib-sm);
  line-height: var(--fib-base);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* ══════════════════════════════════════════════════════
   BACKGROUND ART — fixed SVG, top-right
══════════════════════════════════════════════════════ */
.bg-art {
  position: absolute;
  top: -86px;
  right: -100px;
  width: 1100px;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-art-img {
  width: 1100px;
  height: auto;  
  display: block;
  object-position: top right;
  opacity: var(--bg-art-opacity);
  transition: opacity 0.4s ease;
}

/* ══════════════════════════════════════════════════════
   PAGE WRAPPER
══════════════════════════════════════════════════════ */
.page-wrapper {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--fib-base);
  padding-right: var(--fib-base);
}
@media (max-width: 768px) {
  .page-wrapper {
    overflow-x: hidden;
  }
}

/* ══════════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY
   Headings use the reduced fibonacci scale.
   Element-level h1–h6 are kept narrow; specific
   component classes (below) do the real sizing.
══════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6, fieldset legend {
  font-family: "fields", "Georgia", serif;
  color: var(--heading-color);
  line-height: 1.15;
  transition: color 0.4s ease;
  font-weight: bold;
}

p, li, td, th, label {
  font-family: "Noto Sans", "Tahoma", sans-serif;
  font-size: var(--fib-sm);
}

/* ══════════════════════════════════════════════════════
   ARITHMETIC BORDER-RADIUS UTILITIES
══════════════════════════════════════════════════════ */
.br-1 { border-radius: var(--radius-1) !important; }
.br-2 { border-radius: var(--radius-2) !important; }
.br-3 { border-radius: var(--radius-3) !important; }
.br-4 { border-radius: var(--radius-4) !important; }

/* ══════════════════════════════════════════════════════
   FIBONACCI SPACING UTILITIES
══════════════════════════════════════════════════════ */
.mb-fib-xxs  { margin-bottom: var(--fib-xxs)  !important; }
.mb-fib-xs   { margin-bottom: var(--fib-xs)   !important; }
.mb-fib-sm   { margin-bottom: var(--fib-sm)   !important; }
.mb-fib-md   { margin-bottom: var(--fib-md)   !important; }
.mb-fib-base { margin-bottom: var(--fib-base) !important; }
.mb-fib-lg   { margin-bottom: var(--fib-lg)   !important; }
.mb-fib-xl   { margin-bottom: var(--fib-xl)   !important; }
.mb-fib-2xl   { margin-bottom: var(--fib-2xl)   !important; }
.mb-fib-3xl   { margin-bottom: var(--fib-3xl)   !important; }

.mt-fib-xs   { margin-top: var(--fib-xs)   !important; }
.mt-fib-sm   { margin-top: var(--fib-sm)   !important; }
.mt-fib-base { margin-top: var(--fib-base) !important; }
.mt-fib-xl   { margin-top: var(--fib-xl)   !important; }
.mt-fib-2xl   { margin-top: var(--fib-2xl)   !important; }
.mt-fib-3xl   { margin-top: var(--fib-3xl)   !important; }

.gx-fib-xl   { --bs-gutter-x: var(--fib-xl); }

/* ══════════════════════════════════════════════════════
   BOOTSTRAP COLOUR OVERRIDES
══════════════════════════════════════════════════════ */
.bg-primary     { background-color: var(--color-primary)   !important; }
.bg-secondary   { background-color: var(--color-secondary) !important; }
.text-primary   { color: var(--color-primary)              !important; }
.text-secondary { color: var(--color-secondary)            !important; }

/* Buttons */
.btn {
  border-radius: var(--radius-btn) !important;
  font-family: "Noto Sans", "Tahoma", sans-serif;
  transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
  padding: 12px 24px;
  font-size: 14px;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}
.btn-primary:hover {
  background-color: #355353;
  border-color: #355353;
  color: #ffffff;
}
.btn-primary:active, .btn-primary:focus {
  background-color: #4c6666;
  border-color: #4c6666;
  color: #ffffff;
}
.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-primary);
}
.btn-secondary:hover {
  background-color: #cddf6c;
  border-color: #cddf6c;
  color: var(--color-primary);
}
.btn-secondary:active, .btn-secondary:focus {
  background-color: #d8e68d;
  border-color: #d8e68d;
  color: var(--color-primary);
}

.btn i {
  padding-left: var(--radius-1);
}

.letter-spaced { letter-spacing: 0.08em; }

/* ══════════════════════════════════════════════════════
   LOGO  (light/dark swap via CSS variables)
══════════════════════════════════════════════════════ */
.banner-logo {
  padding-top: var(--fib-xl);
}

.logo {
  height: 75px; 
  width: auto;
  display: block;
}

.logo--light { display: var(--logo-light-show); }
.logo--dark  { display: var(--logo-dark-show);  }

/* ══════════════════════════════════════════════════════
   BANNER
══════════════════════════════════════════════════════ */
#banner {
  padding-bottom: var(--fib-3xl);
  margin-top: var(--fib-base);
  margin-bottom: var(--fib-base);
  min-height: 300px;
  z-index: 3;
  position: relative;
}

.banner-content { max-width: 460px;}

/* fib-xl = 2.618rem ≈ 42px — matches the XD title size */
.banner-title {
  font-size: var(--fib-2xl);
  font-weight: 800;
  color: var(--banner-title-c);
  margin-bottom: var(--fib-xs);
  transition: color 0.4s;
  background: var(--body-bg);
  border-radius: var(--radius-3);
  display: inline;
  padding-right: var(--fib-xs);
}

/* fib-md = 1.382rem ≈ 22px */
.banner-date {
  font-family: "Fields", "Georgia", serif;
  font-size: var(--fib-base);
  font-weight: 800;
  color: var(--banner-title-c);
  margin-bottom: var(--fib-base);
  transition: color 0.4s;
  background: var(--body-bg);
  border-radius: var(--radius-3);
  display: inline;
  padding-right: var(--fib-xs);
}

/* ══════════════════════════════════════════════════════
   CONTENT 
══════════════════════════════════════════════════════ */
#content {
  position: relative;
  margin-bottom: var(--fib-xl);
  border-radius: var(--radius-3);
  padding: var(--fib-xl) var(--fib-3xl);
  overflow: hidden;
  background-color: var(--content-bg);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  transition: background-color 0.4s;
}

#content-inner {
  position: relative;
  z-index: 1;
}

/* fib-lg = 2rem ≈ 32px */
.intro-heading {
  font-size: 2.191rem;
  font-weight: 800;
  color: var(--intro-heading-c);
  line-height: 1.2;
  transition: color 0.4s;
}

/* fib-base = 1.618rem ≈ 26px */
.section-heading {
  font-size: var(--fib-base);
  font-weight: 700;
  color: var(--section-h-c);
  transition: color 0.4s;
}

.formats-section, .themes-section, #content-inner {
  padding-top: var(--fib-base);
}
.formats-section {
  padding-bottom: 0px;
  margin-bottom: 0px;
}

/* ══════════════════════════════════════════════════════
   FIVE THEMES GRID
══════════════════════════════════════════════════════ */
.themes-grid-wrap {
  background-color: transparent; 
  border: 0;             /* border is now on the fieldset */
  padding: 0;
}

/* Fieldset reset + border that the legend visually breaks */
.themes-section {
  border: 1.5px solid var(--color-neutral-20);
  border-radius: var(--radius-1);
  padding: var(--fib-xl);
  margin-top: var(--fib-2xl);
  /* Reset browser fieldset defaults */
  min-inline-size: unset;
}

/* Legend sits centred and "breaks" the top border */
.themes-section > legend.section-heading {
  float: none;           /* override Bootstrap's legend float */
  width: auto;
  margin: 0 auto;        /* centres it */
  padding: 0 var(--fib-sm);
  text-align: center;
  font-size: var(--fib-base);
  font-weight: 700;
  color: var(--section-h-c);
  line-height: 1;
  transition: color 0.4s;
}

.themes-grid {
  display: flex;
  flex-wrap: wrap;      /* Allows items to move to the next line */
  justify-content: center; /* Centers the 5th item (or any leftovers) */
  gap: var(--fib-xl);
}

/* THEME TILE */
.theme-tile {
  /* This controls the size logic */
  flex: 1 1 168px;      /* Grow, Shrink, and try to be 168px wide */
  max-width: 168px;     /* Prevents them from getting giant on wide screens */
  aspect-ratio: 1 / 1;  /* MAGIC: Keeps it a perfect square */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Changed to center for better square alignment */
  gap: var(--fib-xs);
  padding: var(--fib-base);
  border-radius: var(--radius-1);
  text-align: center;
  transition: background-color 0.4s, color 0.4s, transform 0.15s;
  cursor: default;
  box-sizing: border-box; /* Ensures padding doesn't break the square */
}

/* Responsive Tweak for very small screens */
@media (max-width: 400px) {
  .theme-tile {
    flex: 1 1 140px; /* Slightly smaller base for tiny phones */
  }
}

.theme-tile:hover {
  transform: translateY(-3px);
  filter: brightness(1.06);
}

.theme-tile-icon {
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* Equivalent to object-fit: contain */
  display: inline-block;

}

.theme-tile-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* fib-xs = 0.618rem */
.theme-tile-label {
  font-family: "Noto Sans", "Tahoma", sans-serif;
  font-size: var(--fib-sm);
  font-weight: 500;
  line-height: 1.4;
}

/* Theme colour assignments */
.theme.collab     { background-color: var(--theme-collab);     color: var(--theme-collab-txt);     }
.theme.ai         { background-color: var(--theme-ai);         color: var(--theme-ai-txt);         }
.theme.assessment { background-color: var(--theme-assessment); color: var(--theme-assessment-txt); }
.theme.identity   { background-color: var(--theme-identity);   color: var(--theme-identity-txt);   }
.theme.students   { background-color: var(--theme-students);   color: var(--theme-students-txt);   }

/* Inline tag usage (non-tile) */
.theme:not(.theme-tile) {
  display: inline-flex;
  align-items: center;
  padding: var(--fib-xxs) var(--fib-xs);
  border-radius: var(--radius-1);
  font-size: var(--fib-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Assign Light Mode SVGs */
.icon-collab    { background-image: url('assets/Icon_Collab.svg'); }
.icon-ai        { background-image: url('assets/Icon_AI.svg'); }
.icon-assessment{ background-image: url('assets/Icon_Assessment.svg'); }
.icon-identity  { background-image: url('assets/Icon_Identity.svg'); }
.icon-students  { background-image: url('assets/Icon_Students.svg'); }

/* Dark Mode Swap */
@media (prefers-color-scheme: dark) {
  .icon-collab    { background-image: url('assets/Icon_Collab_dark.svg'); }
  .icon-ai        { background-image: url('assets/Icon_AI_dark.svg'); }
  .icon-assessment{ background-image: url('assets/Icon_Assessment_dark.svg'); }
  .icon-identity  { background-image: url('assets/Icon_Identity_dark.svg'); }
  .icon-students  { background-image: url('assets/Icon_Students_dark.svg'); }
  
}

/* Border-only variant */
.theme-border { background-color: transparent; border-width: 2px; border-style: solid; }
.theme-border.collab     { border-color: var(--theme-collab);     color: var(--theme-collab);     }
.theme-border.ai         { border-color: var(--theme-ai);         color: var(--theme-ai);         }
.theme-border.assessment { border-color: var(--theme-assessment); color: var(--theme-assessment); }
.theme-border.identity   { border-color: var(--theme-identity);   color: var(--theme-identity);   }
.theme-border.students   { border-color: var(--theme-students);   color: var(--theme-students);   }

/* ══════════════════════════════════════════════════════
   PRESENTATION FORMAT CARDS
══════════════════════════════════════════════════════ */
.formats-subtitle {
  font-size: var(--fib-xs);
}

.brand-card {
  border: none;
  border-radius: var(--radius-1);
  overflow: hidden;
  box-shadow: none;
  transition: transform 0.15s;
}

.brand-card:hover { transform: translateY(-2px); }

/* fib-md = 1.382rem ≈ 22px */
.brand-card .card-header {
  border-top-left-radius: var(--radius-1);
  border-top-right-radius: var(--radius-1);
  background-color: var(--card-header-bg);
  color: var(--card-header-txt);
  font-size: 1.191rem;
  font-weight: 700;
  border-bottom: none;
  padding: var(--fib-sm) var(--fib-sm);
  text-align: center;
  transition: background-color 0.4s, color 0.4s;
}

.brand-card .card-body {
  border-bottom-left-radius: var(--radius-1);
  border-bottom-right-radius: var(--radius-1);
  background-color: var(--body-bg);
  color: var(--card-body-txt);
  padding: var(--fib-base) var(--fib-sm);
  font-size: var(--fib-xs);
  line-height: 1.6;
  min-height: 100px;
  text-align: center;
  transition: background-color 0.4s, color 0.4s;
}

/* ══════════════════════════════════════════════════════
   ACTION SECTION
══════════════════════════════════════════════════════ */
#action {
  background-color: var(--color-secondary);
  border-radius: var(--radius-3);
  padding: var(--fib-xl);
  margin-bottom: var(--fib-xl);
}

/* fib-lg = 2rem ≈ 32px */
.action-heading {
  font-size: var(--fib-lg);
  font-weight: 800;
  color: var(--action-heading-c);
  transition: color 0.4s;
}

.action-sub {
  color: #222222;
  margin-bottom: var(--fib-base);
}

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
#footer {
  padding-top: 0px;
  padding-bottom: var(--fib-xl);
  font-size: var(--fib-xs);
  color: var(--footer-color);
  text-align: center;
  transition: color 0.4s;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #content  { padding: var(--fib-base); }
  #action   { padding: var(--fib-base); }
  .banner-logo { padding-top: var(--fib-base); }
  .bg-art-img { opacity: 19.1%; }
  .banner-title { font-size: var(--fib-lg); }
  .intro-heading { font-size: var(--fib-base); }

  .themes-grid-wrap {
    border: 0px;
    padding: 0px;
  }
  
  .themes-grid {
    gap: var(--fib-sm);
  }
  
  .formats-section, #content-inner {
    padding-top: var(--fib-xs);
  }

}