/* ============================================================================
   products.css — styles for products.html ONLY.
   Shared reset, fonts, navbar/footer live in default.css.
   Navy #16469c is the ONE accent. No gold, no Fraunces (those are heritage-only).

   Sections:  head · matrix (supply | build) · close
   ============================================================================ */

/* BOX MODEL — must come first.
   default.css declares `box-sizing: border-box` on `body` ONLY, and box-sizing is
   not inherited. Every page stylesheet declares it for its own scope
   (same fix as careers.css and contactus.css). */
.products_page, .products_page *, .products_page *::before, .products_page *::after {
  box-sizing: border-box;
}

/* Page tokens: the site's usual values, named so the rules read in words. */
.products_page {
  width: 100%;
  --pr-navy: #16469c;
  --pr-navy-deep: #0f2b5c;
  --pr-ink: #141821;
  --pr-slate: #5b6472;
  --pr-line: #e7ebf1;
  --pr-paper: #fafbfc;
  --pr-on-navy: rgba(255,255,255,.78);
  --pr-line-on-navy: rgba(255,255,255,.2);
}

/* WIDTH HELPER
   NOTE: never write a bare `margin: 0` on anything in this list. It resets the
   auto side margins and the block drops against the left edge (this bit the
   careers and events pages three times). Zero only top/bottom if needed. */
.pr_head, .pr_matrix, .pr_close_inner {
  width: 82%; max-width: 1120px; margin-left: auto; margin-right: auto;
}

