/* stylelint-disable no-descending-specificity */

/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/*
 * iOS Safari Compatibility Note:
 * Using legacy media query syntax (min-width/max-width) instead of modern range syntax.
 * iOS Safari (including iPad Mini 2021) does not support CSS Media Queries Level 4 range syntax.
 * Example: Use @media (max-width: 799px) instead of @media (width < 800px)
 */

@import url('./variables.css');
@import url('./spacings.css');
@import url('./typography.css');
@import url('./heading.css');

/* EN fallback: size-adjusted system sans-serif so font swap (Noto Sans) does not cause CLS */
@font-face {
  font-family: 'Noto Sans Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Segoe UI'), local('Liberation Sans');
  size-adjust: 100.5%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/*
 * Side nav layout: critical rules so container/rail have stable layout from first paint (mobile CLS).
 * Full styles load later with submenu block; these prevent shift when that CSS arrives.
 */
.side-navigation-layout-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.side-navigation-content-wrapper {
  width: 100%;
  min-width: 0;
}

@media (max-width: 1079px) {
  /* Same pattern as header/breadcrumb: sticky so rail stays in flow below breadcrumb. */

  /* z-index below breadcrumb (--z-index-content-overlay: 10) so breadcrumb is not overlapped. */
  .side-navigation-rail {
    position: sticky;
    top: calc(var(--nav-height) + var(--side-nav-breadcrumb-offset, 0px));
    left: var(--grid-margin-sm);
    right: var(--grid-margin-sm);
    z-index: 9;
  }

  /* Anchor targets: scroll-margin = viewport offset to bottom of sticky rail (set by JS). */
  .side-navigation-content-wrapper [id] {
    scroll-margin-top: var(--side-nav-content-offset-top, 100px);
  }
}

/* Smooth scroll for in-page anchor links (e.g. Text block); respects scroll-margin above */
html {
  scroll-behavior: smooth;
}

/* Start: Body */

html,
body {
    color: var(--nec-gray-90);
    font-family: var(--body-font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-scale-03);
    line-height: var(--line-height-xl);
    margin: 0;
}

/* Japanese */
html[lang|="ja"] {
    --body-font-family: var(--font-jp);

    font-family: var(--font-jp);
}

/*
 * Scroll margin for fixed header offset — pages without anchor-links block.
 * Uses each heading's margin-top (per design) so the scroll position shows
 * the heading and its required top spacing below the header.
 */
body:not(.has-anchor-links) :target {
  scroll-margin-top: calc(var(--nav-height, 54px) + var(--spacer-12, 80px));
}

body:not(.has-anchor-links) h1,
body:not(.has-anchor-links) h2 {
  scroll-margin-top: calc(var(--nav-height, 54px) + var(--spacer-12, 80px));
}

body:not(.has-anchor-links) h3 {
  scroll-margin-top: calc(var(--nav-height, 54px) + var(--spacer-06, 32px));
}

body:not(.has-anchor-links) h4 {
  scroll-margin-top: calc(var(--nav-height, 54px) + var(--spacer-05, 24px));
}

body:not(.has-anchor-links) h5 {
  scroll-margin-top: calc(var(--nav-height, 54px) + var(--spacer-04, 16px));
}

body:not(.has-anchor-links) h6 {
  scroll-margin-top: calc(var(--nav-height, 54px) + var(--spacer-02, 8px));
}

/* Simplified Chinese */
html[lang|="zh"] {
    --body-font-family: var(--font-sc);

    font-family: var(--font-sc);
}

/* Korean */
html[lang|="ko"] {
    --body-font-family: var(--font-ko);

    font-family: var(--font-ko);
}

/* All other languages default to Noto Sans */
html:not(:is([lang|="ja"], [lang|="zh"], [lang|="ko"])) {
    --body-font-family: var(--font-en);

    font-family: var(--font-en);
}

body.medium {
    font-weight: var(--font-weight-medium);
}

body.semibold {
    font-weight: var(--font-weight-semibold);
}

body.large {
    line-height: var(--line-height-xxl);
}

