/* Version: 2026-03-19-v842 */
/*
 * UI Components Styles
 *
 * Buttons, cards, and interactive elements for the site.
 */

/* Buttons */
.button {
  position: relative;
  display: inline-block;
  width: fit-content;
  text-align: center;
  padding: 10px 20px;
  font-size: 0.875rem;
  text-decoration: none;
  font-weight: 600;
  font-variation-settings: "wght" 600;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  outline: none;
  transition: all 0.1s ease-in;
  z-index: 1;
  background-color: var(--color-primary);
  color: var(--color-white);
  margin: 0 auto;
  display: block;
}

.button::before {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  z-index: -1;
}

/* Ensure color is applied to anchor buttons */
a.button {
  color: var(--color-white);
  text-decoration: none;
}

/* Button variants */
.button--light {
  background-color: var(--color-secondary);
  color: var(--color-text);
}

a.button.button--light {
  color: var(--color-text);
}

/* Button hover states */
.button:hover,
.button:focus,
.button:active {
  box-shadow: 0px 0px 0px 5px var(--color-primary);
  text-decoration: underline;
  transition: all 0.1s ease-in;
  z-index: 1;
  width: fit-content;
}

/* Light button hover states */
.button--light:hover,
.button--light:focus,
.button--light:active {
  box-shadow: 0px 0px 0px 5px var(--color-secondary-50);
  background-color: var(--color-secondary);
  color: var(--color-text);
}

/* Main hover styles */
nav a:hover,
p a:hover,
aside a:hover,
.button--light:hover,
.current,
nav a:active,
p a:active,
aside a:active,
.button--light:active {
  box-shadow: 0px 0px 0px 5px var(--color-secondary);
  background-color: var(--color-secondary);
  text-decoration: underline;
  border-radius: 20px;
  transition: all 0.1s ease-in;
  color: var(--color-text);
}

/* Navigation hover border color can be 100% opacity */
nav a:hover {
  box-shadow: 0px 0px 0px 5px var(--color-secondary);
  background-color: var(--color-secondary);
}

.current,
.current:hover {
  text-decoration: none;
}

/* Featured header images */
.featured--image {
  width: 100%;
  max-width: 940px;
  height: auto;
  aspect-ratio: 1880/1017;
}

/* Content section images */
.content picture {
  width: 100%;
}

.content img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-border);
}

/* SVG image alignment fix for Safari */
.content svg,
.content img[src$=".svg"],
.card--company-logo img[src$=".svg"] {
  display: block;
  align-self: center;
  width: 100%;
  max-width: 800px;
  max-height: 300px;
  object-fit: contain;
  height: auto;
  /* Enhanced Safari fixes */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* Fix z-index and stacking context */
  position: relative;
  z-index: 1;
  /* Prevent caption overlap */
  margin-bottom: 10px;
}

/* Company logos in content areas - Safari fix */
.content .card--company-logo,
section .card--company-logo,
.card .card--company-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  /* Safari-specific fix */
  position: relative;
}

.content .card--company-logo img,
section .card--company-logo img,
.card .card--company-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
  /* Added Safari-specific transform */
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* Home page SVG */
.image--home {
  aspect-ratio: auto;
  height: auto;
  width: 100%;
  min-width: 50px;
  max-height: 125px;
  transform-origin: 60% 70%;
  /* Animation controlled by wave-animation class in page-home.css */
  /* Prevent flash: always set opacity and visibility */
  /* Do NOT set fill globally here; let SVG elements define their own fill */
  opacity: 1 !important;
  visibility: visible !important;
  transition: fill 0.2s, opacity 0.2s;
}

/* Ensure all child rects/paths in .image--home SVG keep correct fill and opacity after animation */
/*
  Do NOT set fill globally for all children of .image--home.
  If you want to target specific SVG parts (e.g. the arm), use a class like .image--home .arm { fill: var(--color-primary); }
  For the hand, use .image--home .hand { fill: [desired color]; }
*/