/* Visually hidden, still read by screen readers and crawlers. */
.pr_sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ---------------------------------------------------------------- BUTTONS */
.pr_btn {
  display: inline-block; padding: .85rem 1.6rem; border-radius: 8px; font: inherit;
  font-weight: 600; font-size: .96rem; line-height: 1.2; text-decoration: none;
  border: 1.5px solid transparent;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.pr_btn:hover { text-decoration: none; }          /* default.css underlines every a:hover */
.pr_btn--primary { background: var(--pr-navy); color: #fff; }
.pr_btn--primary:hover { background: var(--pr-navy-deep); color: #fff; transform: translateY(-1px); }
.pr_btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(22,70,156,.3); }


/* ---------------------------------------------------------------- HEAD */
.pr_head { padding: calc(80px + clamp(2.5rem, 6vw, 5rem)) 0 clamp(2rem, 4vw, 3rem); }

.pr_head h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.05; color: var(--pr-ink);
}
.pr_head p {
  margin-top: 1.5rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.65; color: var(--pr-slate); max-width: 60ch;
}


/* ---------------------------------------------------------------- THE MATRIX
   Phones: supply block, then the navy build block, joined into one object.
   Tablets: each block becomes a two-column grid.
   Wide screens: one 3-column grid, light columns 1-2, navy column 3, with the
   rows shared across both blocks (subgrid) so everything lines up. */
.pr_matrix { margin-bottom: clamp(3rem, 6vw, 5rem); }

.pr_group { padding: clamp(1.5rem, 3vw, 2.25rem); }
.pr_group--supply {
  background: var(--pr-paper); border: 1px solid var(--pr-line); border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
.pr_group--build {
  background: var(--pr-navy); color: #fff; border: 1px solid var(--pr-navy);
  border-radius: 0 0 14px 14px;
}

.pr_group_head { padding-bottom: 1.25rem; }
.pr_group_head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.025em;
  line-height: 1.1; color: var(--pr-ink);
}
.pr_group_head p { margin-top: .5rem; font-size: 1rem; line-height: 1.55; color: var(--pr-slate); }

/* one area */
.pr_area {
  display: flex; flex-direction: column;
  padding: 1.5rem 0; border-top: 1px solid var(--pr-line);
  scroll-margin-top: 96px;                        /* clears the fixed 80px header on jump */
}
.pr_area_top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pr_area h3 {
  font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3;
  color: var(--pr-ink);
}
.pr_area_desc { margin-top: .5rem; font-size: .98rem; line-height: 1.55; color: var(--pr-slate); }
.pr_area_brands { margin-top: .65rem; font-size: .9rem; line-height: 1.55; color: var(--pr-slate); }
.pr_area_brands strong { margin-right: .35rem; font-weight: 600; color: var(--pr-ink); }

/* the button beside each title: filled = has its own page, outline = enquire */
.pr_go {
  flex: 0 0 auto; display: inline-block; padding: .5rem .95rem; border-radius: 8px;
  font-size: .88rem; font-weight: 600; line-height: 1.2; text-decoration: none;
  color: var(--pr-navy); background: #fff; border: 1.5px solid #d6e0f0;
  transition: background .2s, border-color .2s, color .2s;
}
.pr_go:hover { text-decoration: none; border-color: var(--pr-navy); }
.pr_go--page { background: var(--pr-navy); border-color: var(--pr-navy); color: #fff; }
.pr_go--page:hover { background: var(--pr-navy-deep); border-color: var(--pr-navy-deep); color: #fff; }
.pr_go:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(22,70,156,.3); }

/* "What it covers": opens in place, native <details>, no script needed */
.pr_more { margin-top: .85rem; }
.pr_more summary {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none;
  font-size: .9rem; font-weight: 600; color: var(--pr-navy); border-radius: 4px;
}
.pr_more summary::-webkit-details-marker { display: none; }
.pr_more summary::before {                          /* small chevron: right when shut, down when open */
  content: ""; width: .45rem; height: .45rem; margin-top: -.1rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s;
}
.pr_more[open] summary::before { transform: rotate(45deg); }
.pr_more summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.pr_more summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(22,70,156,.3); }
.pr_more ul { list-style: none; margin-top: .6rem; }
.pr_more li {
  padding: .45rem 0; border-top: 1px solid var(--pr-line);
  font-size: .92rem; line-height: 1.45; color: var(--pr-ink);
}

/* arriving from a link such as /products.html#fiber-optic: a short bar marks the area */
.pr_area:target { box-shadow: inset 0 3px 0 var(--pr-navy); }

/* build block: the same parts, inverted */
.pr_group--build .pr_group_head h2,
.pr_group--build .pr_area h3 { color: #fff; }
.pr_group--build .pr_group_head p,
.pr_group--build .pr_area_desc { color: var(--pr-on-navy); }
.pr_group--build .pr_area { border-top-color: var(--pr-line-on-navy); }
.pr_group--build .pr_more summary { color: #fff; }
.pr_group--build .pr_more summary:focus-visible,
.pr_group--build .pr_go:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.pr_group--build .pr_more li { border-top-color: var(--pr-line-on-navy); color: rgba(255,255,255,.92); }
.pr_group--build .pr_go { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.pr_group--build .pr_go:hover { border-color: #fff; }
.pr_group--build .pr_go--page { background: #fff; color: var(--pr-navy); border-color: #fff; }
.pr_group--build .pr_go--page:hover { background: #eef2fb; border-color: #eef2fb; color: var(--pr-navy); }
.pr_group--build .pr_area:target { box-shadow: inset 0 3px 0 #fff; }

/* TABLETS: each block becomes two columns */
@media (min-width: 700px) {
  .pr_group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; }
  .pr_group_head { grid-column: 1 / -1; }
}

/* WIDE SCREENS: one 3-column matrix. Rows are shared between the light and
   navy blocks (subgrid), so every row lines up straight across. Browsers
   without subgrid simply keep the tablet layout above. */
@media (min-width: 1200px) {
  @supports (grid-template-rows: subgrid) {
    .pr_matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pr_group { grid-row: 1 / span 3; grid-template-rows: subgrid; }
    .pr_group--supply {
      grid-column: 1 / span 2; grid-template-columns: subgrid; column-gap: 0;
      border: 1px solid var(--pr-line); border-right: 0; border-radius: 14px 0 0 14px;
    }
    .pr_group--build {
      grid-column: 3; grid-template-columns: minmax(0, 1fr);
      border-radius: 0 14px 14px 0;
    }
    /* hairline between the two light columns */
    .pr_group--supply .pr_area:nth-of-type(odd)  { padding-right: 2rem; }
    .pr_group--supply .pr_area:nth-of-type(even) { padding-left: 2rem; border-left: 1px solid var(--pr-line); }
  }
}


/* ---------------------------------------------------------------- CLOSE */
.pr_close { padding: 0 0 clamp(3.5rem, 7vw, 5.5rem); }
.pr_close_inner {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.pr_close_copy h2 {
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.15; color: var(--pr-ink);
}
.pr_close_copy p { margin-top: .85rem; font-size: 1.02rem; line-height: 1.65; color: var(--pr-slate); max-width: 52ch; }
.pr_close_actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; }


/* ---------------------------------------------------------------- RESPONSIVE */
@media (max-width: 900px) {
  .pr_head, .pr_matrix, .pr_close_inner { width: 88%; }
  .pr_close_inner { grid-template-columns: 1fr; }
  .pr_close_actions { justify-content: flex-start; }
}

@media (max-width: 600px) {
  .pr_close_actions .pr_btn { display: block; width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pr_btn, .pr_go, .pr_more summary::before { transition: none; }
  .pr_btn--primary:hover { transform: none; }
}