html[lang="ja"] body {
    line-height: var(--line-height-ja-xxl);
    letter-spacing: var(--letter-spacing-ja);
}

html[lang="ja"] body.large {
    line-height: var(--line-height-ja-xl);
}


.section {
    margin-bottom: var(--spacing-14);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-08);
}

.grid-columns > .section,
.section.bottom-margin-0px,
.grid-columns.bottom-margin-0px {
  margin-bottom: 0;
}

.section.bottom-margin-spacing07,
.grid-columns.bottom-margin-spacing07 {
  margin-bottom: var(--spacing-07);
}

.section.bottom-margin-spacing12,
.grid-columns.bottom-margin-spacing12 {
  margin-bottom: var(--spacing-12);
}

.section.bottom-margin-spacing14,
.grid-columns.bottom-margin-spacing14 {
  margin-bottom: var(--spacing-14);
}

.section.hidden[role="tabpanel"] {
  gap: 0;
}

.section.hidden[role="tabpanel"][hidden] {
  display: none;
}

/* Mobile first: Single column by default (0-799px) */
.grid-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}

main > .section:first-of-type, main > .grid-columns:first-of-type {
  margin-top: var(--spacing-12);
}


/* Body - TABLET VIEWPORT */

@media (min-width: 800px){
    body.large {
        font-size: var(--font-scale-04);
    }
}

/* End: Body */

input,
textarea,
select,
button:not(.feature-carousel-nav) {
  font: inherit;
}

body {
  overflow-x: hidden;
}

/* Prevent FOUC: Hide body content until header is loaded */
body:not(.appear) {
  opacity: 0;
}

body.appear {
  opacity: 1;
  transition: opacity 0.2s ease-in;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body.appear {
    transition: none;
  }
}

/* For removing default padding for storybook only */
#storybook-root > div {
  padding: 0 !important;
}

main, #storybook-root > div {
  max-width: var(--viewport-xl);
  padding-top: var(--nav-height);
  margin-left: 20px;
  margin-right: 20px;
}

/*  Main - TABLET VIEWPORT */

@media (min-width: 800px){
  main, #storybook-root > div {
    margin-left: 40px;
    margin-right: 40px;
  }
}

/*  Main - DESKTOP VIEWPORT */

@media (min-width: 1080px){
  main, #storybook-root > div {
    margin-left: 80px;
    margin-right: 80px;
  }
}

/*  Main - LARGE DESKTOP VIEWPORT */

@media (min-width: 1728px){
  main, #storybook-root > div {
    max-width: var(--viewport-xl);
    margin: 0 80px;
  }
}

@media (min-width: 1888px){
  main, #storybook-root > div {
    margin: auto;
  }
}

img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon img {
  width: 1em;  /* Scale with parent font size */
  height: 1em;
  vertical-align: middle;
  margin-left: 0.25em; /* Small gap from text */
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

:is(h1, h2, h3, h4, h5, h6) {
  word-wrap: break-word;
}

p {
  padding: 0;
  margin: 0;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Only for storybook */
.sb-show-main.sb-main-padded {
  padding: 0;
}

/* List styling */

ol, ul, ul li > p , ol li > p {
  margin: 0;
  padding: 0;
}

ol, ul {
  padding-left: 30px;
}

/* Unordered list → always disc */
ul {
  list-style-type: disc;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Ordered list levels */
ol {
  list-style-type: decimal; /* 1st level */
}

ol ol {
  list-style-type: lower-alpha; /* 2nd level */
}

ol ol ol {
  list-style-type: lower-roman; /* 3rd level */
}

/* 4th level: reset back to default (decimal) */
ol ol ol ol {
  list-style-type: decimal;
}

/* Section heading font sizes */
.section :is(.default-content-wrapper, .columns-wrapper) h1 {
  font-size: var(--heading-ootb-2xl);
}

.section :is(.default-content-wrapper, .columns-wrapper) h2 {
  font-size: var(--heading-ootb-xl);
}

.section :is(.default-content-wrapper, .columns-wrapper) h3 {
  font-size: var(--heading-ootb-lg);
}

.section :is(.default-content-wrapper, .columns-wrapper) h4 {
  font-size: var(--heading-ootb-md);
}

.section :is(.default-content-wrapper, .columns-wrapper) h5 {
  font-size: var(--heading-ootb-sm);
}

.section :is(.default-content-wrapper, .columns-wrapper) h6 {
  font-size: var(--heading-ootb-xs);
}

/* Section heading margins.
   A fragment can wrap tabs: .section.fragment-container > … > .section[role="tabpanel"].
   Using only .section:not([role="tabpanel"]) … fails because any inner .default-content-wrapper
   still matches the outer .section via the descendant combinator.
   Apply defaults to .section .default-content-wrapper headings, then reset in .section[role="tabpanel"]
   (tab-list.css uses flex gap on tab panel .default-content-wrapper). */
.section .default-content-wrapper h1,
.section .columns-wrapper h1,
#storybook-root h1 {
  margin-top: var(--spacer-12);
  margin-bottom: var(--spacer-12);
}

.section .default-content-wrapper h2,
.section .columns-wrapper h2,
#storybook-root h2 {
  margin-top: var(--spacer-12);
  margin-bottom: var(--spacer-07);
}

.section .default-content-wrapper h3,
.section .columns-wrapper h3,
#storybook-root h3 {
  margin-top: var(--spacer-06);
  margin-bottom: var(--spacer-06);
}

