/* ===================================================================
   ORGANIZATIONS WE SUPPORT — page-specific styles for
   organizations-we-support.html
   Requires global.css to be loaded first (variables, nav, breakpoints,
   .page-intro, .support-*, .closing-*, #hero-section/-photo/-paragraph
   shared components).
   =================================================================== */

/* The background image is unique to this page — everything else about the
   photo/paragraph hero pattern lives in global.css and is shared with
   how-we-work.html. */
#hero-photo{
  background-image: url('../organizations-we-support-hero-bg.jpg');
}

/* global.css's shared html/body default is var(--frost) (white/off-
   white) — fine for how-we-work.html, but this page's lower half
   (Where We Operate / search / domains) is meant to read as one
   continuous navy surface. Individual sections already set their own
   navy background, but any gap between them (margin collapse, a
   section that forgot to set one, etc.) was falling through to that
   white default instead — the "white strips" around the search
   section. Overriding the page's own body background directly removes
   that fallback entirely, so nothing can ever show through white. */
body{ background: #010307; }

/* ============ TOP NAV LINK ROW — matches the homepage's header exactly:
   same position, spacing, gold underline, Playfair links, right-aligned.
   Color (navy default / frost .on-photo) comes from global.css's shared
   rules — same convention as every other page — driven by nav-toggle.js's
   universal auto-detector, which swaps both #nav-brand and this row
   together over the hero photo and the dark "Where We Operate" band.
   #top-cta is no longer used on this page — the nav row replaces it,
   same as the homepage. ============ */
.site-nav-links{
  position: fixed; top: 34px; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 36px;
  padding: 0 36px 10px 64px;
  border-bottom: 1px solid var(--gold);
}
.site-nav-links a{
  font-family: 'Playfair Display', serif; font-weight: 500;
  font-size: 16px;
  color: var(--navy); opacity: 0.88; text-decoration: none;
  transition: color 0.3s ease, opacity 0.25s ease;
}
.site-nav-links a:hover{ opacity: 1; }
.site-nav-links.on-photo a{ color: #F7F9FB; }
@media (max-width: 1024px){
  .site-nav-links{ display: none; }
}

/* ============ WHERE WE OPERATE — replaces the old alternating
   .support-row layout on this page with a card grid, per the Canva
   reference. Deliberately page-scoped (.op-*, not .support-*) rather
   than touching global.css's shared .support-section/.support-row —
   those are still used as-is by how-we-work.html. Card surface/hover
   treatment is lifted directly from the homepage's .practice-card
   (Capabilities section, karnot-hero-v2.html/home.css) — same frosted-
   glass fill, blur, border, hover-lift — adapted to carry a photo +
   overlaid title instead of pure text. ============ */
.op-section{
  background: var(--navy);
  padding: 90px 0 130px;
}
.op-title{
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(24px, 2.2vw, 34px);
  color: var(--frost);
  text-align: center;
  margin: 0 0 56px;
}
.op-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.op-grid .op-card:nth-child(2){ transition-delay: 0.06s; }
.op-grid .op-card:nth-child(3){ transition-delay: 0.12s; }
.op-grid .op-card:nth-child(4){ transition-delay: 0.18s; }
.op-grid .op-card:nth-child(5){ transition-delay: 0.24s; }
.op-grid .op-card:nth-child(6){ transition-delay: 0.3s; }
.op-card{
  /* Same frosted-glass panel as .practice-card, applied here to the
     card's lower (copy) half — the upper half is a real photo, so it
     doesn't need the blur fill itself. */
  border-radius: 12px;
  overflow: hidden;
  background: rgba(30,30,35,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out,
              translate 0.35s ease, border-color 0.35s ease, background 0.35s ease,
              box-shadow 0.35s ease;
}
.op-card:hover{
  translate: 0 -6px;
  border-color: rgba(232,184,75,0.35);
  background: rgba(30,30,35,0.68);
  box-shadow: 0 26px 48px rgba(0,0,0,0.32), 0 0 0 1px rgba(232,184,75,0.2);
}
.op-media{
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.op-media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.op-media::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1,3,7,0) 45%, rgba(1,3,7,0.88) 100%);
}
.op-media-title{
  position: absolute; left: 10px; right: 10px; bottom: 14px; z-index: 2;
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(15px, 1.3vw, 17px); line-height: 1.3;
  color: var(--gold);
  text-align: center;
}
.op-copy{ padding: 16px 16px 22px; }
.op-copy p{
  font-family: 'Inter', sans-serif; font-size: clamp(12.5px, 1vw, 13.5px); line-height: 1.6;
  color: var(--frost); opacity: 0.85;
  margin: 0; text-align: center;
}
@media (prefers-reduced-motion: reduce){
  .op-card:hover{ transform: none; translate: none; }
}
@media (max-width: 1024px){
  .op-grid{ grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 640px){
  .op-section{ padding: 70px 0 90px; }
  .op-grid{ grid-template-columns: 1fr; gap: 20px; }
  .op-media{ aspect-ratio: 16 / 9; }
}

/* ============ INDUSTRY SEARCH + DOMAINS — new section, sits directly
   below "Where We Operate" on this page only, continuing its navy
   backdrop with no seam. Content/structure lifted from the supplied
   industries.html reference (search bar + accordion category list),
   but restyled entirely onto this site's real tokens (var(--navy)/
   var(--gold)/var(--frost), Playfair Display + Inter, the shared
   .btn-gold — not the reference file's own invented --gold:#c79a4b
   etc.) and sharp corners (no border-radius), matching the rest of the
   site. Page-scoped (.industry-*/.domains-*/.category-*), does not
   touch .op-* or anything above it. ============ */
.industry-search-section{
  background: var(--navy);
  padding: 10px 0 70px;
}
.industry-search-row{
  display: flex; gap: 16px;
  width: min(1180px, 92vw); margin: 0 auto;
}
.industry-search-input{
  flex: 1 1 auto;
  /* Solid dark-gray fill, matching the reference's visibly distinct
     input box — the previous near-transparent tint read as almost
     invisible against the section's navy background. */
  background: #1B1F26;
  border: 1px solid rgba(247,249,251,0.1);
  border-radius: 0;
  padding: 16px 20px;
  color: var(--frost);
  font-family: 'Inter', sans-serif; font-size: 14px;
}
.industry-search-input::placeholder{ color: rgba(247,249,251,0.4); }
.industry-search-input:focus{ outline: none; border-color: var(--gold); }
.industry-search-row .btn-gold{
  padding: 16px 30px; font-size: 14.5px; white-space: nowrap;
}
.industry-search-field{
  position: relative;
  flex: 1 1 auto;
  display: flex;
}
.industry-search-dropdown{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  background: #1B1F26;
  border: 1px solid rgba(232,184,75,0.28);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  max-height: 340px;
  overflow-y: auto;
}
.industry-search-result{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--frost);
  border-bottom: 1px solid rgba(247,249,251,0.06);
}
.industry-search-result:last-child{ border-bottom: none; }
.industry-search-result:hover,
.industry-search-result.active{
  background: rgba(232,184,75,0.1);
  color: var(--gold);
}
.industry-search-result .match-tag{
  font-size: 11.5px;
  color: rgba(247,249,251,0.45);
  font-style: italic;
  white-space: nowrap;
}
.industry-search-result:hover .match-tag,
.industry-search-result.active .match-tag{
  color: rgba(232,184,75,0.7);
}
.industry-search-empty{
  padding: 18px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: rgba(247,249,251,0.5);
  text-align: center;
}