/* Home page SVG color theming */
.image--home .svg-bg {
  fill: var(--color-secondary);
}

.image--home .svg-arm,
.image--home .svg-wave1,
.image--home .svg-wave2,
.image--home .svg-wave3,
.image--home .svg-wave4 {
  stroke: var(--color-primary);
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 8px;
  z-index: 100;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
}

/* Focus styles */
a:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  width: fit-content;
}

button:focus {
  width: fit-content;
}

/* Remove .video-container--dark class since it's now handled in feature-video.css */

/* Aspect ratio classes */
.aspect-ratio-16-9 {
  aspect-ratio: 16/9;
}

.aspect-ratio-4-3 {
  aspect-ratio: 4/3;
}

.aspect-ratio-3-4 {
  aspect-ratio: 3/4;
}

.aspect-ratio-1-1 {
  aspect-ratio: 1/1;
}

/* Image error state */
.image-load-error {
  border: 1px dashed var(--color-error);
  min-height: 100px;
  position: relative;
}

.image-load-error::after {
  content: "⚠️ Image failed to load";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.875rem;
  color: var(--color-error);
}

/* =====================
   PORTFOLIO TAG COMPONENT
   ===================== */

/* Portfolio tag styling - Ultra high specificity to override all other link styles */
.portfolio-tag,
.portfolio-tag:visited,
.portfolio-tag:link,
.portfolio-tag:active,
a.portfolio-tag,
a.portfolio-tag:visited,
a.portfolio-tag:link,
a.portfolio-tag:active,
.card--details a.portfolio-tag,
.card--details a.portfolio-tag:visited,
.card--details a.portfolio-tag:link,
.card--details a.portfolio-tag:active,
p a.portfolio-tag,
p a.portfolio-tag:visited,
p a.portfolio-tag:link,
p a.portfolio-tag:active,
body a.portfolio-tag,
body a.portfolio-tag:visited,
body a.portfolio-tag:link,
body a.portfolio-tag:active,
div p a.portfolio-tag,
div p a.portfolio-tag:visited,
div p a.portfolio-tag:link,
div p a.portfolio-tag:active,
.header--descriptions p a.portfolio-tag,
.header--descriptions p a.portfolio-tag:visited,
.header--descriptions p a.portfolio-tag:link,
.header--descriptions p a.portfolio-tag:active,
html body a.portfolio-tag,
html body a.portfolio-tag:visited,
html body a.portfolio-tag:link,
html body a.portfolio-tag:active,
html body p a.portfolio-tag,
html body p a.portfolio-tag:visited,
html body p a.portfolio-tag:link,
html body p a.portfolio-tag:active,
html body div p a.portfolio-tag,
html body div p a.portfolio-tag:visited,
html body div p a.portfolio-tag:link,
html body div p a.portfolio-tag:active {
  color: var(--color-text) !important;
  text-decoration: none !important;
  font-weight: 500;
  padding: 3px 6px;
  margin: 0 0.25rem 0 0;
  border-radius: 4px;
  background-color: transparent;
  border: 1px solid var(--color-border);
  transition: all 0.1s ease-in;
  line-height: 1.4;
}

/* Hover states for clickable portfolio tags only (links, not spans) */
a.portfolio-tag:hover,
.card--details a.portfolio-tag:hover,
p a.portfolio-tag:hover,
body a.portfolio-tag:hover,
div p a.portfolio-tag:hover,
.header--descriptions p a.portfolio-tag:hover,
html body a.portfolio-tag:hover,
html body p a.portfolio-tag:hover,
html body div p a.portfolio-tag:hover {
  border: 1px solid var(--color-border-dark) !important;
  background-color: var(--color-accent-05);
  box-shadow: none;
  color: var(--color-text) !important;
  border-radius: 6px;
}