.section .default-content-wrapper h4,
.section .columns-wrapper h4,
#storybook-root h4 {
  margin-top: var(--spacer-05);
  margin-bottom: var(--spacer-05);
}

.section .default-content-wrapper h5,
.section .columns-wrapper h5,
#storybook-root h5 {
  margin-top: var(--spacer-04);
  margin-bottom: var(--spacer-04);
}

.section .default-content-wrapper h6,
.section .columns-wrapper h6,
#storybook-root h6 {
  margin-top: var(--spacer-02);
  margin-bottom: var(--spacer-02);
}

.section[role="tabpanel"] .default-content-wrapper :is(h1, h2, h3, h4, h5, h6),
.section[role="tabpanel"] .columns-wrapper :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  margin-bottom: 0;
}

.section .default-content-wrapper h1, #storybook-root h1,
.section .default-content-wrapper h2, #storybook-root h2,
.section .default-content-wrapper h3, #storybook-root h3,
.section .default-content-wrapper h4, #storybook-root h4,
.section .default-content-wrapper h5, #storybook-root h5,
.section .default-content-wrapper h6, #storybook-root h6,
.section .default-content-wrapper p, #storybook-root p,
.section .default-content-wrapper > div[data-aue-prop="text"] > p,
.section .default-content-wrapper ul, #storybook-root ul,
.section .default-content-wrapper ol, #storybook-root ol {
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
}

hr {
  color: var(--nec-gray-20);
}

.footnote-content.footnote-content-first {
  border-top: 1px solid var(--nec-gray-20);
  padding-top: 12px;
}

.footnote-content {
  font-size: var(--font-scale-02);
}

p.footnote-content, .footnote-content li {
  line-height: var(--line-height-xs);
  min-height: 19px;
}

.section .default-content-wrapper p.footnote-content, 
.section .default-content-wrapper .footnote-content li {
  padding-bottom: 0;
  margin-bottom: 0;
  box-sizing: unset;
}

.section .default-content-wrapper .footnote-content li {
  margin-bottom: 0;
}

/* Icon scaling for different contexts */
p .icon img {
  width: 1em;      /* match font-size of the parent text */
  height: 1em;     /* keep it square */
  vertical-align: middle; /* align with the text baseline */
}

/* Icon scaling for headings */
h1 .icon img,
h2 .icon img,
h3 .icon img,
h4 .icon img,
h5 .icon img,
h6 .icon img {
  width: 1em;    /* Slightly smaller than heading font size */
  height: 1em;
  vertical-align: middle;

}

sub, sup {
  font-size: calc(1em * 0.70); /* 70% of parent font size */
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.4em;
}

sub {
  bottom: -0.25em;
}

.grid-columns .block {
  margin: 0;
}

