/* Site shell for the redesigned pages: reset, page transition, container, nav, footer, cards, tags.
   Requires tokens.css. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --nav-py: 48px;
  --section-gap: var(--space-96);
}

@view-transition { navigation: auto; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

html { scroll-behavior: smooth; }
body {
  background: var(--color-page);
  color: var(--color-primary);
  font: var(--text-link);
  font-variation-settings: "opsz" 14;
  -webkit-font-smoothing: antialiased;
  animation: fadeIn 0.3s ease;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* Scroll fade-up (driven by assets/js/animations.js) */
.fade-up {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Container: 1200px content, side margins from the layout tokens */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--page-margin));
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

.page-main {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding-block: var(--section-gap);
}

.section-heading { font: var(--text-h1); color: var(--color-primary); }

/* Links */
.link { transition: color 0.15s; }
.link:hover { color: var(--color-secondary); }

/* Nav */
.site-nav { position: sticky; top: 0; z-index: 100; background: var(--color-page); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--nav-py); }
.nav-left, .nav-right { display: flex; align-items: center; gap: var(--space-48); }
.nav-brand { font: var(--text-brand); transition: color 0.15s; }
.nav-brand:hover { color: var(--color-secondary); }
.nav-link, .nav-drop-btn { display: inline-flex; align-items: center; gap: 8px; font: var(--text-link); transition: color 0.15s; }
.nav-link:hover, .nav-drop-btn:hover { color: var(--color-secondary); }
.nav-icon { width: 16px; height: 16px; }
.nav-chevron { width: 24px; height: 24px; transition: transform 0.2s, filter 0.15s; }
.nav-drop-btn[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

.nav-dropdown { position: relative; }
.nav-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--nav-py));
  left: 0;
  z-index: 100;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-48);
  background: var(--gradient-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
}
.nav-drop-menu.open { display: flex; }
#contactDropdown .nav-drop-menu { left: auto; right: 0; gap: var(--space-16); }

.menu-row { display: flex; align-items: flex-start; gap: var(--space-24); }
.menu-row__name { flex: none; width: 109px; font: var(--text-link); white-space: nowrap; transition: color 0.15s; }
.menu-row__desc { width: 264px; font: var(--text-card-small-body); color: var(--color-tertiary); }
.menu-row:hover .menu-row__name { color: var(--color-secondary); }
.menu-row--contact { align-items: center; justify-content: space-between; gap: var(--space-48); }
.menu-icons { display: inline-flex; align-items: center; gap: var(--space-16); }
.icon-btn { display: inline-flex; padding: 0; }
.icon-btn img, .menu-icons img, .menu-row--contact > img { width: 16px; height: 16px; max-width: none; flex: none; }
[data-copy-email].copied img { opacity: 0.5; }

/* Icons next to links follow the link's hover color (white icons dimmed to color/secondary) */
.nav-icon, .menu-row--contact > img, .icon-btn img, .mobile-menu__icons img { transition: filter 0.15s; }
.nav-link:hover img, .nav-drop-btn:hover img, .menu-row--contact.link:hover > img, .icon-btn:hover img,
.mobile-drop-btn:hover img, .mobile-link:hover img, .mobile-menu__icons a:hover img { filter: brightness(0.8); }

/* Mobile nav: menu button and full-screen menu (visible below 768px only) */
.nav-toggle, .mobile-menu { display: none; }
.nav-toggle { padding: 0; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
body.menu-open { overflow: hidden; }

/* Cards */
.card {
  background: var(--gradient-card);
  background-origin: border-box; /* stops the gradient tiling into the transparent border */
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-card);
  transition: border-color 0.15s;
}
.card:hover { border-color: var(--color-border); }

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-24); }
.tag {
  padding: 8px 16px;
  font: var(--text-label);
  color: var(--color-tertiary);
  text-transform: uppercase;
  white-space: nowrap;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
}

