/* ==========================================================================
   ServiceNow Zone - Custom UI Components
   --------------------------------------------------------------------------
   Purpose:
   Reusable, scoped, theme-friendly UI utilities and content components for
   ServiceNow Zone.

   Design Principles:
   - Preserve existing visual behavior.
   - Keep class names backward-compatible.
   - Use CSS custom properties for easier maintenance.
   - Use HTML for structure and CSS for spacing/presentation.
   - Avoid global styling unless intentionally scoped.
   ========================================================================== */


/* ==========================================================================
   1. Design Tokens
   --------------------------------------------------------------------------
   Centralized values used across the custom components.
   These variables make future theme changes safer and faster.
   ========================================================================== */

:root {
  /* Brand and accent colors */
  --snz-color-accent: #ce1b28;
  --snz-color-highlight: #d9b300;

  /* Text colors */
  --snz-color-text: #202124;
  --snz-color-text-muted: #3c4043;
  --snz-color-text-soft: #333333;

  /* Surfaces and borders */
  --snz-color-surface: #ffffff;
  --snz-color-surface-muted: #f1f1f1;
  --snz-color-surface-code: #f1f3f4;
  --snz-color-border: #d7d7d7;
  --snz-color-border-soft: #ececec;
  --snz-color-border-control: #cccccc;

  /* Focus and accessibility */
  --snz-focus-color: #333333;

  /* Radius */
  --snz-radius-sm: 4px;
  --snz-radius-md: 8px;

  /* Spacing */
  --snz-space-1: 0.25rem;
  --snz-space-2: 0.5rem;
  --snz-space-3: 0.75rem;
  --snz-space-4: 1rem;
  --snz-space-5: 1.25rem;
  --snz-space-6: 1.5rem;
  --snz-space-8: 2rem;

  /* Motion */
  --snz-transition-fast: 0.2s ease;
}


/* ==========================================================================
   2. Copy Code Button
   --------------------------------------------------------------------------
   Usage:
   Wrap code blocks with .code-wrapper and place .copy-btn inside it.

   Example:
   <div class="code-wrapper">
     <button class="copy-btn">Copy</button>
     <pre><code>...</code></pre>
   </div>
   ========================================================================== */

.code-wrapper {
  position: relative;
  margin-bottom: 20px;
}

.code-wrapper pre {
  padding-top: 2.25rem;
  overflow: auto;
}

.copy-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 30px;
  padding: 5px 10px;

  border: 1px solid var(--snz-color-border-control);
  border-radius: var(--snz-radius-sm);
  background-color: var(--snz-color-surface-muted);
  color: var(--snz-color-text);

  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;

  transition:
    background-color var(--snz-transition-fast),
    border-color var(--snz-transition-fast);
}

.copy-btn:hover {
  background-color: #e0e0e0;
}

.copy-btn:focus,
.copy-btn:focus-visible {
  outline: 2px solid var(--snz-focus-color);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .copy-btn {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 11px;
  }
}


/* ==========================================================================
   3. Skip Link
   --------------------------------------------------------------------------
   Purpose:
   Improves keyboard accessibility by allowing users to jump directly to the
   main content.

   Notes:
   - Hidden visually by default.
   - Revealed when focused using keyboard navigation.
   ========================================================================== */

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 9999;

  padding: 8px 12px;
  border-radius: var(--snz-radius-sm);

  background-color: var(--snz-color-surface);
  color: #000000;
  text-decoration: none;

  transform: translateY(-200%);
  transition: transform var(--snz-transition-fast);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}


/* ==========================================================================
   4. Responsive Video Embeds
   --------------------------------------------------------------------------
   Usage:
   Wrap iframe videos inside .video-embed.

   Example:
   <div class="video-embed">
     <iframe src="..." title="..."></iframe>
   </div>
   ========================================================================== */

.video-embed {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;

  overflow: hidden;
  border-radius: var(--snz-radius-md);
  background-color: #000000;
}

.video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ==========================================================================
   5. Inline Text Highlights
   ========================================================================== */


/* --------------------------------------------------------------------------
   Standard Inline Highlight
   --------------------------------------------------------------------------
   Purpose:
   Highlights short inline text using a clean underline.

   Usage:
   Use for short labels, key phrases, bullet lead-ins, table values, and
   small callouts.

   Example:
   <span class="snz-highlight-underline">Takeaway:</span>

   Notes:
   - This class was previously declared twice.
   - The duplicate has been consolidated here.
   - The final visual behavior preserves your latest effective style:
     gold underline + bold emphasis.
   -------------------------------------------------------------------------- */

.snz-highlight-underline {
  display: inline;
  padding-bottom: 0.12rem;

  border-bottom: 2px solid var(--snz-color-highlight);
  font-weight: 700;
  line-height: 1.2;
}