@media (max-width: 799px) {
  .grid-columns .section:not(:has(div)) {
    display: none;
  }

}


/* Right indent Section - Heading - TABLET VIEWPORT */

@media (min-width: 800px) {
  .section.right-aligned-content > .default-content-wrapper > h1 ,
  .section.right-aligned-content > .default-content-wrapper > h2 ,
  .section.right-aligned-content > .default-content-wrapper > h3 ,
  .section.right-aligned-content > .default-content-wrapper > h4 ,
  .section.right-aligned-content > .default-content-wrapper > h5 ,
  .section.right-aligned-content > .default-content-wrapper > h6,
  .section.right-aligned-content > .default-content-wrapper > p {
    padding-left: calc(var(--grid-column-tab-width-2) + (var(--grid-gutter) * 2)); 
  }
}

/* Right indent Section - Text - TABLET VIEWPORT */

@media (min-width: 800px) {
  .section.right-aligned-content > .default-content-wrapper > ol,
  .section.right-aligned-content > .default-content-wrapper > ul {
    padding-left: calc(var(--grid-column-tab-width-4) + (var(--grid-gutter) * 4) + 30px); /* 30px for list indent */
  }
}

/* Right indent Section - Heading and Text - DESKTOP VIEWPORT */

@media (min-width: 1080px) {
  .section.right-aligned-content > .default-content-wrapper > h1 ,
  .section.right-aligned-content > .default-content-wrapper > h2 ,
  .section.right-aligned-content > .default-content-wrapper > h3 ,
  .section.right-aligned-content > .default-content-wrapper > h4 ,
  .section.right-aligned-content > .default-content-wrapper > h5 ,
  .section.right-aligned-content > .default-content-wrapper > h6,
  .section.right-aligned-content > .default-content-wrapper > p {
      padding-left: calc(var(--grid-column-width-4) + (var(--grid-gutter) * 4));
  }

  .section.right-aligned-content > .default-content-wrapper > ol,
  .section.right-aligned-content > .default-content-wrapper > ul {
      padding-left: calc(var(--grid-column-width-4) + (var(--grid-gutter) * 4) + 30px); /* 30px for list indent */
  }
}

.grid-columns .section > div p {
  max-width: 100%;
}

.section.left-align-text > .default-content-wrapper > p {
    text-align: left;
}

/* Same nested-.section issue as heading margins: use .section … then reset tab panels */
.section .default-content-wrapper > p,
.section .default-content-wrapper > ul,
.section .default-content-wrapper > ol,
.section .default-content-wrapper div[data-aue-prop="text"] > p,
.section .default-content-wrapper div[data-aue-prop="text"] > ul,
.section .default-content-wrapper div[data-aue-prop="text"] > ol,
.section .columns-wrapper  p,
.section .columns-wrapper  ul,
.section .columns-wrapper  ol,
.section .columns-wrapper div[data-aue-prop="text"]  p,
.section .columns-wrapper div[data-aue-prop="text"]  ul,
.section .columns-wrapper div[data-aue-prop="text"]  ol,
#storybook-root p,
#storybook-root ul,
#storybook-root ol {
  margin-bottom: var(--spacer-07);
}

.section[role="tabpanel"] .default-content-wrapper > p,
.section[role="tabpanel"] .default-content-wrapper > ul,
.section[role="tabpanel"] .default-content-wrapper > ol,
.section[role="tabpanel"] .default-content-wrapper div[data-aue-prop="text"] > p,
.section[role="tabpanel"] .default-content-wrapper div[data-aue-prop="text"] > ul,
.section[role="tabpanel"] .default-content-wrapper div[data-aue-prop="text"] > ol,
.section[role="tabpanel"] .columns-wrapper p,
.section[role="tabpanel"] .columns-wrapper ul,
.section[role="tabpanel"] .columns-wrapper ol,
.section[role="tabpanel"] .columns-wrapper div[data-aue-prop="text"] p,
.section[role="tabpanel"] .columns-wrapper div[data-aue-prop="text"] ul,
.section[role="tabpanel"] .columns-wrapper div[data-aue-prop="text"] ol {
  margin-bottom: 0;
}

