/**
 * SJM Holdings — global foundation
 *
 * This file deliberately contains only tokens, reset, typography, layout
 * primitives and accessibility defaults. Component-specific rules belong in
 * their own library files (header, navigation, cards, forms, etc.).
 */

@layer sjm-reset, sjm-base, sjm-utilities;

@layer sjm-reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
  }

  img,
  picture,
  svg,
  video,
  canvas {
    display: block;
    max-width: 100%;
  }

  img,
  video {
    height: auto;
  }

  button,
  input,
  textarea,
  select {
    color: inherit;
    font: inherit;
  }

  button,
  [type="button"],
  [type="submit"],
  [type="reset"] {
    -webkit-appearance: none;
    appearance: none;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
}

@layer sjm-base {
  :root {
    /* Brand */
    --sjm-color-brand: #00a76d;
    --sjm-color-brand-dark: #084533;
    --sjm-color-gold: #a8996e;

    /* Neutrals */
    --sjm-color-text: #111111;
    --sjm-color-text-secondary: #555555;
    --sjm-color-text-muted: #8a8a87;
    --sjm-color-line: #d8d8d5;
    --sjm-color-line-strong: #111111;
    --sjm-color-surface: #ffffff;
    --sjm-color-surface-subtle: #fafafa;
    --sjm-color-surface-muted: #f6f6f4;
    --sjm-color-focus: #00a76d;
    --sjm-color-error: #b00020;

    /* Typography */
    --sjm-font-sans:
      "Gill Sans MT", "Gill Sans", "Gill Sans Nova", Calibri, "PingFang TC",
      "Microsoft JhengHei", "Noto Sans TC", sans-serif;
    --sjm-font-size-root: 16px;
    --sjm-font-size-body: 1rem;
    --sjm-line-height-body: 1.75;
    --sjm-letter-spacing-label: 0.08em;

    /* Spacing: 8px base unit */
    --sjm-space-1: 0.25rem;
    --sjm-space-2: 0.5rem;
    --sjm-space-3: 0.75rem;
    --sjm-space-4: 1rem;
    --sjm-space-5: 1.5rem;
    --sjm-space-6: 2rem;
    --sjm-space-7: 3rem;
    --sjm-space-8: 4rem;
    --sjm-space-9: 5.5rem;
    --sjm-space-10: 6rem;

    /* Layout */
    --sjm-content-max: 80rem;
    --sjm-reading-max: 56.25rem;
    --sjm-page-gutter: 2.5rem;
    --sjm-section-space: 5.5rem;

    /* Motion */
    --sjm-duration-fast: 160ms;
    --sjm-duration-base: 240ms;
    --sjm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  }

  html {
    background: var(--sjm-color-surface);
    font-size: var(--sjm-font-size-root);
  }

  body {
    min-width: 20rem;
    overflow-x: clip;
    background: var(--sjm-color-surface);
    color: var(--sjm-color-text);
    font-family: var(--sjm-font-sans);
    font-size: var(--sjm-font-size-body);
    font-weight: 400;
    line-height: var(--sjm-line-height-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::selection {
    background: var(--sjm-color-text);
    color: var(--sjm-color-surface);
  }

  a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
    transition:
      color var(--sjm-duration-fast) var(--sjm-ease-standard),
      text-decoration-color var(--sjm-duration-fast) var(--sjm-ease-standard);
  }

  a:hover {
    color: var(--sjm-color-brand);
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid var(--sjm-color-focus);
    outline-offset: 3px;
  }

  button,
  [type="button"],
  [type="submit"],
  [type="reset"] {
    cursor: pointer;
  }

  button:disabled,
  input:disabled,
  select:disabled,
  textarea:disabled,
  [aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
  }

  h1,
  h2,
  h3,
  h4 {
    color: var(--sjm-color-text);
    font: inherit;
    font-weight: 600;
    text-wrap: balance;
  }

  h1 {
    font-size: clamp(2.5rem, 2.15rem + 1.1vw, 2.75rem);
    line-height: 1.15;
  }

  h2 {
    font-size: clamp(2rem, 1.7rem + 0.9vw, 2.25rem);
    line-height: 1.2;
  }

  h3 {
    font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.75rem);
    line-height: 1.3;
  }

  p,
  li,
  dd {
    overflow-wrap: break-word;
  }

  p + p {
    margin-top: var(--sjm-space-4);
  }

  ul:not([class]),
  ol:not([class]) {
    padding-inline-start: 1.25em;
  }

  li + li {
    margin-top: var(--sjm-space-2);
  }

  input,
  textarea,
  select {
    width: 100%;
    min-height: 2.75rem;
    border: 1px solid var(--sjm-color-line-strong);
    border-radius: 0;
    background: var(--sjm-color-surface);
    padding: 0.75rem 0.875rem;
  }

  textarea {
    min-height: 8rem;
    resize: vertical;
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--sjm-color-text-muted);
    opacity: 1;
  }

  hr {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--sjm-color-line);
  }

  @media (max-width: 63.9375rem) {
    :root {
      --sjm-page-gutter: 1.5rem;
    }
  }

  @media (max-width: 47.9375rem) {
    :root {
      --sjm-page-gutter: 1.25rem;
      --sjm-section-space: 4rem;
    }

    body {
      line-height: 1.7;
    }

    h1 {
      font-size: clamp(1.75rem, 7vw, 2rem);
      line-height: 1.18;
    }

    h2 {
      font-size: clamp(1.5rem, 6vw, 1.75rem);
      line-height: 1.22;
    }

    h3 {
      font-size: clamp(1.25rem, 5vw, 1.375rem);
    }

    input,
    textarea,
    select {
      min-height: 3rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

@layer sjm-utilities {
  .l-container {
    width: min(100% - (var(--sjm-page-gutter) * 2), var(--sjm-content-max));
    margin-inline: auto;
  }

  .l-container--reading {
    width: min(100% - (var(--sjm-page-gutter) * 2), var(--sjm-reading-max));
    margin-inline: auto;
  }

  .l-section {
    padding-block: var(--sjm-section-space);
  }

  .u-eyebrow {
    color: var(--sjm-color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--sjm-letter-spacing-label);
    line-height: 1.35;
    text-transform: uppercase;
  }

  .u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .u-sr-only:focus {
    position: fixed;
    top: var(--sjm-space-2);
    left: var(--sjm-space-2);
    z-index: 1000;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    background: var(--sjm-color-text);
    color: var(--sjm-color-surface);
    padding: var(--sjm-space-2) var(--sjm-space-4);
  }
}

/*
 * Mobile design scale
 *
 * The approved prototype lays out its mobile UI on a 540px-wide canvas. Its
 * preview then scales that canvas into a phone frame.  Real devices do not do
 * that scaling automatically, so mobile values must be expressed relative to
 * 540px rather than copied as fixed pixels.  These tokens preserve the exact
 * prototype values at 540px and scale proportionally below it.
 */
@media (max-width: 47.999rem) {
  :root {
    /* 36px is used by long-form internal pages; homepage sections use 24px. */
    --sjm-mobile-gutter: clamp(24px, 6.6667vw, 36px); /* 36 / 540 */
    --sjm-mobile-home-gutter: clamp(14px, 4.4444vw, 24px); /* 24 / 540 */
    --sjm-mobile-h1: clamp(34px, 10.7407vw, 58px); /* 58 / 540 */
    --sjm-mobile-detail-h1: clamp(38px, 11.8519vw, 64px); /* 64 / 540 */
    --sjm-mobile-h2: clamp(24px, 7.037vw, 38px); /* 38 / 540 */
    --sjm-mobile-h3: clamp(20px, 5.5556vw, 30px); /* 30 / 540 */
    --sjm-mobile-body: clamp(16px, 4.4444vw, 24px); /* 24 / 540 */
    --sjm-mobile-label: clamp(13px, 3.7037vw, 20px); /* 20 / 540 */
    --sjm-mobile-form-control: clamp(15px, 4.0741vw, 22px); /* 22 / 540 */
    /* The primary mobile-navigation link remains 18px in the prototype. */
    --sjm-mobile-nav-link: clamp(14px, 3.3333vw, 18px); /* 18 / 540 */
    --sjm-mobile-action-height: clamp(44px, 10.3704vw, 56px); /* 56 / 540 */
    --sjm-mobile-header-height: clamp(72px, 20.7407vw, 112px); /* 112 / 540 */
    --sjm-mobile-header-logo: clamp(45px, 12.963vw, 70px); /* 70 / 540 */
    --sjm-mobile-drawer-logo: clamp(56px, 15.5556vw, 84px); /* 84 / 540 */
    --sjm-mobile-icon-target: clamp(34px, 8.1481vw, 44px); /* 44 / 540 */
    --sjm-mobile-icon-size: clamp(18px, 4.4444vw, 24px); /* 24 / 540 */
    --sjm-mobile-header-padding: clamp(10px, 2.5926vw, 14px); /* 14 / 540 */
  }

  /* Mirrors the prototype's global mobile typography rules. */
  .site-content h1 {
    font-size: var(--sjm-mobile-h1) !important;
    line-height: 1.12 !important;
  }

  .site-content h2 {
    font-size: var(--sjm-mobile-h2) !important;
    line-height: 1.26 !important;
  }

  .site-content h3 {
    font-size: var(--sjm-mobile-h3) !important;
    line-height: 1.32 !important;
  }

  .site-content p,
  .site-content li {
    font-size: var(--sjm-mobile-body) !important;
  }

  .site-content p {
    text-align: justify;
    text-justify: inter-word;
  }

  .site-content a[target='_blank'] {
    min-height: var(--sjm-mobile-action-height) !important;
    font-size: var(--sjm-mobile-label) !important;
  }
}