/* ============================================================
   Robert Burns — Portfolio site, v8
   ============================================================ */

:root {
  --cream: #fdf6ee;
  --blue:  #2c56eb;
  --reveal-duration: 800ms;
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html, body {
  background: var(--cream);
  color: var(--blue);
  overflow-x: hidden;
}

html { scroll-behavior: smooth; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- Canvases ---------- */
/* v8: cap desktop at 1440px (no upscaling beyond native artboard width) */

.canvas--desktop { display: block; max-width: 1900px; margin: 0 auto; }
.canvas--mobile  { display: none; margin: 0 auto; position: relative; }

@media (max-width: 899px) {
  .canvas--desktop { display: none; }
  .canvas--mobile  { display: block; }
}

/* ---------- Artboard ---------- */

.artboard {
  position: relative;
  width: 100%;
  display: block;
}

.artboard__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  pointer-events: none;
}

/* Interactive elements re-enable pointer events */
.artboard__svg a,
.artboard__svg .svg-link {
  pointer-events: auto;
  cursor: pointer;
  /* Transition on opacity for hover feedback */
  transition: opacity 0.2s ease;
}

/* v8: 70% opacity on hover for ALL clickable SVG links */
.artboard__svg a:hover,
.artboard__svg .svg-link:hover {
  opacity: 0.7;
}

.artboard__media {
  position: absolute;
  z-index: 1;
  object-fit: cover;
}

/* ---------- Reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Mobile smart-hide nav ---------- */

.smart-hide { display: none; }

@media (max-width: 899px) {
  .smart-hide {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: var(--cream);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    box-shadow: 0 1px 0 rgba(44, 86, 235, 0.06);
  }
  .smart-hide--visible { transform: translateY(0); }
  .smart-hide__state[hidden] { display: none; }
  .smart-hide__svg { width: 100%; height: auto; display: block; }
  .smart-hide a,
  .smart-hide .svg-link {
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .smart-hide a:hover,
  .smart-hide .svg-link:hover {
    opacity: 0.7;
  }
}

/* ---------- Mobile testimonial carousel ---------- 
   v8: horizontal swipe-style carousel (was fade in v7).
   Position via JS at the testimonial slot in mobile-about-contact.
   Track is a horizontal flexbox; transform: translateX shifts to next slide.
*/

.testimonial-carousel { display: none; }

@media (max-width: 899px) {
  .testimonial-carousel {
    display: block;
    position: absolute;
    left: 0; right: 0;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    z-index: 50;
    overflow: hidden;
    /* top: set by JS to align with testimonial slot in mobile-about-contact */
  }
  
  .testimonial-track {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  
  .testimonial-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  .testimonial-slide a,
  .testimonial-slide .svg-link {
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .testimonial-slide a:hover,
  .testimonial-slide .svg-link:hover {
    opacity: 0.7;
  }
  
  .testimonial__svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .testimonial-track { transition: none; }
  }
}


/* ============================================================
   Screen reader only — content visible to crawlers and assistive
   technologies but not visually rendered.
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Print stylesheet — make printouts look like the desktop screen.
   Forces desktop layout, removes interactive elements, ensures
   colors print correctly.
   ============================================================ */

@media print {
  /* Force desktop layout */
  .canvas--desktop { display: block !important; max-width: none !important; }
  .canvas--mobile  { display: none !important; }
  
  /* Hide UI chrome that doesn't make sense in print */
  .smart-hide,
  .testimonial-carousel { display: none !important; }
  
  /* Show all reveal elements (don't wait for scroll-trigger) */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  
  /* Show sr-only content too — useful as text fallback */
  /* (Actually leave it hidden, since the visible content covers it) */
  
  /* Ensure colors print accurately (Chrome/Safari respect this) */
  html, body, .canvas--desktop, .artboard, .artboard__svg, .artboard__media {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* Avoid awkward page breaks inside artboards */
  .artboard {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Hide hover affordances in print */
  .artboard__svg a:hover,
  .artboard__svg .svg-link:hover {
    opacity: 1 !important;
  }
}