.domains-section{
  background: var(--navy);
  width: 100%;
  padding: 60px 0 90px;
}
.domains-section > *{
  width: min(1180px, 92vw); margin-left: auto; margin-right: auto;
}
.domains-title{
  /* Self-contained centering (width + margin auto + text-align) rather
     than relying solely on the .domains-section > * wildcard rule
     above, so this heading centers even if that rule's specificity
     ever gets overridden by something else. */
  width: min(1180px, 92vw);
  margin: 0 auto 50px;
  text-align: center;
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(24px, 2.2vw, 34px);
  color: var(--frost);
}
.category{ border-top: 1px solid rgba(232,184,75,0.28); }
.category:last-child{ border-bottom: 1px solid rgba(232,184,75,0.28); }
.category-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 4px;
  cursor: pointer; user-select: none;
}
.category-header:hover .category-name{ color: var(--gold); }
.category-name{
  font-family: 'Playfair Display', serif; font-weight: 600;
  font-size: clamp(18px, 1.7vw, 23px);
  color: var(--frost);
  transition: color 0.25s ease;
}
.category-meta{ display: flex; align-items: center; }
.category-icon{
  width: 28px; height: 28px;
  border: 1px solid rgba(232,184,75,0.5); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.category-icon svg{
  width: 12px; height: 12px;
  stroke: var(--gold);
  transition: transform 0.35s ease;
}
.category.open .category-icon{ background: var(--gold); }
.category.open .category-icon svg{ stroke: var(--navy); transform: rotate(45deg); }
.category-body{
  max-height: 0; overflow: hidden;
  transition: max-height 0.5s cubic-bezier(.4,0,.2,1);
}
.category-list{ padding: 6px 4px 32px; }
.industry-row{
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(247,249,251,0.08);
}
.industry-row:last-child{ border-bottom: none; }
.industry-left{
  display: flex; align-items: center; gap: 12px;
  font-family: 'Inter', sans-serif; font-size: 14.5px;
  color: rgba(247,249,251,0.85);
}
.industry-left .dot{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
}
.industry-row .learn-more{
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--gold); white-space: nowrap; flex-shrink: 0;
}
.industry-row .learn-more:hover{ text-decoration: underline; }

@media (max-width: 640px){
  .industry-search-row{ flex-direction: column; }
  .industry-row{ flex-wrap: wrap; }
}