/* Footer */
.site-footer { border-top: var(--border-width) solid var(--color-border); padding-block: var(--space-48); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  column-gap: var(--space-24);
  row-gap: var(--space-48);
  align-items: start;
}
.footer-projects-heading { grid-area: 1 / 1; }
.footer-nebula { grid-area: 2 / 1; }
.footer-menapay { grid-area: 3 / 1; }
.footer-parentwiser { grid-area: 4 / 1; }
.footer-zdirect { grid-area: 5 / 1; }
.footer-about { grid-area: 2 / 2; }
.footer-cv { grid-area: 2 / 3; }
.footer-touch-heading { grid-area: 1 / 4; }
.footer-contact { grid-area: 2 / 4; }
.footer-heading { font: var(--text-h2); color: var(--color-primary); }
.footer-entry:hover .footer-entry__name { color: var(--color-secondary); }
.footer-entry { display: flex; flex-direction: column; gap: var(--space-16); }
.footer-entry__name { font: var(--text-link); white-space: nowrap; }
.footer-entry__desc { max-width: 240px; font: var(--text-card-small-body); color: var(--color-tertiary); }
.footer-entry--narrow .footer-entry__desc { max-width: 183px; }
.footer-contact { display: flex; flex-direction: column; gap: var(--space-16); width: 164px; }
.footer-contact .menu-row { justify-content: space-between; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-96); }
.footer-brand { font: var(--text-brand); }
.footer-copy { font: var(--text-card-small-body); color: var(--color-tertiary); }

/* Provisional responsive behavior (no tablet or mobile designs yet) */
@media (max-width: 767px) {
  :root { --section-gap: var(--space-48); }
  .menu-row { flex-direction: column; gap: 4px; }
  .menu-row__desc { width: auto; }
  .menu-row--contact { flex-direction: row; gap: var(--space-48); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > * { grid-area: auto; }
  .footer-contact { width: auto; max-width: 164px; }
  .footer-nebula, .footer-menapay, .footer-parentwiser, .footer-zdirect, .footer-contact { margin-top: calc(var(--space-24) * -1); } /* 48px row gap minus 24px: 24px inside the Projects and Get in touch groups */
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: var(--space-96); }
  .tags { gap: var(--space-16); }
}

@media (max-width: 767px) {
  .nav-inner { position: relative; z-index: 100; padding-inline: var(--page-margin); }
  .nav-left .nav-dropdown, .nav-right { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--nav-py) * 2 + 24px + var(--space-24));
    background: var(--color-page);
  }
  .mobile-menu__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-48); padding: 0 var(--page-margin) var(--space-24); overflow-y: auto; }
  .mobile-menu__group { display: flex; flex-direction: column; gap: var(--space-48); }
  .mobile-drop-btn, .mobile-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font: var(--text-link); transition: color 0.15s; }
  .mobile-link { gap: var(--space-16); }
  .mobile-drop-btn:hover, .mobile-link:hover { color: var(--color-secondary); }
  .mobile-drop-btn[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
  .mobile-projects { display: flex; flex-direction: column; gap: var(--space-16); }
  .mobile-project { display: flex; flex-direction: column; gap: 8px; }
  .mobile-project + .mobile-project { gap: var(--space-16); }
  .mobile-project__name { font: var(--text-link); transition: color 0.15s; }
  .mobile-project:hover .mobile-project__name { color: var(--color-secondary); }
  .mobile-project__desc { max-width: 250px; font: var(--text-card-small-body); color: var(--color-tertiary); }
  .mobile-project:last-child .mobile-project__desc { max-width: 183px; }
  .mobile-menu__foot { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--space-48) var(--page-margin); border-top: var(--border-width) solid var(--color-border); background: var(--color-page); }
  .mobile-menu__label { font: var(--text-link); color: var(--color-tertiary); }
  .mobile-menu__icons { display: inline-flex; align-items: center; gap: var(--space-24); }
  .mobile-menu__icons img { width: 24px; height: 24px; max-width: none; }
}