/* --------------------------------------------------------------------------
   Hand-Drawn Inline Highlight
   --------------------------------------------------------------------------
   Purpose:
   Adds a subtle hand-drawn underline effect to important inline text.

   Usage:
   Use only for short inline text, not long paragraphs.

   Example:
   <span class="snz-handdrawn-underline">Important text</span>

   Maintenance:
   - Current underline color: #d9b300
   - For ServiceNow Zone brick/red accent, replace %23d9b300 with %23ce1b28
     inside the SVG data URL.
   -------------------------------------------------------------------------- */

.snz-handdrawn-underline {
  display: inline;
  padding-bottom: 0.18rem;

  line-height: 1.6;

  background-image: url("data:image/svg+xml,%3Csvg width='120' height='8' viewBox='0 0 120 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5 C20 1, 38 7, 56 4 S92 2, 118 5' fill='none' stroke='%23d9b300' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 120px 8px;
  background-position: 0 100%;

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* ==========================================================================
   6. AI Platform Content Block
   --------------------------------------------------------------------------
   Purpose:
   Styles the ordered list section used for Australia release / AI Platform
   learning content.

   Expected HTML:
   <section class="snz-ai-platform-section">
     <h2 class="snz-section-title">...</h2>
     <ol class="snz-ai-platform-list">
       <li>
         <h3>...</h3>
         <p>...</p>
         <p class="snz-takeaway">...</p>
       </li>
     </ol>
   </section>
   ========================================================================== */

.snz-ai-platform-section {
  margin-block: var(--snz-space-8);
}

.snz-section-title {
  margin: 0 0 var(--snz-space-5);

  color: var(--snz-color-text);

  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
}

.snz-ai-platform-list {
  margin: 0;
  padding-left: 1.4rem;
}

.snz-ai-platform-list > li {
  margin-bottom: var(--snz-space-6);
  padding-left: 0.35rem;
}

.snz-ai-platform-list > li:last-child {
  margin-bottom: 0;
}

.snz-ai-platform-list > li::marker {
  color: var(--snz-color-accent);
  font-weight: 700;
}

.snz-ai-platform-list h3 {
  margin: 0 0 0.45rem;

  color: var(--snz-color-text);

  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
}

.snz-ai-platform-list p {
  margin: 0 0 var(--snz-space-3);

  color: var(--snz-color-text-muted);

  line-height: 1.75;
}

.snz-ai-platform-list code {
  padding: 0.1rem 0.3rem;

  border-radius: 0.25rem;
  background-color: var(--snz-color-surface-code);
  color: var(--snz-color-text);

  font-size: 0.95em;
}

.snz-takeaway {
  margin-top: 0.6rem;
}


/* ==========================================================================
   7. Home Resource Section
   --------------------------------------------------------------------------
   Purpose:
   Styles reusable fieldset-based content/resource blocks on the homepage.

   Notes:
   - Link colors are intentionally not overridden here.
   - The website theme can continue controlling anchor styling.
   - Some !important declarations are retained to protect this component from
     legacy template styles that may apply broad paragraph rules.
   ========================================================================== */

.snz-home,
.snz-home *,
.snz-home *::before,
.snz-home *::after {
  box-sizing: border-box;
}

fieldset.snz-home {
  --snz-home-border: var(--snz-color-border);
  --snz-home-divider: var(--snz-color-border-soft);
  --snz-home-text: var(--snz-color-text-soft);
  --snz-home-radius: var(--snz-radius-sm);
  --snz-home-space-x: 18px;
  --snz-home-space-top: 14px;
  --snz-home-space-bottom: 16px;
  --snz-home-item-gap: 14px;
  --snz-home-item-padding: 12px;

  display: block !important;

  width: 100%;
  max-width: 100%;
  margin: 20px 0 26px;
  padding:
    var(--snz-home-space-top)
    var(--snz-home-space-x)
    var(--snz-home-space-bottom);

  border: 1px solid var(--snz-home-border);
  border-radius: var(--snz-home-radius);
}

fieldset.snz-home legend {
  padding: 0 8px;

  color: var(--snz-home-text);

  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

fieldset.snz-home > p,
fieldset.snz-home > p.snz-home-intro {
  display: block !important;
  float: none !important;
  align-self: stretch !important;

  width: 100% !important;
  max-width: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;

  color: var(--snz-home-text);

  line-height: 1.6;
  text-align: center !important;
}

.snz-home-item {
  margin: 0 0 var(--snz-home-item-gap);
  padding: 0 0 var(--snz-home-item-padding);

  border-bottom: 1px solid var(--snz-home-divider);
}

.snz-home-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.snz-home-item h3 {
  margin: 0 0 6px;
}

.snz-home-item a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 640px) {
  fieldset.snz-home {
    --snz-home-space-x: 14px;
  }

  fieldset.snz-home legend {
    font-size: 1rem;
  }
}