/* ==========================================================================
   STYLES.CSS  —  CLEAN LAYOUT WITH CLEAR FOCUS STATES (BEGINNER NOTES)
   --------------------------------------------------------------------------
   HOW THIS FILE IS ORGANIZED
   1) Base / reset
   2) Sidebar (logos + nav)
   3) Navigation list styles
   4) Typography basics
   5) Copyright placement
   6) Gallery area (image, buttons, details)
   7) Responsive (mobile + tablet)
   8) Accessibility preferences (reduced motion)
   ========================================================================== */


/* ==================== 1) BASE / RESET ==================== */
body {
  background: #FFFFFF;
  font-family: Source Sans Pro, sans-serif;
  margin: 0;

  /* Avoid horizontal scrolling on small screens */
  overflow-x: hidden;
}

/* Visually hidden but readable by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 1px, 1px);
  white-space: nowrap;
  border: 0;
}

/* Skip link becomes visible when focused (keyboard users) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 10000;
}
.skip-link:focus {
  left: 12px;
}

/* Page wrapper: places sidebar next to content on larger screens */
.main_container {
  padding: 16px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
  margin: 0;
  overflow-x: hidden;
}

/* Text column width for the About page */
.contentTextArea {
  padding: 32px 0 0;
  max-width: 560px;
}


/* ==================== 2) SIDEBAR ==================== */
.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  width: 250px;
  background: #fff;
  min-height: 90dvh;
}

/* Stacked logo (usually desktop) */
.logo_stack {
  padding: 16px 0;
  margin: 16px 0;
  width: 100%;
}

/* Small hover feel for the stacked logo */
.logo_stack :hover {
  transition: ease .08s;
  scale: .992;
  opacity: .92;
}

/* Line logo (usually mobile) */
.logo_line {
  display: none;
}


/* ==================== 3) NAVIGATION LIST STYLES ==================== */
.NavList {
  padding: 16px 0;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

/* Category headers (Painting / Drawing / Ceramics) */
.Category {
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: #222;

  /* Slightly larger click/tap area without changing layout */
  padding: 2px 0;
}

.Category.active {
  font-weight: 700;
}

.Category:hover:not(.active) {
  font-weight: 600;
  transition: ease .1s;
  letter-spacing: .25px;
  padding-left: .5px;
  color: #000;
}

/* Clear and visible focus outlines */
.Category:focus-visible,
.CatItem a:focus-visible,
.logo_stack:focus-visible,
.logo_line:focus-visible,
.navBtn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* The list that opens under each category */
.CatItem {
  font-size: 14px;
  font-weight: 400;
  color: #333;
}

.CatItem a {
  color: #333;
  text-decoration: none;
  padding: 2px 0;
}

.CatItem a.active {
  font-weight: 600;
}

.CatItem a:hover:not(.active) {
  font-weight: 400;
  transition: ease .1s;
  letter-spacing: .05px;
  padding-left: 1px;
  color: #000;
}

/* Lists start hidden. JS toggles the .show class. */
ol {
  list-style: none;
  display: none;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 8px;
}

.show {
  display: flex;
}


/* ==================== 4) TYPOGRAPHY BASICS ==================== */
h1 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5em;
}

h2 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5em;
}

.mailto {
  color: #000;
}

.mailto:hover {
  opacity: .6;
}

p {
  font-family: Source Sans Pro;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5em;
}


/* ==================== 5) COPYRIGHT ==================== */
.copyright {
  font-size: 10px;
  font-weight: 300;
  color: #333;
  margin-top: auto;
  align-self: flex-start;
}

.copyrightBottom {
  font-size: 10px;
  font-weight: 300;
  color: #333;
  margin-top: auto;
  display: none;
}


/* ==================== 6) GALLERY AREA ==================== */
.contentArea {
  width: 100%;
  overflow-x: hidden;
}

.galleryContainer {
  overflow-x: hidden;
}

.galleryInfo {
  padding: 16px 20% 16px;
}

.galleryController {
  padding: 16px;
}

