/*
 * 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.
 */

/* ==========================================================================
   Design tokens – use these variables across blocks for consistent styling.
   ========================================================================== */

:root,
:host {
  /* mobile-first breakpoints */
  --bp-tablet: 600px;
  --bp-desktop: 900px;
  --bp-wide: 1200px;

  /* grid */
  --grid-container-width: 83.4%;
  --grid-column-width: calc(var(--grid-container-width) / 12);
  --grid-gutter-width: 8.3%;

  /* spacing scale for consistent global layout */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* global layout rhythm */
  --content-padding-inline: var(--space-m);
  --main-block-space: var(--space-l);
  --section-block-space: var(--space-l);

  /* color scheme */
  color-scheme: light dark;

  /* heritage palette */
  --color-rust: #a14f2b;
  --color-gold: #c5a059;
  --color-parchment: #f5f2ed;
  --color-ink: #1a1a1a;

  /* heritage dark palette */
  --color-obsidian: #060d0d;
  --color-card-dark: #162121;
  --color-rust-bright: #d16a3e;
  --color-muted: #8b9a9a;

  /* color tokens – grays and palette */
  --color-gray-100: #f1f1f1;
  --color-gray-200: #d3d3d3;
  --color-gray-300: #b5b5b5;
  --color-gray-400: #999;
  --color-gray-500: #7d7d7d;
  --color-gray-600: #636363;
  --color-gray-700: #494949;
  --color-gray-800: #313131;
  --color-gray-900: #1b1b1b;
  --color-green-100: #e1f5e3;
  --color-green-200: #a3e1a8;
  --color-green-300: #60cb6a;
  --color-green-400: #24b032;
  --color-green-500: #1e9029;
  --color-green-600: #187220;
  --color-teal-100: #e4f3f5;
  --color-teal-200: #acdbdf;
  --color-teal-300: #71c1c9;
  --color-teal-400: #36a7b3;
  --color-teal-500: #108a96;
  --color-blue-100: #eaf2ff;
  --color-blue-200: #b9d4ff;
  --color-blue-300: #88b6ff;
  --color-blue-400: #5898ff;
  --color-blue-500: #2176ff;
  --color-blue-600: #0058e4;
  --color-blue-700: #0041a9;
  --color-purple-100: #f4edfb;
  --color-purple-200: #dfcbf2;
  --color-purple-300: #c9a7ea;
  --color-purple-400: #b385e1;
  --color-purple-500: #9d60d8;
  --color-purple-600: #843ccb;
  --color-red-100: #ffecea;
  --color-red-200: #ffc4be;
  --color-red-300: #ff9990;
  --color-red-400: #ff6759;
  --color-red-500: #f81400;
  --color-red-600: #c71000;
  --color-orange-100: #ffeddc;
  --color-orange-200: #ffc895;
  --color-orange-300: #ff9e43;
  --color-orange-400: #f37500;
  --color-orange-500: #c76000;
  --color-yellow-100: #fff48e;
  --color-yellow-200: #ebd400;
  --color-yellow-300: #cab600;

  /* semantic / named colors */
  --color-light: rgb(255 255 255);
  --color-dark: rgb(0 0 0);
  --color-text: light-dark(var(--color-ink), var(--color-parchment));
  --color-link: light-dark(var(--color-ink), var(--color-parchment));
  --color-link-hover: light-dark(var(--color-rust), var(--color-gold));
  --color-brand: var(--color-rust);
  --color-accent: var(--color-gold);
  --color-shaded: light-dark(var(--color-parchment), var(--color-card-dark));

  /* fonts */
  --font-family: montserrat, "Trebuchet MS", sans-serif;
  --font-family-serif: "EB Garamond", georgia, serif;
  --font-family-mono: "JetBrains Mono", "Courier New", monospace;
  --body-font-family: var(--font-family);
  --heading-font-family: var(--font-family-serif);

  /* heading sizes */
  --heading-font-size-xxl: 32.44px;
  --heading-font-size-xl: 28.83px;
  --heading-font-size-l: 25.63px;
  --heading-font-size-m: 22.78px;
  --heading-font-size-s: 20.25px;
  --heading-font-size-xs: 18px;
  --heading-line-height: 1.15;

  /* body sizes */
  --body-font-size-xxxl: 25px;
  --body-font-size-xxl: 22px;
  --body-font-size-xl: 20px;
  --body-font-size-l: 18px;
  --body-font-size-m: 16px;
  --body-font-size-s: 14px;
  --body-font-size-xs: 12px;
  --body-line-height: 1.6;

  /* nav / layout */
  --nav-height: 64px;
  --header-height: var(--nav-height);

  /* boilerplate compatibility – map to design tokens */
  --background-color: light-dark(var(--color-parchment), var(--color-obsidian));
  --light-color: var(--color-shaded);
  --dark-color: var(--color-gray-500);
  --text-color: var(--color-text);
  --link-color: var(--color-link);
  --link-hover-color: var(--color-link-hover);

  /* heritage border */
  --border-heritage: 2px solid light-dark(rgb(161 79 43 / 20%), rgb(245 242 237 / 20%));
  --border-radius-heritage: 24px;

  /* gradient and glow tokens */
  --gradient-brand: linear-gradient(135deg, var(--color-rust) 0%, var(--color-gold) 100%);
  --gradient-brand-dark: linear-gradient(135deg, var(--color-rust-bright) 0%, var(--color-gold) 100%);
  --shadow-glow-rust: 0 0 40px rgb(161 79 43 / 30%);
  --shadow-glow-gold: 0 0 40px rgb(197 160 89 / 25%);
  --shadow-lift-m: 0 20px 40px -8px rgb(0 0 0 / 15%);
  --shadow-lift-l: 0 30px 60px -12px rgb(0 0 0 / 22%);

  /* easing presets for consistent motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme='light'],
:host([data-theme='light']) {
  color-scheme: light;
}

:root[data-theme='dark'],
:host([data-theme='dark']) {
  color-scheme: dark;
}

@media (width >= 600px) {
  :root,
  :host {
    --content-padding-inline: var(--space-l);
    --main-block-space: var(--space-xl);
    --section-block-space: var(--space-xl);
  }
}

@media (width >= 900px) {
  :root,
  :host {
    --body-font-size-m: 18px;
    --body-font-size-s: 16px;
    --body-font-size-xs: 14px;
    --heading-font-size-xxl: 64px;
    --heading-font-size-xl: 48px;
    --heading-font-size-l: 32px;
    --heading-font-size-m: 24px;
    --heading-font-size-s: 20px;
    --heading-font-size-xs: 18px;
    --content-padding-inline: var(--space-xl);
    --section-block-space: var(--space-3xl);
  }
}

@media (width >= 1200px) {
  :root,
  :host {
    --grid-container-width: 1200px;
  }
}

/* optional scheme classes for forced light/dark */
.light-scheme {
  color-scheme: light;
}

.dark-scheme {
  color-scheme: dark;
}

/* theme aliases from page metadata (theme: dark / light) */
body.light,
body.theme-light {
  color-scheme: light;
}

body.dark,
body.theme-dark {
  color-scheme: dark;
}

/* fallback fonts */
@font-face {
  font-family: roboto-condensed-fallback;
  size-adjust: 88.82%;
  src: local('Arial');
}

@font-face {
  font-family: roboto-fallback;
  size-adjust: 99.529%;
  src: local('Arial');
}

/* ==========================================================================
   Base layout and LCP-critical styles (boilerplate structure preserved)
   ========================================================================== */

html {
  min-height: 100%;
  scroll-padding-top: calc(var(--nav-height) + 1rem);
  scroll-behavior: smooth;
}

::selection {
  background: light-dark(rgb(161 79 43 / 20%), rgb(197 160 89 / 30%));
  color: inherit;
}

body {
  display: none;
  margin: 0;
  box-sizing: border-box;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  line-height: var(--body-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root body {
  min-height: 100vh;
}

body.appear {
  display: block;
}

header {
  height: var(--nav-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

/* typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  font-family: var(--heading-font-family);
  font-weight: 500;
  line-height: var(--heading-line-height);
  scroll-margin: 40px;
}

h1 {
  font-size: var(--heading-font-size-xxl);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--heading-font-size-xl);
  letter-spacing: -0.015em;
}

h3 { font-size: var(--heading-font-size-m); }
h4 { font-size: var(--heading-font-size-s); }
h5 { font-size: var(--heading-font-size-xs); }
h6 { font-size: var(--heading-font-size-xs); }

@media (width >= 600px) {
  h3 { font-size: var(--heading-font-size-l); }
  h4 { font-size: var(--heading-font-size-m); }
  h5 { font-size: var(--heading-font-size-s); }
}

@media (width >= 1200px) {
  h3 { font-size: var(--heading-font-size-xl); }
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

main ul,
main ol {
  padding-inline-start: var(--space-l);
}

main ul ul,
main ul ol,
main ol ul,
main ol ol {
  padding-inline-start: var(--space-m);
}

code,
pre {
  font-size: var(--body-font-size-s);
}

pre {
  padding: var(--space-l);
  border-radius: var(--space-s);
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

strong {
  font-weight: 600;
}

/* links */
a:any-link {
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: light-dark(rgb(26 26 26 / 30%), rgb(245 242 237 / 30%));
  overflow-wrap: break-word;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
  text-decoration-color: var(--link-hover-color);
}

/* buttons (AEM default content: links in standalone paragraphs) */
p.button-container {
  margin: var(--space-m) 0;
}

a.button:any-link,
button.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  max-width: 100%;
  margin: 0;
  border: 1px solid light-dark(var(--color-rust), var(--color-rust-bright));
  border-radius: 4px;
  padding: 20px 50px;
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  background-color: light-dark(var(--color-rust), var(--color-rust-bright));
  background-image: linear-gradient(135deg, rgb(255 255 255 / 12%), rgb(0 0 0 / 8%));
  color: var(--color-light);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.4s;
}

a.button:any-link::after,
button.button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 22%) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}

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

/* Primary variant */
a.button.primary:any-link,
button.button.primary {
  border-color: var(--color-rust);
  background-color: var(--color-rust);
  color: var(--color-light);
}

a.button:any-link:hover,
a.button:any-link:focus-visible,
button.button:hover,
button.button:focus-visible {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px light-dark(rgb(161 79 43 / 30%), rgb(209 106 62 / 35%)), 0 0 0 1px var(--color-gold);
  cursor: pointer;
  text-decoration: none;
}

a.button:any-link:hover::after,
a.button:any-link:focus-visible::after,
button.button:hover::after,
button.button:focus-visible::after {
  transform: translateX(120%);
}

a.button.primary:hover,
a.button.primary:focus-visible,
button.button.primary:hover,
button.button.primary:focus-visible {
  border-color: var(--color-gold);
  background-color: var(--color-gold);
  color: var(--color-light);
}

a.button:any-link:focus-visible,
button.button:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

a.button[aria-disabled='true'],
a.button[aria-disabled='true']:hover,
a.button[aria-disabled='true']:focus-visible,
button.button:disabled,
button.button:disabled:hover,
button.button:disabled:focus-visible {
  background-color: var(--light-color);
  border-color: var(--light-color);
  color: var(--dark-color);
  cursor: not-allowed;
  pointer-events: none;
}

a.button.secondary,
button.button.secondary {
  border: 1.5px solid var(--color-rust);
  background-color: transparent;
  color: var(--color-rust);
}

a.button.secondary:hover,
a.button.secondary:focus-visible,
button.button.secondary:hover,
button.button.secondary:focus-visible {
  border-color: var(--color-gold);
  background-color: light-dark(rgb(197 160 89 / 8%), rgb(197 160 89 / 12%));
  color: var(--color-gold);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px light-dark(rgb(197 160 89 / 18%), rgb(197 160 89 / 22%));
}

/* main content area – use design tokens for rhythm */
main > div {
  margin: var(--main-block-space) var(--content-padding-inline);
}

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

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon :is(img, svg) {
  height: 100%;
  width: 100%;
}

/* Global logo: adaptive color and consistent size everywhere */
.icon.icon-logo {
  width: 200px;
  height: 45px;
  color: light-dark(var(--color-rust), var(--color-rust-bright));
}

main .icon.icon-logo {
  display: inline-block;
  vertical-align: middle;
  padding-right: 10px;
  margin-bottom: 4px;
}

/* Reserve space for unsized images to reduce CLS */
main img:not([width], [height]) {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* sections – boilerplate structure with design tokens */
main > .section {
  margin: inherit;
  padding-block: var(--space-xl);
}

main > .section:first-child {
  padding-block-start: 0;

  /* Reduce CLS: contain layout so section appearance causes less reflow.
     Exclude social-share section: contain creates a containing block for position:fixed,
     which would break the sticky share buttons. */
  contain: layout;
}

main > .section:has(.social-share) {
  contain: none;
}

main > .section > div {
  max-width: var(--grid-container-width);
  margin: auto;
  padding: 0 var(--content-padding-inline);
}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
  margin: 0;
  padding: var(--section-block-space) 0;
}

/* section-metadata style=divider: content-width (grid) border-bottom */
main > .section.divider {
  position: relative;
}

main > .section.divider::after {
  content: '';
  display: block;
  max-width: var(--grid-container-width);
  padding: 12px 0 24px;
  margin: 0 auto;
  border-bottom: 1px solid var(--color-gray-200);
}

main > .section.divider.center {
    text-align: center;
}

/* section-metadata or block style: spacer utilities – add to section metadata or block styles for readability gaps */
.spacer-top-s { margin-top: var(--space-s); }
.spacer-top-m { margin-top: var(--space-m); }
.spacer-top-l { margin-top: var(--space-l); }
.spacer-bottom-s { margin-bottom: var(--space-s); }
.spacer-bottom-m { margin-bottom: var(--space-m); }
.spacer-bottom-l { margin-bottom: var(--space-l); }

/* section-metadata style=gradient: warm brand gradient full-bleed section */
main > .section.gradient {
  background: var(--gradient-brand);
  color: var(--color-parchment);
  margin: 0;
  padding: var(--space-3xl, var(--section-block-space)) 0;
}

main > .section.gradient * {
  color: var(--color-parchment);
}

main > .section.gradient a:any-link {
  color: var(--color-parchment);
  text-decoration-color: rgb(255 255 255 / 40%);
}

main > .section.gradient a.button:any-link,
main > .section.gradient button.button {
  border-color: var(--color-parchment);
  background-color: transparent;
  background-image: none;
  color: var(--color-parchment);
  box-shadow: none;
}

main > .section.gradient a.button:any-link:hover,
main > .section.gradient button.button:hover {
  background-color: var(--color-parchment);
  border-color: var(--color-parchment);
  color: var(--color-rust);
  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
}

/* section-metadata style=ink: deep dark full-bleed section */
main > .section.ink {
  background-color: var(--color-ink);
  color: var(--color-parchment);
  margin: 0;
  padding: var(--space-3xl, var(--section-block-space)) 0;
}

main > .section.ink * {
  color: var(--color-parchment);
}

/* gradient-text utility: apply to any heading or span for brand gradient text */
.gradient-text {
  background: var(--gradient-brand);
  background-clip: text;
  color: transparent;
}