/* Card tags container */
.card--tags {
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.25rem;
  min-height: calc(1.4em * 2 + 0.5rem);
  /* 3 lines of tags + gap */
  max-height: calc(1.4em * 3 + 1rem);
  /* Allows up to 3 lines of tags including the +More indicator */
  overflow: hidden;
  align-content: flex-start;
}

.card--tags .portfolio-tag {
  display: inline-block;
  font-size: 0.75rem;
  padding: 3px 6px;
  line-height: 1.4;
  margin: 0;
  /* Remove margin in cards - uses the gap spacing from the card--tags container */
}

/* Tag layout: force +More to third row if present */
.portfolio-tag-spacer {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  order: 99;
}

.portfolio-tag--more {
  order: 100;
}

/* "More tags" indicator styling */
.portfolio-tag--more {
  opacity: 0.7;
  font-style: italic;
}

/* Specific rule to remove underline from span portfolio tags within cards */
.card span.portfolio-tag {
  text-decoration: none;
}

/* Specific rule to darken border when up next is hovered */
.card:hover span.portfolio-tag {
  border: 1px solid var(--color-border-dark);
}

/* Ensure card headlines get underline on hover */
.card:hover h2 {
  text-decoration: underline;
}

/* Ensure portfolio tags have consistent line-height regardless of parent context */
.results .portfolio-tag,
.results p .portfolio-tag,
.header--descriptions p .portfolio-tag {
  line-height: 2.5 !important;
}

/* Override paragraph line-height in header descriptions to fix tag spacing */
.header--descriptions p {
  line-height: 2.5 !important;
}

/* Hide text nodes (commas) between portfolio tags */
.header--descriptions p a.portfolio-tag+a.portfolio-tag::before {
  content: none;
}

/* Target commas specifically - they appear as text nodes between links */
.header--descriptions p {
  font-size: 0;
  /* Hide all text */
}

.header--descriptions p strong,
.header--descriptions p a.portfolio-tag {
  font-size: 0.875rem;
  /* Match portfolio card styling */
}

/* Add space after role/platform/audience labels */
.header--descriptions p strong {
  margin-right: 4px;
}

/* Ensure br tags add proper spacing with display block */
.header--descriptions p br {
  display: block;
  margin: 0.5rem 0;
}

/* =====================
   SHARED SUBHEADLINE STYLING
   ===================== */

/* Shared large subheadline styling */
.subheadline--large {
  font-size: 1.8rem;
  line-height: 1.2;
  margin-bottom: 0;
  letter-spacing: -1px;
  font-weight: 700;
  font-variation-settings: "wght" 700;
}

/* =====================
   TAG PAGE STYLING
   ===================== */

/* Tag page header styling */
.tag-page-header {
  text-align: center;
}

.tag-page-header .subheadline--large {
  display: inline;
  /* Keep category on one line */
}

.tag-page-header h1 {
  text-align: center;
}

.tag-page-header .all-tags-link {
  text-align: center;
  display: block;
  margin-top: 1rem;
}

.tag-page-header .all-tags-link a {
  display: inline-block;
  padding: 4px 8px;
}

.all-tags-link,
aside a:hover {
  box-shadow: 0px 0px 0px 5px var(--color-secondary-50);
  background-color: var(--color-secondary-50);
  text-decoration: underline;
  border-radius: 20px;
  transition: all 0.1s ease-in;
  color: var(--color-text);
  padding: 4px 8px;
}

/* Moved from inline style in index.html */
.video-wrapper .mobile-preview {
  max-height: 50vh;
  max-width: 100%;
  height: auto;
  background: var(--color-black);
  object-fit: contain;
}

/* Theming for 404 frowny face SVG */
svg .svg-bg {
  fill: var(--color-secondary);
}

svg .svg-face {
  fill: var(--color-primary);
}

/* Theming for open_in_full icon SVG */
svg .svg-icon {
  fill: var(--color-primary);
}

svg .svg-mask {
  fill: var(--color-surface, #D9D9D9);
}