/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for CapitalExpo.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values. Copy this
 * file to your web root, so it sits next to index.php, and clear Drupal's
 * cache. Then, any changes you make in this file should be reflected right away.
 */

/* Brand colour palette */
:root {
  --brand-yellow: #fbb641;
  --brand-grey-turquoise: #60af90;
  --brand-dark-turquoise: #1b695c;
  --brand-light-yellow: #fdfaf1;
  --brand-light-grey: #d9d9d9;
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.13 0.043 265.132);
  --card: oklch(0.967 0.003 264.542);
  --card-foreground: oklch(0.21 0.032 264.665);
  --primary: var(--brand-dark-turquoise);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9219 0 0);
  --secondary-foreground: oklch(0.28 0.041 260.329);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.13 0.043 265.132);
  --accent: var(--brand-grey-turquoise);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.872 0.009 258.338);
  --input: oklch(0.872 0.009 258.338);
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --font-body: "Inter", Arial, Helvetica, sans-serif;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Navbar height: logo (100px) + vertical padding (p-2 = 8px top+bottom mobile, md:py-4 = 16px top+bottom desktop) */
  --navbar-height: 116px;

  @media (min-width: 768px) {
    --navbar-height: 132px;
  }
}

/* Compact branded header for non-canvas pages */
.branded-header {
  background-color: var(--brand-dark-turquoise);
}

/* Compact 80px logo inside branded header */
.branded-header .navbar--logo .branding {
  height: 80px;
  max-height: none;
}

/* Override the breadcrumb template's hardcoded text-foreground colour */
.branded-header nav[aria-label="breadcrumb"] ol {
  color: white;
}

/* Mobile menu: compact dropdown anchored to the right edge below the header */
@media (max-width: 767px) {
  /* Position context for the dropdown */
  .branded-header,
  .canvas-header {
    position: relative;
  }

  /* Override full-screen fixed overlay → compact absolute dropdown */
  .branded-header .navbar--menu,
  .canvas-header .navbar--menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    bottom: auto;
    height: auto;
    max-height: 80dvh;
    overflow-y: auto;
    width: max-content;
    min-width: 220px;
    background-color: var(--brand-dark-turquoise);
    color: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    border-radius: 0 0 var(--radius) var(--radius);
    padding-bottom: 0.5rem;
  }

  /* Hide the full-screen modal top bar (logo + close button) */
  .branded-header .navbar--modal-top,
  .canvas-header .navbar--modal-top {
    display: none;
  }

  /* Remove the gradient scroll fade — not useful in a compact dropdown */
  .branded-header .navbar--dropdown-menu-wrapper::after,
  .canvas-header .navbar--dropdown-menu-wrapper::after {
    display: none;
  }

  /* Separator lines between top-level menu items */
  .branded-header .navbar--menu [data-level="1"],
  .canvas-header .navbar--menu [data-level="1"] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* Hover/focus states for menu links */
  .branded-header .navbar--menu [data-level="1"] a:hover,
  .branded-header .navbar--menu [data-level="1"] a:focus,
  .canvas-header .navbar--menu [data-level="1"] a:hover,
  .canvas-header .navbar--menu [data-level="1"] a:focus {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
  }

  /* Active trail highlight */
  .branded-header .navbar--menu .bg-muted\/50,
  .canvas-header .navbar--menu .bg-muted\/50 {
    background-color: rgba(255, 255, 255, 0.2);
  }
}

/* Navbar logo sizing */
.navbar--logo .branding {
  height: 100px;
  max-height: none;
}

/* Footer logo sizing */
.site-footer .branding {
  height: 50px;
  max-height: none;
}

/* Pull canvas page content up behind the navbar so the hero fills the full viewport */
.canvas-hero-offset {
  margin-top: calc(var(--navbar-height) * -1);
}

/* Webform pages (node type "webform"): give the embedded form generous side
   margins instead of sitting flush against the viewport edge. Overrides the
   default .region-content container's fixed max-width with viewport-relative
   padding so the margin scales with screen size. */
.page-node-type-webform .region-content {
  max-width: none;
  padding-left: 5%;
  padding-right: 5%;
}

@media (min-width: 768px) {
  .page-node-type-webform .region-content {
    padding-left: 10%;
    padding-right: 10%;
  }
}

@media (min-width: 1024px) {
  .page-node-type-webform .region-content {
    padding-left: 20%;
    padding-right: 20%;
  }
}

.dark {
  --background: oklch(0.13 0.043 265.132);
  --foreground: oklch(1 0 89.876);
  --card: oklch(0.208 0.042 266.359);
  --card-foreground: var(--foreground);
  --primary: var(--brand-yellow);
  --primary-foreground: var(--foreground);
  --secondary: oklch(0.704 0.04 256.993);
  --secondary-foreground: oklch(0.13 0.043 265.132);
  --muted: oklch(0.28 0.041 260.329);
  --muted-foreground: oklch(0.967 0.003 264.542);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: oklch(0.13 0.043 265.132);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.373 0.031 259.733);
  --input: oklch(0.373 0.031 259.733);
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1);
}

