/* assets/css/app.css */

/* 1) Base / Reset (minimal) */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { 
  font-family: 'GeorgiaCustom', serif;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
}

main {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

#site-content {        
  flex: 1 1 auto;
  min-height: 0;
}

/* Footer stays at the end of the column */
.site-footer {
  flex: 0 0 auto;
}

/* 2) Design tokens (globals) */
:root{
  --footer-bg: transparent;
  --footer-fg: #0a0a0a;       
  --footer-link: #000;      
  --footer-h-mobile: 96px;
  --footer-h-desktop: 120px;
  --teal: #73a1b8;
  --contact-grey: #65707c;

  --site-side-inset: clamp(1.5rem, 4vw, 4.5rem);

  /* desktop optical offsets */
  --footer-contact-end-offset: 3.8rem;
  --footer-projects-end-offset: 4.3rem;
}

/* Front page variant: add .is-front on the footer in PHP */
.is-front {
  --footer-fg: #c6dae5;
  --footer-link: #c6dae5;
  --footer-link-hover: #65707c;
}

/* 3) Global utilities (keep here as needed) */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* (No component/page styles here—those live in separate files) */