/* =========================================================
Base stylesheet (structure only - colors from themes)
========================================================= */

/* Google Fonts - Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400;1,700&display=swap');

* { box-sizing: border-box; }

:root {
/* Layout + sizing tokens */
--header-h: 56px;
--proj-head-h: 36px;
--card-w: 800px;
--gap: 20px;
--unique: 5;
/* Interaction + rhythm */
--hover-scale: 1.08;
--vpad-top: 48px;
--vpad-bottom: 48px;

/* Typography - Standardized sizes */
--font-family: 'Roboto', system-ui, -apple-system, sans-serif;
--font-size-base: 16px;
--font-size-sm: 14px;
--font-size-xs: 12px;
--font-size-lg: 18px;

/* Heading sizes - consistent hierarchy */
--heading-1: clamp(2rem, 1.5rem + 2vw, 2.75rem);
--heading-2: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
--heading-3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
--heading-4: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
--heading-5: 1rem;
--heading-6: 0.875rem;
}

html, body { height: 100%; }
html { 
scroll-behavior: auto; /* custom JS handles smooth scrolling to avoid double-anim stutter */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari, Opera */
html::-webkit-scrollbar {
display: none;
}

body {
margin: 0;
font-family: var(--font-family);
font-size: var(--font-size-base);
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.5;
}

/* =========================================================
   Typography - Consistent heading styles
========================================================= */
h1 {
  font-size: var(--heading-1);
  font-weight: 800;
  line-height: 1.2;
}

h2 {
  font-size: var(--heading-2);
  font-weight: 800;
  line-height: 1.25;
}

h3 {
  font-size: var(--heading-3);
  font-weight: 700;
  line-height: 1.3;
}

h4 {
  font-size: var(--heading-4);
  font-weight: 700;
  line-height: 1.35;
}

h5 {
  font-size: var(--heading-5);
  font-weight: 600;
  line-height: 1.4;
}

h6 {
  font-size: var(--heading-6);
  font-weight: 600;
  line-height: 1.4;
}

/* =========================
   Theme switch shockwave overlay
   ========================= */
.theme-shockwave {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: var(--bg-primary);
  /* circle radius animated via inline style; center via CSS vars */
  --cxpx: 50vw;
  --cypx: 50vh;
  clip-path: circle(0 at var(--cxpx) var(--cypx));
}

/* Thin expanding ring that reveals new theme while outside shows old theme color */
.theme-ring{
  position: fixed;
  left: var(--cxpx);
  top: var(--cypx);
  transform: translate(-50%, -50%);
  width: 0;
  height: auto;
  aspect-ratio: 1 / 1; /* keep it a perfect circle */
  border-radius: 9999px;
  border: 2px solid var(--ring-color, currentColor);
  /* Enormous box-shadow paints the outside area in previous theme bg */
  box-shadow: 0 0 0 1000vmax var(--prev-bg, transparent);
  pointer-events: none;
  z-index: 10000;
}

@media (prefers-reduced-motion: reduce) {
  .theme-shockwave { display: none !important; }
}

/* Basic element resets */
img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button,
input,
textarea,
select {
font: inherit;
color: inherit;
background: transparent;
border: none;
}

/* Focus visibility for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: 2px;
}

/* Make sure anchor targets aren't hidden under the fixed header */
.hero, .about, .work, .projects, .clients, .extra, .contact {
scroll-margin-top: calc(var(--header-h) + 12px);
}

/* Section shell defaults - each section fills the viewport */
.hero, .about, .work, .projects, .clients, .extra, .contact {
min-height: calc(100vh - var(--header-h));
padding: var(--vpad-top) min(6vw, 48px) var(--vpad-bottom);
}

/* Shared container helper */
.container {
width: min(1200px, 92vw);
margin-inline: auto;
}

/* Titles used across sections */
.section-title {
margin: 0 0 16px;
font-size: var(--heading-2);
font-weight: 800;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
}

/* Reusable CTA + simple flex spread */
.cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 14px;
border-radius: 8px;
border: 2px solid var(--border-secondary);
background: var(--cta-bg);
color: var(--cta-text);
text-decoration: none;
will-change: transform;
transition: transform .18s ease;
}

.cta:hover,
.cta:focus-visible { transform: scale(var(--hover-scale)); }

.spread {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

/* Utility gray boxes used throughout the wireframe */
.box {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 14px;
background: var(--chip-bg);
color: var(--chip-text);
border: 2px solid var(--chip-border);
border-radius: 8px;
letter-spacing: .2px;
}

/* Subtle separators */
.hr {
height: 1px;
background: var(--border-primary);
margin: 12px 0;
}



/* =========================
FOOTER (single row on desktop)
========================= */
.site-footer {
background: var(--bg-secondary);
border-top: 1px solid var(--border-primary);
padding: 10px 12px;
}

.footer-bar {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "left center right";
align-items: center;
gap: 12px;
min-height: 52px;
}

.footer-left { grid-area: left; justify-self: start; font-weight: 700; }
.footer-center { grid-area: center; justify-self: center; }
.footer-right { 
grid-area: right; 
justify-self: end; 
white-space: nowrap; 
color: var(--text-secondary); 
}

/* Social icons strip (center) */
.footer-center .socials {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
}

.footer-center .socials a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px;
border-radius: 10px;
text-decoration: none;
outline-offset: 3px;
}

.footer-center .socials img {
width: 22px;
height: 22px;
transform: translateZ(0);
transition: transform .18s ease;
}

.footer-center .socials a:hover img,
.footer-center .socials a:focus-visible img {
transform: scale(var(--hover-scale));
}

/* Mobile & narrow layouts */
@media (max-width: 680px) {
.footer-bar {
grid-template-columns: 1fr;
grid-template-areas:
"left"
"center"
"right";
row-gap: 6px;
text-align: center;
}
.footer-left, .footer-right { justify-self: center; }
.footer-right { white-space: normal; }
}

/* Very short viewports */
@media (max-height: 720px) {
.hero, .about, .work, .projects, .clients, .extra, .contact {
padding-top: 32px;
padding-bottom: 32px;
}
}

/* Footer corners patch */
.site-footer { padding: 0; }
.footer-bar {
max-width: none;
width: 100%;
margin: 0;
padding: 10px 12px;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "left center right";
align-items: center;
}

.footer-left { grid-area: left; justify-self: start; }
.footer-center{ grid-area: center; justify-self: center; }
.footer-right { 
grid-area: right; 
justify-self: end; 
white-space: nowrap; 
}