/* ==========================================================================
   Glass look (iOS style), matching apenny.me.uk.

   Loaded AFTER style.css on every page that uses style.css, so it only
   overrides. To go back to the flat look, delete the two lines that load
   css/glass.css and js/glass.js from each page's <head> (or empty this file).
   ========================================================================== */

:root {
  --glass-bg:     rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-shadow: 0 1px 2px rgba(26, 42, 54, 0.04), 0 8px 24px rgba(26, 42, 54, 0.06);
  --glass-blur:   saturate(180%) blur(20px);
}

/* Soft colour behind the glass (glass over plain white just looks grey).
   A fixed layer rather than background-attachment, which iOS ignores. */
body { background: #f3f6f9; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38rem 30rem at 8% -6%,   rgba(10, 161, 214, 0.28), transparent 70%),
    radial-gradient(34rem 28rem at 96% 18%,  rgba(11, 48, 110, 0.18),  transparent 70%),
    radial-gradient(40rem 30rem at 28% 108%, rgba(10, 161, 214, 0.16), transparent 70%),
    #f3f6f9;
}

/* --------------------------------------------------------------------------
   Top bar: copied from apenny.me.uk's homepage so every site has the same
   floating navy pill (Home / Portfolio / LinkedIn / Resources / Contact).
   -------------------------------------------------------------------------- */
/* ---------- top bar: floating tinted-glass pill, stays at the top while scrolling ---------- */
/* Reserve the scrollbar space so the bar sits in the same place on short and long pages. */
html { scrollbar-gutter: stable; }
.topbar {
  position: sticky;
  top: 12px;
  z-index: 1030; /* above Bootstrap content */
  margin-top: 12px;
  padding: 0 20px;
}
.topbar-inner {
  max-width: 660px; /* same as apenny.me.uk, so the bar doesn't move between sites */
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  padding: 10px 20px;
  border-radius: 20px;
  background: rgba(11, 48, 110, 0.84);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(11, 48, 110, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.topbar a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--heading-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 18px;
  transition: color 0.3s ease-in-out;
}
.topbar a:hover, .topbar a:focus-visible { color: var(--primary-color); }
/* The page you're on: bold and full white. Same height as the others. */
.topbar a[aria-current="page"] { color: #fff; font-weight: 700; }
/* Phones: tighter so all five links stay on one line. */
@media (max-width: 480px) {
  .topbar { padding: 0 8px; }
  .topbar-inner { gap: 4px 6px; padding: 9px 12px; justify-content: space-between; }
  .topbar a { font-size: 10px; letter-spacing: 0.01em; }
}
/* Smallest phones (320-360px). */
@media (max-width: 360px) {
  .topbar { padding: 0 6px; }
  .topbar-inner { gap: 4px 4px; padding: 9px 10px; }
  .topbar a { font-size: 9.5px; letter-spacing: 0; }
}


/* Portfolio only: the old header was ~136px tall and pages were spaced for it;
   keep a little room between the bar and the first section. */
.topbar { margin-bottom: 28px; }

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */

/* Buttons: rounded, otherwise unchanged. */
.btn { border-radius: 12px; }

/* "What I'm working on right now": two tiles with a small gap, rounded. */
#current-projects > .container-fluid > .row.g-0 {
  --bs-gutter-x: 14px;
  --bs-gutter-y: 14px;
  margin-left: 0;
  margin-right: 0;
  padding: 0 7px;
}
#current-projects .service-post {
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(11, 48, 110, 0.14);
}

/* Project grid: a little breathing room from the screen edge, rounded images.
   The padding goes on the section's container, NOT .isotope-container: isotope
   lays items out against that element's inner width, and padding it directly
   leaves room for only two of the three columns. */
#projects > .container-fluid { padding-left: 14px !important; padding-right: 14px !important; }
.isotope-container .item > a > img.img-fluid {
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
}

/* Project pages: rounded images and videos. */
section img.img-fluid:not(.logo),
section iframe,
section video {
  border-radius: 16px;
}

/* Footer: same as apenny.me.uk (centred, small, no card) plus the homepage's
   glass icon buttons for GitHub / itch.io / LinkedIn. */
.site-footer {
  margin: 40px auto 32px;
  text-align: center;
  color: var(--dark-color);
  font-size: 14px;
}
.site-footer p { margin: 14px 0 0; color: inherit; }
.footer-social { display: flex; justify-content: center; gap: 8px; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--black-color);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  transition: all 0.3s ease-in-out;
}
.footer-social a:hover, .footer-social a:focus-visible {
  color: #fff;
  background: var(--primary-color);
  border-color: var(--primary-color);
}

/* The section above the footer doesn't need its full 10em bottom padding. */
section.padding-medium:has(+ .site-footer) { padding-bottom: 3em !important; }

/* No blur available, or the visitor asked for less transparency: solid versions. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgba(255, 255, 255, 0.94); }
  .topbar-inner { background: var(--secondary-color); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: #fff; }
  .topbar-inner { background: var(--secondary-color); }
}

/* LinkedIn post embed (Honours page): tall enough to show the whole post
   without an inner scrollbar. The post wraps onto more lines on narrow screens. */
.linkedin-embed { height: 905px; }
@media (max-width: 480px) { .linkedin-embed { height: 990px; } }