/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  scroll-behavior: smooth;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

:root {
  --header-height-base: 3.5rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --header-height: calc(var(--header-height-base) + var(--safe-top));
}

.pt-safe { padding-top: var(--safe-top); }
.pb-safe { padding-bottom: var(--safe-bottom); }
.sticky-header-offset { top: var(--header-height); }

/* Dark mode: Pure Black for OLED */
html.dark body {
  background-color: #000000; /* Pure black */
  color: #f7fafc;
}
html.dark header {
  /* Glassmorphism handled via tailwind classes in HTML */
}

/* Logo toggling */
html.dark .logo-light { display: none; }
html:not(.dark) .logo-dark { display: none; }

/*
   HYBRID LAYOUT STRATEGY
   Mobile: Seamless, edge-to-edge masonry.
   Desktop: Contained, gapped masonry with rounded corners.
*/

.photo-grid {
  /* Default (Mobile) */
  column-count: 1;
  column-gap: 0;
  width: 100%;
}

.photo-card {
  /* Default (Mobile) */
  break-inside: avoid;
  margin-bottom: 0;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
  border-radius: 0; /* Sharp edges on mobile */
}

/* Tablet & Desktop Overrides */
@media (min-width: 640px) {
  .photo-grid {
    column-count: 2;
    /* Introduce gaps and padding on larger screens */
    column-gap: 1.5rem;
    padding: 0 1.5rem;
    max-width: 1800px; /* Prevent infinite stretching */
    margin: 0 auto;    /* Center the grid */
  }

  .photo-card {
    margin-bottom: 1.5rem; /* Vertical gap */
    border-radius: 8px;    /* Soft corners */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
}

@media (min-width: 1024px) {
  .photo-grid {
    column-count: 3;
    padding: 0 2rem;
  }
}

@media (min-width: 1500px) {
  .photo-grid {
    column-count: 4;
  }
}

/* Scroll Reveal Animation Classes */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Custom transparent checkbox */
.custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%; /* Circular for modern look */
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-checkbox:hover {
  background-color: rgba(0, 0, 0, 0.5);
  transform: scale(1.1);
}
.custom-checkbox:checked {
  background-color: #2563eb;
  border-color: #2563eb;
  transform: scale(1.1);
}
.custom-checkbox:checked::after {
  content: '';
  display: block;
  width: 30%;
  height: 50%;
  border: solid white;
  border-width: 0 2px 2px 0;
  margin-left: 35%;
  margin-top: 20%;
  transform: rotate(45deg);
}

/* Focus styles */
:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.5rem 0.75rem;
  background: white;
  color: #111827;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 60;
}

/* Modal Animation */
#about-modal:not(.opacity-0) #about-modal-content {
  transform: scale(1);
}

/* Helper classes */
.hidden, [hidden] { display: none !important; }
.visually-hidden {
  border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px;
}
.clearfix::before, .clearfix::after { content: ""; display: table; }
.clearfix::after { clear: both; }

@media print {
  *, *::before, *::after {
    background: #fff !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important;
  }
  a, a:visited { text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  tr, img { page-break-inside: avoid; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}