/* Fill the gaps between Canvas sections with the accent colour */
.canvas-hero-offset {
  background-color: var(--accent);
}

/* Sponsor cards: white background with dark-turquoise border */
.view-sponsors .views-view-responsive-grid__item {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 8px solid var(--brand-dark-turquoise);
  background-color: white;
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Lift the card off the page on hover/focus, as if it could be picked up */
.view-sponsors .views-view-responsive-grid__item:hover,
.view-sponsors .views-view-responsive-grid__item:focus-within {
  transform: scale(1.05);
  box-shadow: var(--shadow-xl);
  z-index: 1;
}

/* Exhibitor cards: white background with dark-turquoise border */
.view-exhibitors .views-view-responsive-grid__item {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 8px solid var(--brand-dark-turquoise);
  background-color: #d9d9d9;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Cap each card at the grid's computed column width instead of letting it stretch to fill the row */
.view-sponsors .views-view-responsive-grid--horizontal,
.view-exhibitors .views-view-responsive-grid--horizontal {
  grid-template-columns: repeat(
    auto-fill,
    minmax(
      max(var(--views-responsive-grid-item--calculated-min-width), var(--views-responsive-grid-item--max-width)),
      var(--views-responsive-grid-item--max-width)
    )
  );
}

/* Step the column count by viewport instead of using the fixed count from the Views UI.
   !important needed throughout: column-count is set via an inline style attribute on this element. */
@media (max-width: 767px) {
  .view-sponsors .views-view-responsive-grid--horizontal,
  .view-exhibitors .views-view-responsive-grid--horizontal {
    --views-responsive-grid--column-count: 1 !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .view-sponsors .views-view-responsive-grid--horizontal,
  .view-exhibitors .views-view-responsive-grid--horizontal {
    --views-responsive-grid--column-count: 2 !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .view-sponsors .views-view-responsive-grid--horizontal,
  .view-exhibitors .views-view-responsive-grid--horizontal {
    --views-responsive-grid--column-count: 3 !important;
  }
}

@media (min-width: 1280px) {
  .view-sponsors .views-view-responsive-grid--horizontal,
  .view-exhibitors .views-view-responsive-grid--horizontal {
    --views-responsive-grid--column-count: 4 !important;
  }
}

/* Drupal's contextual-links wrapper (shown to logged-in editors and in Canvas) adds its own
   position: relative to the row article, which would otherwise become the positioning context
   for the logo below instead of the card itself, displacing the image. */
.view-sponsors .views-view-responsive-grid__item .contextual-region,
.view-exhibitors .views-view-responsive-grid__item .contextual-region {
  position: static;
}

/* Scale the logo to fit inside the card with a consistent margin on all sides */
.view-sponsors .views-view-responsive-grid__item img,
.view-exhibitors .views-view-responsive-grid__item img {
  position: absolute;
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  object-fit: contain;
}

/* Sponsor/exhibitor teaser (Layout Builder two-column section): float the logo
   to the right of its column, away from the page margin and adjacent to the
   text column, with a gap between the two. Only applies once the columns sit
   side by side (matches core's own breakpoint for this layout). */
@media screen and (min-width: 40em) {
  .layout--twocol-section > .layout__region--first {
    display: flex;
    justify-content: flex-end;
    padding-right: 1.5rem;
  }
}

/* Sponsor/exhibitor teaser listings: space each row from the one above it,
   including the first row from the exposed filters. */
.view-taxonomy-term .views-row,
.view-sponsors .views-row,
.view-exhibitors .views-row {
  margin-top: 1.5em;
}

/* Sponsor/exhibitor teaser listings: separate the row heading from the
   logo/text content below it. */
.view-taxonomy-term .views-row h2,
.view-sponsors .views-row h2,
.view-exhibitors .views-row h2 {
  margin-bottom: 0.5em;
}

/* Sponsor/exhibitor default (full) and teaser view modes: distinguish field
   labels from field values. .page-node-type-* scopes the full node page;
   .view-sponsors/.view-exhibitors/.view-taxonomy-term scope the teaser
   listing pages (the taxonomy term view reuses the same teaser display). */
:is(.page-node-type-sponsor, .page-node-type-exhibitor, .view-sponsors, .view-exhibitors, .view-taxonomy-term) .field__label {
  font-weight: bold;
  font-style: italic;
}

:is(.page-node-type-sponsor, .page-node-type-exhibitor, .view-sponsors, .view-exhibitors, .view-taxonomy-term) .field__item {
  padding-left: 0.5em;
  font-size: 1.2em;
}

:is(.page-node-type-sponsor, .page-node-type-exhibitor, .view-sponsors, .view-exhibitors, .view-taxonomy-term) .field__item a {
  color: var(--primary);
}