/* =====================================================
   Corey's PC Build & Repair — shared stylesheet
   Palette pulled from the banner: deep space navy/purple
   background with pink + cyan neon accents.
   ===================================================== */

:root{
  --navy-dark:   #0d0221;
  --navy:        #170a35;
  --navy-light:  #200e4a;
  --pink:        #ff5eae;
  --cyan:        #46e6e0;
  --ink:         #1c1826;
  --ink-soft:    #57506b;
  --line:        #e4e0e8;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
}

body{
  /* Black at the far edges of the screen, fading to navy right where
     the site table starts -- 425.5px is half of the table's 851px
     width, so the transition lines up exactly with its left/right
     border. */
  background: linear-gradient(
    to right,
    #000000 0%,
    var(--navy-light) calc(50% - 425.5px),
    var(--navy-light) calc(50% + 425.5px),
    #000000 100%
  );
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.35;
}

/* The site table scales fluidly (width:100%, capped at 851px) rather
   than snapping between fixed breakpoint sizes. Headings, main's
   padding, and the card grids (products/gallery/videos) below use
   clamp() and auto-fit/minmax() to scale continuously along with it;
   the nav further down uses flex-wrap for the same reason. */
table.site-table{
  border-color: var(--navy);
  width: 100%;
  max-width: 851px;
}

/* The table's border attribute applies to every cell by default -- this
   removes it specifically from the banner's cell so only the body and
   footer keep the outline. The background color is sampled from the
   banner image's own left/right edge pixels, so the empty space beside
   the image (now that the table is wider than the 851px banner) blends
   right into it. */
td.banner-cell{
  border: none;
  background: #01010b;
}

/* ---------- banner + nav ---------- */

.banner img{
  display: block;
  width: 100%;
  max-width: 851px;
  height: auto;
  margin: 0 auto;
}

table.main-nav{
  display: block;
  width: 100%;
}

table.main-nav tbody{
  display: block;
  width: 100%;
}

table.main-nav tr{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background: linear-gradient(to top, var(--navy-dark), var(--navy));
}

/* Wide enough for all 7 links in one row: each button grows to fill
   its share of the full width, so the row stretches edge-to-edge with
   no gaps at the borders. */
table.main-nav td{
  flex: 1 1 auto;
}

/* Below this width, 7 buttons no longer fit comfortably in one row.
   Giving the first 3 (Home, Store, Services) a 33.333% basis and the
   remaining 4 a 25% basis guarantees a clean split into exactly two
   rows -- Home/Store/Services on row one, the other four on row two --
   at ANY width from here down, never three or more rows, with each
   row's buttons still growing to fill it completely. */
@media (max-width: 650px){
  table.main-nav td:nth-child(-n+3){
    flex: 1 1 33.333%;
  }

  table.main-nav td:nth-child(n+4){
    flex: 1 1 25%;
  }
}

table.main-nav a{
  display: block;
  padding: clamp(0.6em, 2vw, 0.9em) clamp(0.3em, 1.5vw, 0.7em);
  color: #fff;
  text-decoration: none;
  font-size: clamp(0.72rem, 2vw, 0.8rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 3px solid transparent;
}

table.main-nav a:hover,
table.main-nav a:focus{
  border-bottom: 3px solid var(--pink);
}

table.main-nav a.active{
  border-bottom: 3px solid var(--cyan);
}

/* ---------- page content ---------- */

main{
  padding: clamp(1.5em, 4vw, 2.5em) clamp(1em, 4vw, 2em) clamp(2em, 4vw, 3em);
}

h1, h2, h3{
  font-family: inherit;
  color: var(--navy);
  letter-spacing: 0.01em;
}

h1{
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  margin: 0 0 0.3em;
}

h2{
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  margin: 1.6em 0 0.6em;
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--line);
  position: relative;
}

h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--pink), var(--cyan));
}

p{ margin: 0 0 1em; }

.eyebrow{
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 0.5em;
}

