/* ==========================================================================
   WPGuy Starter Kit: Overrides & Utilities
   ========================================================================== */

:root {
  /* The default vertical spacing between blocks in a container. */
  --spacing-default: var(--spacing-gap);
}

/* --------------------------------------------------------------------------
   Global Settings & Scroll Behaviour
   -------------------------------------------------------------------------- */

html {
  /* Dynamically set by main.js — measures the sticky navigation height.
     Falls back to 0 if JS does not run (e.g. no sticky header present). */
  scroll-padding-top: var(--scroll-padding, 0);
  scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   Accessibility: Skip to Content
   Visually hidden until focused by keyboard navigation.
   -------------------------------------------------------------------------- */

.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg);
  color: var(--color-primary);
  font-weight: 600;
  border: 2px solid var(--color-focus);
  border-radius: 0 0 var(--space-2) var(--space-2);
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-to-content:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   Accessibility: Focus States
   Double-ring approach ensures contrast on both light and dark backgrounds.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-bg);
}

/* --------------------------------------------------------------------------
   Links — Colour States
   Wrapped in :where() to keep specificity at zero, allowing editor-applied
   colour classes to override without needing !important.
   -------------------------------------------------------------------------- */

:where(a) {
  color: var(--color-link);
  transition: color 0.15s ease;
}

:where(a:hover, a:focus-visible) {
  color: var(--color-link-hover);
}

:where(a:visited) {
  color: var(--color-link);
}

/* --------------------------------------------------------------------------
   Buttons — Hover & Focus States
   Covers GP theme buttons, WP block buttons, and GB button blocks.
   -------------------------------------------------------------------------- */