.section .default-content-wrapper div[data-aue-prop="text"] > p.footnote-content,
.section .default-content-wrapper div[data-aue-prop="text"] > .footnote-content ul,
.section .default-content-wrapper div[data-aue-prop="text"] > .footnote-content ol {
  margin-bottom: 0;
  box-sizing: unset;
}

.section.center-align-text > .default-content-wrapper > :is(h1, h2, h3, h4, h5, h6, p) {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section.center-align-text > .default-content-wrapper div[data-aue-prop="text"] > :is(h1, h2, h3, h4, h5, h6, p) {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section.right-align-text > .default-content-wrapper div[data-aue-prop="text"] > :is(h1, h2, h3, h4, h5, h6, p) {
  text-align: right;
}

.section.right-align-text > .default-content-wrapper > :is(h1, h2, h3, h4, h5, h6, p) {
  text-align: right;
}

/* :not(:has(.section)) limits alignment to "leaf" sections so fragment inner sections keep their own alignment */
.section.right-align-text:not(:has(.section)) .images-wrapper .images-container.images-size-small,
.section.right-align-text:not(:has(.section)) .images-wrapper .images-container.images-size-medium {
  margin-right: 0;
}

.section.left-align-text:not(:has(.section)) .images-wrapper .images-container.images-size-small,
.section.left-align-text:not(:has(.section)) .images-wrapper .images-container.images-size-medium {
  margin-left: 0;
}

.section.right-align-text:not(:has(.section)) div.video-wrapper .video .video-wrapper.video-50,
.section.right-align-text:not(:has(.section)) div.video-wrapper .video .video-wrapper.video-25,
.section.right-align-text:not(:has(.section)) div.video-wrapper .video .video-caption {
  margin-right: 0;
}

.section.left-align-text:not(:has(.section)) div.video-wrapper .video .video-wrapper.video-50,
.section.left-align-text:not(:has(.section)) div.video-wrapper .video .video-wrapper.video-50 ~ .video-caption,
.section.left-align-text:not(:has(.section)) div.video-wrapper .video .video-wrapper.video-25,
.section.left-align-text:not(:has(.section)) div.video-wrapper .video .video-wrapper.video-25 ~ .video-caption {
  margin-left: 0;
}

.section.right-align-text:not(:has(.section)) .buttons-wrapper,
.section.right-align-text:not(:has(.section)) .columns-wrapper {
  text-align: right;
}

.section.left-align-text:not(:has(.section)) .buttons-wrapper,
.section.left-align-text:not(:has(.section)) .columns-wrapper {
  text-align: left;
}

.section.center-align-text:not(:has(.section)) .buttons-wrapper,
.section.center-align-text:not(:has(.section)) .columns-wrapper {
  text-align: center;
}

/* Reveal More / Expand-Collapse Styles - Class-based like footnotes */
.reveal-more-content {
  transition: opacity var(--transition-medium) ease-out;
}

.reveal-more-content.collapsed {
  display: none;
}

.reveal-more-content.expanded {
  display: block;
}

/* Inline reveal more content (span wrapper) */
span.reveal-more-content.collapsed {
  display: none;
}

span.reveal-more-content.expanded {
  display: inline;
}

/* Last block element in a reveal more section */
.reveal-more-content.expanded:last-child:not(span),
.reveal-more-content.expanded + *:not(.reveal-more-content, span) {
  padding-bottom: 1rem;
  border-radius: 0 0 4px 4px;
}

/* Reveal More Button Styles - Proper button styling for toggle functionality */
button.reveal-more-toggle {
  display: inline;
  color: var(--nec-gray-90);
  text-decoration: underline;
  padding: 0;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  transition: color var(--transition-medium) ease-out;
}

.grid-columns > div {
  display: flex;
  flex-direction: column;
  justify-content: start;
  max-width: 100%;
  margin-inline-start: 0;
  min-width: 0; /* Allow flex items to shrink below content size */
}

/* Mobile: All columns span full width (single column grid) */
@media (max-width: 799px) {
  .grid-columns [class^="span-col-"],
  .grid-columns [class*=" span-col-"] {
    grid-column: span 1;
  }
}

@media (min-width: 800px) and (max-width: 1079px) {
  .grid-columns {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: var(--grid-gutter);
      row-gap: 0;
  }

  /* Base rule: span-col-* without tablet-span-col-* uses desktop span on tablet (max 8) */
  .grid-columns .span-col-1:not([class*="tablet-span-col-"]) { grid-column: span 1; }
  .grid-columns .span-col-2:not([class*="tablet-span-col-"]) { grid-column: span 2; }
  .grid-columns .span-col-3:not([class*="tablet-span-col-"]) { grid-column: span 3; }
  .grid-columns .span-col-4:not([class*="tablet-span-col-"]) { grid-column: span 4; }
  .grid-columns .span-col-5:not([class*="tablet-span-col-"]) { grid-column: span 5; }
  .grid-columns .span-col-6:not([class*="tablet-span-col-"]) { grid-column: span 6; }
  .grid-columns .span-col-7:not([class*="tablet-span-col-"]) { grid-column: span 7; }

  .grid-columns .span-col-8:not([class*="tablet-span-col-"]),
  .grid-columns .span-col-9:not([class*="tablet-span-col-"]),
  .grid-columns .span-col-10:not([class*="tablet-span-col-"]),
  .grid-columns .span-col-11:not([class*="tablet-span-col-"]),
  .grid-columns .span-col-12:not([class*="tablet-span-col-"]) { 
    grid-column: span 8; 
  }

  /* High specificity: tablet-span-col-* overrides span-col-* */
  .grid-columns .tablet-span-col-1 { grid-column: span 1; }
  .grid-columns .tablet-span-col-2 { grid-column: span 2; }
  .grid-columns .tablet-span-col-3 { grid-column: span 3; }
  .grid-columns .tablet-span-col-4 { grid-column: span 4; }
  .grid-columns .tablet-span-col-5 { grid-column: span 5; }
  .grid-columns .tablet-span-col-6 { grid-column: span 6; }
  .grid-columns .tablet-span-col-7 { grid-column: span 7; }
  .grid-columns .tablet-span-col-8 { grid-column: span 8; }
}

@media (min-width: 1080px) {
  .grid-columns {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--grid-gutter);
      row-gap: 0;
  }

  .grid-columns [class^="span-col-"] {
    grid-column: span 1;
  }

  .grid-columns .span-col-1  { grid-column: span 1; }
  .grid-columns .span-col-2  { grid-column: span 2; }
  .grid-columns .span-col-3  { grid-column: span 3; }
  .grid-columns .span-col-4  { grid-column: span 4; }
  .grid-columns .span-col-5  { grid-column: span 5; }
  .grid-columns .span-col-6  { grid-column: span 6; }
  .grid-columns .span-col-7  { grid-column: span 7; }
  .grid-columns .span-col-8  { grid-column: span 8; }
  .grid-columns .span-col-9  { grid-column: span 9; }
  .grid-columns .span-col-10 { grid-column: span 10; }
  .grid-columns .span-col-11 { grid-column: span 11; }
  .grid-columns .span-col-12 { grid-column: span 12; }

  .grid-columns .desktop-hide {
    display: none;
  }
}

@media (min-width: 800px) and (max-width: 1079px) {
  .grid-columns .tablet-hide {
    display: none;
  } 
}

@media (max-width: 799px) {
  .grid-columns .mobile-hide {
    display: none;
  }

  /* Anchor-links pages use dynamic sticky-space padding; avoid double top gap from base first-section margin. */
  body.has-anchor-links main > .section:first-of-type,
  body.has-anchor-links main > .grid-columns:first-of-type {
    margin-top: 0;
  }

  body.has-anchor-links .side-navigation-content-wrapper > .section:first-of-type,
  body.has-anchor-links .side-navigation-content-wrapper > .grid-columns:first-of-type {
    margin-top: 0;
  }

  /*
   * Fixed mobile anchor-links sit above content but are out of flow; reserve space on the first
   * content section so headings are not covered on first paint (including when anchor block is
   * not the first wrapper in the same section). --anchor-links-sticky-height is set by anchor-links.js.
   */
  body.has-anchor-links main > .breadcrumbs + .section,
  body.has-anchor-links main > .breadcrumbs + .grid-columns {
    padding-top: var(--anchor-links-sticky-height, 46px);
  }

  body.has-anchor-links main > .breadcrumbs + .side-navigation-layout-container .side-navigation-content-wrapper > .section:first-of-type,
  body.has-anchor-links main > .breadcrumbs + .side-navigation-layout-container .side-navigation-content-wrapper > .grid-columns:first-of-type {
    padding-top: var(--anchor-links-sticky-height, 46px);
  }

  body.has-anchor-links main:not(:has(> .breadcrumbs)) > .section:first-of-type,
  body.has-anchor-links main:not(:has(> .breadcrumbs)) > .grid-columns:first-of-type {
    padding-top: var(--anchor-links-sticky-height, 46px);
  }

  /* Only set margin-bottom: 0 if section has ONLY anchor-links-wrapper and no other wrapper elements.
     This ensures sections with default-content-wrapper (or other wrappers) keep their margin */
  @supports selector(:has(*)) {
    .section:has(>.anchor-links-wrapper):not(:has(> [class*="-wrapper"]:not(.anchor-links-wrapper))) {
      margin-bottom: 0;
    }
  } 
}

/* Button default (Filled) styling */

.button,
a.button {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--nec-sky-50);
  border: 1px solid var(--nec-sky-50);
  color: var(--nec-gray-0);
  font-size: var(--font-scale-02);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs-px);
  text-decoration: none;
  cursor: pointer;
  gap: var(--spacer-01);
  border-radius: var(--border-radius-0);
  padding: 9px 16px;
  transition: all var(--transition-medium) ease-out;
}