a{ color: #b3489a; }
a:hover{ color: var(--pink); }

.lead{
  font-size: 1.05rem;
  color: var(--ink-soft);
}

/* ---------- buttons ---------- */

.btn{
  display: inline-block;
  padding: 0.7em 1.3em;
  background: var(--navy);
  color: #fff !important;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
}

.btn:hover{ background: var(--pink); }

/* ---------- product cards (store) ---------- */

.products{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5em;
  margin: 1em 0 2em;
}

.product{
  border: 1px solid var(--line);
  padding: 1.2em;
}

.product h3{
  margin: 0 0 0.3em;
  font-size: 1.05rem;
}

.price{
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0.4em 0 0.8em;
}

.product p{
  font-size: 0.92rem;
  color: var(--ink-soft);
  min-height: 3.2em;
}

.product form{ margin: 0; }
.product input[type="image"]{ border: 0; }

.view-cart{
  text-align: center;
  padding: 1.5em 0 0.5em;
  border-top: 2px solid var(--line);
  margin-top: 1em;
}

/* ---------- services table ---------- */

table.services{
  width: 100%;
  border-collapse: collapse;
  margin: 0.5em 0 1.5em;
}

table.services th,
table.services td{
  text-align: left;
  padding: 0.7em 0.6em;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

table.services th{
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

table.services td.svc-price{
  white-space: nowrap;
  font-weight: 600;
  color: var(--navy);
}

.note{
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- gallery ---------- */

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.8em;
}

.gallery-slot{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  background: repeating-linear-gradient(
    45deg, var(--line), var(--line) 10px, #fff 10px, #fff 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.75rem;
  text-align: center;
  padding: 0.5em;
}

.gallery-slot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- gallery pagination ---------- */

.pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 1.5em 0;
}

.page-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2em;
  height: 2.2em;
  padding: 0 0.6em;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  box-sizing: border-box;
}

a.page-btn:hover{ background: var(--pink); }

.page-btn.active{
  background: var(--cyan);
  color: var(--navy);
  font-weight: 600;
}

.page-btn.disabled{
  background: var(--line);
  color: var(--ink-soft);
  opacity: 0.6;
}

/* ---------- gallery lightbox (pure CSS, no JS) ----------
   Each thumbnail links to #photo-NN. The matching .lightbox below has
   that id and is hidden by default; the :target rule shows it only
   when the page URL fragment matches, which happens automatically
   when its link is clicked. Clicking the dark overlay or the close
   button links to "#", which no longer matches any lightbox, so it
   hides again. */

.lightbox{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 3em 1.5em;
  box-sizing: border-box;
}

.lightbox:target{
  display: flex;
}

.lightbox-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1;
}

.lightbox img{
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.lightbox-close{
  position: absolute;
  top: 1em;
  right: 1.2em;
  z-index: 3;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  text-decoration: none;
  font-family: Arial, sans-serif;
}

.lightbox-close:hover{ color: var(--pink); }

/* ---------- videos ---------- */

.video-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2em;
  margin: 1em 0 1.5em;
}

.video-item iframe{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 1px solid var(--line);
}

/* ---------- blog ---------- */

.post{
  padding: 1em 0;
  border-bottom: 1px solid var(--line);
}

.post:first-of-type{ padding-top: 0; }

.post-date{
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pink);
}

/* ---------- contact ---------- */

.contact-list{
  list-style: none;
  padding: 0;
  margin: 0 0 1.5em;
}

.contact-list li{
  padding: 0.5em 0;
  border-bottom: 1px solid var(--line);
}

.contact-list span{
  display: inline-block;
  width: 90px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- reviews (endless scroll) ---------- */

.reviews{
  position: relative;
  height: 14em;
  margin: 2em 0 1em;
  overflow: hidden;
  /* Soft fade at the top/bottom edges of the window, so reviews ease
     in and out of view rather than being sharply clipped. */
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

/* reviews.html contains the full review list TWICE in a row. Scrolling
   this track up by exactly half its own height (translateY(-50%)) is
   what makes the loop seamless: by the time the first copy has
   scrolled fully out of view, the second copy is sitting in exactly
   the position the first one started in, so it repeats with no jump
   or reset. */
.reviews-track{
  display: flex;
  flex-direction: column;
  animation: reviewsScroll 90s linear infinite;
}

.review-item{
  flex-shrink: 0;
  padding: 1em;
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.92rem;
}

.review-item cite{
  display: block;
  margin-top: 0.5em;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--navy);
}

@keyframes reviewsScroll{
  0%    { transform: translateY(0); }
  100%  { transform: translateY(-50%); }
}

/* ---------- footer ---------- */

footer{
  background: var(--navy-dark);
  color: #cfc9df;
  padding: 2em;
  font-size: 0.85rem;
  text-align: center;
}

footer a{ color: var(--cyan); }
footer a:hover{ color: var(--pink); }

footer .footer-name{
  color: #fff;
  font-size: 1rem;
  margin-bottom: 0.5em;
}