.galleryControls {
  height: 28px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* Buttons (icons move a little, label fades in) */
.navBtn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.navGroup {
  display: inline-flex;
  align-items: flex-end;
  gap: 16px;
  cursor: pointer;
}

.navIcon {
  height: 32px;
  width: auto;
  opacity: .6;
  transition: transform 120ms ease, opacity 80ms linear;
  will-change: transform, opacity;
  pointer-events: none;
}

.navLabel {
  font-size: 14px;
  font-weight: 500;
  color: #000;
  opacity: .6;
  transition: opacity 120ms ease;
  position: relative;
  top: -2px;
}

.prevGroup:hover .prevIcon  { opacity: 1; transform: translate( 4px, -8px) rotate( 20deg); }
.prevGroup:active .prevIcon { opacity: 1; transform: translate(-4px,  4px) rotate(-40deg); }
.nextGroup:hover .nextIcon  { opacity: 1; transform: translate(-4px, -8px) rotate(-20deg); }
.nextGroup:active .nextIcon { opacity: 1; transform: translate( 4px,  4px) rotate( 40deg); }

.prevGroup:hover .navLabel,
.nextGroup:hover .navLabel,
.prevGroup:active .navLabel,
.nextGroup:active .navLabel {
  opacity: 1;
}

.navBtn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Image area */
.artworkTitle  { padding: 0 0 8px; margin: 0; }
.artworkDetails{ padding: 0;        margin: 0; }

.artwork {
  width: 100%;
  padding-bottom: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
}

/* Keep images inside the viewport nicely */
.artworkDisplay {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 72dvh;
  margin: 0 auto;
  object-fit: contain;
}


/* ==================== 7) RESPONSIVE ==================== */
/* ---- Mobile (<= 420px) ---- */
@media screen and (max-width: 420px) {
  .logo_line {
    display: block;
    width: 80vw;
    min-width: 220px;
    margin: 0;
    padding: 16px 0;
  }
  .logo_line img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
  }
  .logo_stack {
    display: none;
  }

  .sidebar {
    align-items: center;
    padding: 0;
    width: 100%;
    min-height: auto;
  }

  /* Navigation becomes a compact row.
     Dropdown list appears as an overlay panel. */
  .NavList {
    flex-direction: row;
    flex-wrap: wrap;
    width: 230px;
    justify-content: center;
    margin: 16px;
    padding: 0;
    gap: 16px;
    row-gap: 8px;
    position: relative;
  }

  .Category {
    position: relative;
    z-index: 2;
  }

  .CatItem {
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(100% + 8px);
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    max-height: 50vh;
    overflow: auto;
    z-index: 3;
    padding: 12px;
  }

  .CatItem a {
    display: block;
    text-align: left;
  }

  .sidebar     { z-index: 10; }
  .contentArea { position: relative; z-index: 1; }

  .galleryInfo       { padding: 16px 0 64px; }
  .galleryController { padding: 8px 0; }

  .main_container {
    display: flex;
    flex-direction: column;
    min-height: 90dvh;
    padding: 16px;
    gap: 24px;
  }

  /* Show copyright centered at the bottom on mobile */
  .copyright       { display: none; }
  .copyrightBottom { display: block; align-self: center; text-align: center; width: 100%; padding: 8px 0 12px; }
}


/* ---- Tablet (421px–720px) ---- */
@media screen and (min-width: 420px) and (max-width: 720px) {
  .logo_line {
    display: block;
    width: 80vw;
    min-width: 220px;
    margin: 0;
    padding: 16px 0;
  }

  .logo_line img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
  }

  .logo_stack {
    display: none;
  }

  .sidebar {
    align-items: center;
    padding: 0;
    width: 100%;
    min-height: auto;
    position: relative;
  }

  .NavList {
    flex-direction: row;
    flex-wrap: wrap;
    width: 230px;
    justify-content: center;
    margin: 16px;
    padding: 0;
    gap: 16px;
    row-gap: 8px;
    position: relative;
  }

  .Category { position: relative; z-index: 2; }

  .CatItem {
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(100% + 8px);
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    max-height: 50vh;
    overflow: auto;
    z-index: 3;
    padding: 12px;
  }

  .CatItem a { display: block; text-align: left; }

  .sidebar     { z-index: 10; }
  .contentArea { position: relative; z-index: 1; }

  .galleryInfo { padding: 32px 10% 64px; }

  .main_container {
    display: flex;
    flex-direction: column;
    min-height: 90dvh;
    padding: 16px;
    gap: 24px;
  }

  .copyright       { display: none; }
  .copyrightBottom { display: block; align-self: center; text-align: center; width: 100%; padding: 8px 0 12px; }
}


/* ==================== 8) ACCESSIBILITY PREFERENCES ==================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Optional: keep body text justified for a consistent look */
.contentArea p,
.contentTextArea p,
.aboutText p,
p {
  text-align: justify;
}

/* Placeholder to tweak dropdown padding on small screens if needed */
@media screen and (max-width: 720px) {
  .CatItem { /* overlay has internal padding */ }
}

/* ===================== Sidebar hit areas (safe) =====================
   Goal: make headers and items full-width click targets
   Scope: only pages that add .has-wide-hits on <body> (index, about)
   No padding/height changes → no layout shift.
*/

/* ===================== Sidebar hit areas (safe, v2) =====================
   Scope: only item links. Category headers left unchanged to avoid layout shifts.
*/
.has-wide-hits .sidebar .CatItem a {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.has-wide-hits .sidebar .CatItem li { cursor: pointer; }