html[lang="ja"] .button,
html[lang="ja"] a.button {
    line-height: var(--line-height-ja-xxxl);
    letter-spacing: var(--letter-spacing-ja);
}

.button img,
a.button img {
  /* white icon */
  filter: brightness(0) invert(1);
  transition: all var(--transition-medium) ease-out;
}

.button .icon,
a.button .icon {
    min-height: 20px;
    min-width: 20px;
    height: 20px;
    width: 20px;
    max-height: 20px;
    max-width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.button .icon img,
a.button .icon img {
  height: 100%;
  width: 100%;
  margin-left: 0;
}

.button:hover,
a.button:hover {
    color: var(--nec-gray-0);
    background-color: var(--nec-blue-50);
    border: 1px solid var(--nec-blue-50);
}

.button:active,
a.button:active {
    color: var(--nec-blue-50);
    background-color: var(--nec-sky-05);
    border: 1px solid var(--nec-sky-05);
}

.button:active img,
a.button:active img {
    /* nec-blue-50 icon */
    filter: brightness(0) saturate(100%) invert(13%) sepia(79%) saturate(5187%) hue-rotate(235deg) brightness(88%) contrast(108%);
}

/* If the first child is an icon → adjust left padding */
.button:has(> .icon:first-child),
a.button:has(> .icon:first-child) {
  padding-left: 12px;
}

/* If the last child is an icon → adjust right padding */
.button:has(> .icon:last-child),
a.button:has(> .icon:last-child) {
  padding-right: 12px;
}

.button:has(> .icon:only-child),
a.button:has(> .icon:only-child) {
  padding: 9px;
}

/* External link anchor - displays arrow icon after the link text */

a.external-link-anchor {
  display: inline-flex;
  align-items: center;
}

/* Not for stats block external link */
.stats-item a.external-link-anchor {
  display: block;
}

.stats-item a.external-link-anchor::after {
  display: none;
}

a.external-link-anchor.button {
  padding-right: var(--spacer-03);
}

a.external-link-anchor::after {
  content: '';
  display: inline-block;
  width: 1.43em;
  height: 1.43em;
  min-width: 1.43em;
  min-height: 1.43em;
  margin-left: var(--spacer-01);
  background-color: currentcolor;
  /* stylelint-disable property-no-vendor-prefix */
  -webkit-mask-image: url('../icons/arrowoutward.svg');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  /* stylelint-enable property-no-vendor-prefix */
  mask-image: url('../icons/arrowoutward.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  vertical-align: middle;
  flex-shrink: 0;
}

a.external-link-anchor.button::after {
  margin-left: 0;
}


/* Adjust top margin of text that is next to a custom block */
.section .default-content-wrapper:not(:first-child) > h1:first-child,
.section
    .default-content-wrapper:not(:first-child)
    > div:first-child
    > h1:first-child,
.section .default-content-wrapper:not(:first-child) > h2:first-child,
.section
    .default-content-wrapper:not(:first-child)
    > div:first-child
    > h2:first-child {
    margin-top: calc(var(--spacer-12) - var(--spacing-08));
}

/* Override: cancel "next to custom block" margins inside tab panels (outer .section matches nested panels) */
.section[role="tabpanel"] .default-content-wrapper:not(:first-child) > h1:first-child,
.section[role="tabpanel"]
    .default-content-wrapper:not(:first-child)
    > div:first-child
    > h1:first-child,
.section[role="tabpanel"] .default-content-wrapper:not(:first-child) > h2:first-child,
.section[role="tabpanel"]
    .default-content-wrapper:not(:first-child)
    > div:first-child
    > h2:first-child {
    margin-top: 0;
    margin-bottom: 0;
}

/* Adjust bottom margin of text that a custom block is next to it */
.section .default-content-wrapper:not(:last-child) > h1:last-child,
.section .default-content-wrapper:not(:last-child) > div:last-child > h1:last-child {
    margin-bottom: calc(var(--spacer-12) - var(--spacing-08));
}

.section[role="tabpanel"] .default-content-wrapper:not(:last-child) > h1:last-child,
.section[role="tabpanel"] .default-content-wrapper:not(:last-child) > div:last-child > h1:last-child {
    margin-bottom: 0;
}

.section .default-content-wrapper:not(:first-child) > h3:first-child,
.section
    .default-content-wrapper:not(:first-child)
    > div:first-child
    > h3:first-child,
.section .default-content-wrapper:not(:first-child) > h4:first-child,
.section
    .default-content-wrapper:not(:first-child)
    > div:first-child
    > h4:first-child,
.section .default-content-wrapper:not(:first-child) > h5:first-child,
.section
    .default-content-wrapper:not(:first-child)
    > div:first-child
    > h5:first-child,
.section .default-content-wrapper:not(:first-child) > h6:first-child,
.section
    .default-content-wrapper:not(:first-child)
    > div:first-child
    > h6:first-child {
    margin-top: 0;
}

.section .default-content-wrapper:not(:last-child) > h2:last-child,
.section .default-content-wrapper:not(:last-child) > div:last-child > h2:last-child,
.section .default-content-wrapper:not(:last-child) > h3:last-child,
.section .default-content-wrapper:not(:last-child) > div:last-child > h3:last-child,
.section .default-content-wrapper:not(:last-child) > h4:last-child,
.section .default-content-wrapper:not(:last-child) > div:last-child > h4:last-child,
.section .default-content-wrapper:not(:last-child) > h5:last-child,
.section .default-content-wrapper:not(:last-child) > div:last-child > h5:last-child,
.section .default-content-wrapper:not(:last-child) > h6:last-child,
.section .default-content-wrapper:not(:last-child) > div:last-child > h6:last-child {
    margin-bottom: 0;
}

.section .default-content-wrapper:not(:last-child) > p:last-child,
.section .default-content-wrapper:not(:last-child) > div:last-child > p:last-child,
.section .default-content-wrapper:not(:last-child) > ul:last-child,
.section .default-content-wrapper:not(:last-child) > div:last-child > ul:last-child,
.section .default-content-wrapper:not(:last-child) > ol:last-child,
.section .default-content-wrapper:not(:last-child) > div:last-child > ol:last-child {
    margin-bottom: 0;
}