/* ────────────────────────────────────────────────────────────────────
   page-sector.css
   Sector-specific styles extracted from page.css:
   Sector Archive Intro, Sector Sidebar, Sector Accordion + CTA +
   Accreditations + Share, Sector Subnav, Sectors Hub.
   ──────────────────────────────────────────────────────────────────── */

@layer components {

  /* ════════════════════════════════════════════════════════════════════
     SECTOR ARCHIVE — intro strip
     ════════════════════════════════════════════════════════════════════ */

  .sector-intro {
    max-inline-size: 65ch;
  }

  .sector-intro__heading {
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    color: var(--text-accent);
    margin: 0;
  }

  .sector-intro__text {
    color: var(--text-body);
    line-height: var(--leading-relaxed);
  }


  /* ════════════════════════════════════════════════════════════════════
     SECTOR SIDEBAR
     ════════════════════════════════════════════════════════════════════ */

  .sector-sidebar__panel {
    background-color: var(--surface-tinted);
    border: var(--card-border);
    border-block-start: var(--card-accent-strip);
    border-radius: var(--card-radius);
    padding: var(--space-l);
    position: sticky;
    top: calc(var(--header-height) + var(--space-l));
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }

  .sector-sidebar__title {
    margin: 0;
    font-size: var(--text-m);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-accent);
  }

  .sector-sidebar__groups {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .sector-sidebar__group-link,
  .sector-sidebar__group-label {
    display: block;
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
    text-decoration: none;
    padding-block-end: var(--space-2xs);
    border-block-end: 1px solid var(--border-muted);
  }

  .sector-sidebar__group-link:hover {
    color: var(--text-accent);
  }

  .sector-sidebar__items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-block-start: var(--space-xs);
  }

  .sector-sidebar__link {
    display: block;
    padding-block: var(--space-2xs);
    padding-inline: var(--space-s);
    font-size: var(--text-s);
    color: var(--text-body);
    text-decoration: none;
    border-radius: var(--radius-xs);
    border-inline-start: 2px solid transparent;
    transition:
      color            var(--duration-fast) var(--ease-default),
      background-color var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default);
  }

  .sector-sidebar__link:hover {
    background-color: var(--surface-highlight);
    color: var(--text-accent);
  }

  .sector-sidebar__link--active {
    color: var(--text-accent);
    font-weight: var(--weight-semibold);
    border-inline-start-color: var(--card-accent);
    background-color: var(--surface-highlight);
  }

  /* Service sub-items (indented) */
  .sector-sidebar__services {
    list-style: none;
    padding-inline-start: var(--space-m);
    border-inline-start: 1px solid var(--border-muted);
    margin-block-start: var(--space-2xs);
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .sector-sidebar__service-link {
    display: block;
    padding-block: var(--space-3xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-default);
  }

  .sector-sidebar__service-link:hover,
  .sector-sidebar__service-link--active {
    color: var(--text-accent);
  }

  .sector-sidebar__service-link--active {
    font-weight: var(--weight-semibold);
  }

  /* Contact block at bottom of sidebar */
  .sector-sidebar__contact {
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--border-muted);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .sector-sidebar__contact-title {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .sector-sidebar__contact-item {
    margin: 0;
    font-size: var(--text-s);
  }

  .sector-sidebar__contact-item a {
    color: var(--text-link);
    text-decoration: none;
  }

  .sector-sidebar__contact-item a:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
  }

  .sector-sidebar__cta,
  .sector-sidebar__cta:visited,
  .sector-sidebar__cta:hover {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-m);
    background-color: var(--surface-primary);
    color: var(--text-on-primary);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    border-radius: var(--radius-s);
    transition:
      background-color var(--duration-fast) var(--ease-default),
      transform        var(--duration-fast) var(--ease-default);
  }

  .sector-sidebar__cta:hover {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
  }


  /* ════════════════════════════════════════════════════════════════════
     SECTOR SIDEBAR — Accordion + CTA + Accreditations + Share
     ════════════════════════════════════════════════════════════════════ */

  .sector-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }

  /* ── Accordion nav ── */
  .sector-accordion {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xs);
    overflow: hidden;
  }

  .sector-accordion__item {
    border-block-end: 1px solid var(--border-default);
  }

  .sector-accordion__item:last-child {
    border-block-end: none;
  }

  /* ── Heading row: link + toggle button side by side ── */
  .sector-accordion__heading {
    display: flex;
    align-items: center;
    background: var(--white);
    transition: background-color var(--duration-fast) var(--ease-default);
  }

  .sector-accordion__heading:hover {
    background-color: var(--surface-tinted);
  }

  /* Active sector — teal background */
  .sector-accordion__heading--active {
    background-color: var(--surface-primary);
  }

  .sector-accordion__heading--active .sector-accordion__link {
    color: var(--text-on-primary);
    font-weight: var(--weight-bold);
  }

  .sector-accordion__heading--active .sector-accordion__icon {
    border-color: var(--text-on-primary);
    transform: rotate(-135deg);
    opacity: 1;
  }

  .sector-accordion__heading--active:hover {
    background-color: var(--primary-hover);
  }

  /* Sector name link — takes most of the row */
  .sector-accordion__link {
    flex: 1;
    padding: var(--space-s) var(--space-m);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
    text-decoration: none;
  }

  .sector-accordion__link:hover {
    text-decoration: underline;
  }

  /* Toggle button — right side, just the chevron */
  .sector-accordion__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-s) var(--space-m);
    background: none;
    border: none;
    border-inline-start: 1px solid var(--border-subtle);
    cursor: pointer;
    flex-shrink: 0;
  }

  .sector-accordion__heading--active .sector-accordion__toggle {
    border-inline-start-color: oklch(100% 0 0 / 20%);
  }

  /* Chevron icon */
  .sector-accordion__icon {
    flex-shrink: 0;
    display: inline-block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform var(--duration-normal) var(--ease-default);
    opacity: 0.6;
  }

  /* ── Panel (children list) ── */
  .sector-accordion__panel {
    overflow: hidden;
  }

  .sector-accordion__panel.is-animating {
    display: block;
    transition: block-size var(--duration-normal) var(--ease-default);
  }

  .sector-accordion__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .sector-accordion__child-link {
    display: block;
    padding: var(--space-xs) var(--space-m) var(--space-xs) var(--space-l);
    font-size: var(--text-s);
    color: var(--text-body);
    text-decoration: none;
    border-block-end: 1px solid var(--border-subtle);
    transition:
      color            var(--duration-fast) var(--ease-default),
      background-color var(--duration-fast) var(--ease-default);
  }

  .sector-accordion__child:last-child .sector-accordion__child-link {
    border-block-end: none;
  }

  .sector-accordion__child-link:hover {
    color: var(--text-accent);
    background-color: var(--surface-tinted);
  }

  /* ── CTA Card (dark bg) ── */
  .sector-sidebar__cta-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-xl) var(--space-l);
    background-color: var(--primary-dark);
    border-radius: var(--radius-xs);
    text-align: center;
    color: var(--text-on-dark);
  }

  .sector-sidebar__cta-icon {
    opacity: 0.8;
  }

  .sector-sidebar__cta-heading {
    margin: 0;
    font-size: var(--text-l);
    font-weight: var(--weight-bold);
    color: var(--text-on-dark);
  }

  .sector-sidebar__cta-btn {
    inline-size: 100%;
    justify-content: center;
  }

  /* ── Accreditations badges ── */
  .sector-sidebar__accreditations {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-l);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xs);
  }

  .sector-sidebar__accreditations-title {
    margin: 0;
    font-size: var(--text-s);
    font-weight: var(--weight-bold);
    color: var(--text-main);
  }

  .sector-sidebar__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .sector-sidebar__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2xs) var(--space-s);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-accent);
    border: 1px solid var(--card-accent);
    border-radius: var(--radius-xs);
    white-space: nowrap;
  }

  /* ── Social share ── */
  .sector-sidebar__share {
    display: flex;
    align-items: center;
    gap: var(--space-s);
  }

  .sector-sidebar__share-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .sector-sidebar__social {
    display: flex;
    gap: var(--space-xs);
  }

  .sector-sidebar__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-round);
    background: var(--surface-tinted);
    color: var(--text-body);
    transition:
      background-color var(--duration-fast) var(--ease-default),
      color            var(--duration-fast) var(--ease-default);
  }

  .sector-sidebar__social-link:hover {
    background: var(--surface-primary);
    color: var(--text-on-primary);
  }


  /* ════════════════════════════════════════════════════════════════════
     SECTOR SUBNAV — horizontal scrollable pill tabs
     Used on sector archive pages to navigate child/sibling sub-sectors.
     ════════════════════════════════════════════════════════════════════ */

  /* Horizontal scroll tabs — left gutter aligns with page content,
     right edge clips mid-pill so the user sees ~10% of the next tab
     as a visual cue that more content is scrollable. */
  .sector-subnav {
    overflow-x: hidden;
    padding-block: var(--space-s);
    padding-inline-start: var(--gutter);
    padding-inline-end: 0;
    border-block-end: 1px solid var(--border-subtle);
  }

  .sector-subnav__list {
    display: flex;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
    padding-inline-end: var(--gutter);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    /* Mask fades the right edge so the clipped pill is clearly "more" */
    mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent);
  }

  .sector-subnav__list::-webkit-scrollbar {
    display: none;
  }

  .sector-subnav__list > * {
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .sector-subnav__link {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 1rem;
    border-radius: var(--radius-pill);
    /* Teal-ultra-light default — clearly in the brand family */
    border: 1px solid var(--primary-semi-light);
    background-color: var(--primary-ultra-light);
    color: var(--primary-dark);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      color            var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default);
  }

  .sector-subnav__link:hover,
  .sector-subnav__link:focus-visible {
    /* Blush on hover — the warm secondary colour */
    background-color: var(--secondary);
    border-color: var(--secondary-semi-dark);
    color: var(--text-main);
    outline: none; /* border replaces focus ring here */
  }

  .sector-subnav__link[aria-current="page"],
  .sector-subnav__link--active {
    background-color: var(--surface-primary);
    border-color: var(--card-accent);
    color: var(--text-on-primary);
  }

  .sector-subnav__link[aria-current="page"]:hover,
  .sector-subnav__link--active:hover {
    background-color: var(--primary-dark, var(--primary));
    border-color: var(--primary-dark, var(--primary));
  }


  /* ════════════════════════════════════════════════════════════════════
     SECTORS HUB — /sectors/ archive listing all parent sectors
     ════════════════════════════════════════════════════════════════════ */

  .sectors-hub__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }

  @media (width >= 36em) {
    .sectors-hub__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (width >= 64em) {
    .sectors-hub__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .sectors-hub__card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--space-l);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--card-radius);
    border-block-start: var(--card-accent-strip);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--duration-fast) var(--ease-default),
                transform var(--duration-fast) var(--ease-default);
  }

  .sectors-hub__card:hover {
    box-shadow: var(--shadow-m);
    transform: translateY(-2px);
  }

  .sectors-hub__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
  }

  .sectors-hub__name {
    font-size: var(--text-l);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    line-height: var(--leading-tight);
  }

  .sectors-hub__desc {
    font-size: var(--text-s);
    color: var(--text-muted);
    line-height: var(--leading-normal);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .sectors-hub__meta {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .sectors-hub__arrow {
    font-size: var(--text-l);
    color: var(--icon-color);
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-default);
  }

  .sectors-hub__card:hover .sectors-hub__arrow {
    transform: translateX(4px);
  }

} /* end @layer components */