.button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.gb-button {
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.button:hover,
.button:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.gb-button:hover,
.gb-button:focus-visible {
  background-color: var(--color-btn-bg-hover);
  color: var(--color-btn-text-hover);
}

/* --------------------------------------------------------------------------
   Automatic Layout & Spacing
   -------------------------------------------------------------------------- */

/* Apply automatic vertical spacing between blocks inside a .gb-container. */
.gb-container:has(> * + *) {
  gap: var(--spacing-default);
}

/* Default to vertical stacking only when no explicit layout is set by GB. */
.gb-container:not([style*="display"]):has(> * + *) {
  display: flex;
  flex-direction: column;
}

/* Reset default block margins to let gap control all vertical spacing. */
.gb-container > * {
  margin-top: 0;
}

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

/* --------------------------------------------------------------------------
   Component: GB Container Link
   Adds a subtle lift and shadow to a linked GB container on hover.
   GB Pro adds the .gb-container-link class when Link Container is enabled.
   -------------------------------------------------------------------------- */

.sl-container {
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

.sl-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   Component: Stretched Link — Full-card Click Target
   Usage: Add class 'stretched-link' to the CONTAINER or CARD element.
   Place one anchor or button inside — this becomes the full-card link.
   Secondary interactive elements are raised above the overlay automatically.

   Note: GB Pro may already set position: relative on a container when a
   z-index is configured in the editor. The .stretched-link class is still
   required to ensure the ::after overlay is generated consistently.
   -------------------------------------------------------------------------- */

.stretched-link {
  position: relative;
}

.stretched-link a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Raise secondary interactive elements above the overlay */
.stretched-link .gb-button,
.stretched-link button,
.stretched-link [role="button"] {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Component: Card Zoom Effect
   Usage: Add class 'card-zoom' to the Container.
   Note: Requires the background image to be set on this Container via CSS.
   For <img> element zoom, use a GB image block with overflow: hidden on
   the parent container and a CSS scale transform on the image directly.
   -------------------------------------------------------------------------- */

.card-zoom {
  overflow: hidden;
  background-size: 100%;
  transition: background-size 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-zoom:hover {
  background-size: 110%;
}

/* --------------------------------------------------------------------------
   Plugin Overrides: Fluent Forms
   Maps Fluent Forms to semantic tokens for seamless integration.
   Override --ff-radius and --ff-btn-radius per project if needed.
   -------------------------------------------------------------------------- */

.fluentform {
  --ff-primary: var(--color-primary);
  --ff-primary-dark: var(--color-primary-alt);
  --ff-text: var(--color-text);
  --ff-border: var(--color-border);
  --ff-bg: var(--color-bg);
  --ff-bg-alt: var(--color-bg-muted);
  --ff-danger: var(--color-danger);
  --ff-success: var(--color-success);

  /* Border radius tokens — override per project if needed. */
  --ff-radius: 6px;
  --ff-btn-radius: 6px;
  --ff-notice-radius: 8px;
}

/* General Layout */
.fluentform .ff-el-group {
  margin-bottom: var(--spacing-default);
}

body .fluentform .ff-el-form-control {
  background-color: var(--ff-bg);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  color: var(--ff-text);
  padding: 0.85em 1em;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

body .fluentform .ff-el-form-control:focus {
  border-color: var(--ff-primary);
  box-shadow: 0 0 0 1px var(--ff-primary);
  outline: 0;
}

/* Typography */
body .fluentform .ff-el-input--label {
  color: var(--ff-text);
  font-weight: 600;
}

body .fluentform .ff-el-form-control::placeholder {
  color: var(--color-text-subtle);
}

/* Buttons */
body .fluentform .ff-btn-submit {
  background-color: var(--ff-primary);
  color: var(--color-btn-text);
  border-radius: var(--ff-btn-radius);
  padding: 0.85em 2em;
  font-weight: 600;
  border: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

body .fluentform .ff-btn-submit:hover,
body .fluentform .ff-btn-submit:focus-visible {
  background-color: var(--ff-primary-dark);
  transform: translateY(-1px);
}

/* Notices & Validation */
body .fluentform .ff-errors-in-stack {
  display: none; /* Hide stack errors, relying on inline */
}

body .fluentform .text-danger {
  color: var(--ff-danger);
  font-size: 0.9em;
  margin-top: 0.5em;
}

.fluentform .ff-message-success {
  background-color: var(--ff-bg-alt);
  border: 1px solid var(--ff-success);
  color: var(--ff-success);
  border-radius: var(--ff-notice-radius);
  padding: 1.5em;
}

.fluentform .ff-message-error {
  background-color: var(--ff-bg-alt);
  border: 1px solid var(--ff-danger);
  color: var(--ff-danger);
  border-radius: var(--ff-notice-radius);
  padding: 1.5em;
}

/* --------------------------------------------------------------------------
   Accessibility: Reduced Motion
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Accessibility: Increased Contrast
   -------------------------------------------------------------------------- */

@media (prefers-contrast: more) {
  :root {
    --color-border: var(--neutral-400);
    --color-border-subtle: var(--neutral-300);
    --color-text-muted: var(--neutral-700);
    --color-text-subtle: var(--neutral-600);
  }
}

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .main-navigation,
  .site-footer,
  #wpadminbar,
  .skip-to-content,
  .gb-button,
  button,
  input[type="submit"],
  input[type="button"],
  .fluentform,
  [aria-hidden="true"] {
    display: none !important;
  }

  body,
  .site-content,
  .content-area,
  .entry-content,
  .gb-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #000;
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  p,
  blockquote,
  ul,
  ol {
    page-break-inside: avoid;
    orphans: 3;
    widows: 3;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #444;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

/* --------------------------------------------------------------------------
   Visually Hidden
   Hides elements visually whilst keeping them accessible to screen readers.
   -------------------------------------------------------------------------- */

.visually-hidden:not(:is(:focus, :active)) {
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Flow Root
   A modern replacement for clearfix to contain floated elements.
   -------------------------------------------------------------------------- */

.flow-root {
  display: flow-root;
}

/* --------------------------------------------------------------------------
   Transition
   A performant transition for common hover and focus effects.
   -------------------------------------------------------------------------- */

.transition {
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out,
    opacity 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

/* --------------------------------------------------------------------------
   Line Clamp
   Truncates text to a specific number of lines.
   -------------------------------------------------------------------------- */

.line-limit-2,
.line-limit-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

.line-limit-3 {
  -webkit-line-clamp: 3;
}

/* --------------------------------------------------------------------------
   Gap Override
   Forces title and button closer together inside a container.
   Usage: Add class 'gap-tight' to the Container.
   -------------------------------------------------------------------------- */

.gap-tight {
  gap: var(--spacing-gap-tight) !important;
}

/* --------------------------------------------------------------------------
   Aspect Ratio
   Use on a container element to enforce a fixed aspect ratio.
   -------------------------------------------------------------------------- */

.ratio-16-9 {
  aspect-ratio: 16 / 9;
}
.ratio-4-3 {
  aspect-ratio: 4 / 3;
}
.ratio-1-1 {
  aspect-ratio: 1;
}

/* --------------------------------------------------------------------------
   Object Fit
   Controls how a replaced element fills its container.
   Apply directly to the img or video element, not the container.
   -------------------------------------------------------------------------- */

.object-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.object-contain {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.object-fill {
  object-fit: fill;
  width: 100%;
  height: 100%;
}