/* The Real Travel Guy — Step 2 shared design system */
:root {
  --trtg-primary: #00C2CB;
  --trtg-primary-rgb: 0, 194, 203;
  --trtg-on-primary: #111111;

  --trtg-background: #F7F4EA;
  --trtg-surface: #FFFFFF;
  --trtg-surface-soft: #FCFBF7;
  --trtg-text: #111111;
  --trtg-text-muted: #5A5A5A;
  --trtg-border: #DDD8CB;
  --trtg-danger: #A52B2B;

  --trtg-space-1: 0.5rem;
  --trtg-space-2: 0.75rem;
  --trtg-space-3: 1rem;
  --trtg-space-4: 1.5rem;
  --trtg-space-5: 2rem;
  --trtg-space-6: 3rem;

  --trtg-radius-sm: 10px;
  --trtg-radius: 16px;
  --trtg-radius-lg: 24px;
  --trtg-radius-pill: 999px;
  --trtg-shadow-sm: 0 4px 14px rgba(17, 17, 17, 0.06);
  --trtg-shadow: 0 8px 25px rgba(17, 17, 17, 0.08);
  --trtg-shadow-hover: 0 14px 35px rgba(17, 17, 17, 0.13);
}

html {
  background: var(--trtg-background);
  color-scheme: light;
  overflow-wrap: break-word;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body {
  background-color: var(--trtg-background) !important;
  color: var(--trtg-text) !important;
}

::selection {
  background: rgba(var(--trtg-primary-rgb), 0.24);
  color: var(--trtg-text);
}

/* Page chrome uses the approved eggshell canvas. */
.header,
#menu,
.app-menu,
footer {
  background: var(--trtg-background);
}

/* Elevated content stays white to create depth on the eggshell canvas. */
.hero-copy,
.seo-text,
.card,
.category-header,
.no-results,
.popup-content,
.event-item,
.no-events,
.submit-card,
.kpi-card,
.analytics-card,
.form-panel,
#listingsPanel,
#stbAdminListPanel,
.admin-card,
.admin-tabs,
.aeo-admin-panel,
.admin-empty-state,
.aeo-preview {
  background: var(--trtg-surface) !important;
  color: var(--trtg-text);
  border-color: var(--trtg-border);
}

.awards-section {
  background: linear-gradient(145deg, var(--trtg-surface), var(--trtg-surface-soft));
  border-color: rgba(221, 216, 203, 0.75);
}

/* Authoritative primary brand accent. */
.hero-label,
.read-more,
.listing-slug,
.listing-category,
#stbAdminCount,
.aeo-admin-panel h3,
.kpi-value,
.activity-event {
  color: var(--trtg-primary-text) !important;
}

.listing-page .listing-category {
  background: var(--trtg-primary) !important;
  color: var(--trtg-on-primary) !important;
}

.hero-copy::after,
.filter-btn.active,
#installBtn,
.event-board-btn,
.stb-home-promo-btn,
.primary-btn,
.submit-btn,
.share-btn,
.admin-tab.active,
.admin-status-published,
.admin-visible,
.nav-btn:hover,
.nav-btn.active {
  background: var(--trtg-primary) !important;
  color: var(--trtg-on-primary) !important;
}

.filter-btn.active,
#installBtn,
.event-board-btn,
.stb-home-promo-btn,
.primary-btn,
.submit-btn,
.share-btn,
.admin-tab.active,
.nav-btn.active {
  border-color: var(--trtg-primary) !important;
}

/* Preserve destructive states as functional colour, not brand colour. */
.btn-delete,
button.btn-delete,
[aria-label*="delete" i] {
  background: var(--trtg-danger) !important;
  color: #FFFFFF !important;
}

/* Inputs and controls */
input,
textarea,
select {
  background: var(--trtg-surface);
  color: var(--trtg-text);
  border-color: var(--trtg-border);
}

input::placeholder,
textarea::placeholder {
  color: #757575;
}

a,
button,
input,
textarea,
select,
[tabindex]:not([tabindex="-1"]) {
  -webkit-tap-highlight-color: rgba(var(--trtg-primary-rgb), 0.18);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--trtg-primary) !important;
  outline-offset: 3px;
}

button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  min-height: 44px;
}

/* Public-site text alignment */
.hero-copy p,
.seo-text p,
.desc,
.card p,
.awards-left p {
  color: var(--trtg-text-muted);
}

/* Administration: keep denser layout but align it with the public visual system. */
#loading {
  background: var(--trtg-background) !important;
  color: var(--trtg-text) !important;
}

#search,
#stbAdminSearch {
  background: var(--trtg-surface) !important;
  color: var(--trtg-text) !important;
  border: 1px solid var(--trtg-border) !important;
}

.admin-field-label,
.slug-preview,
.aeo-admin-help,
.aeo-batch-status,
.aeo-card-status,
.admin-empty-state,
.admin-card p {
  color: var(--trtg-text-muted) !important;
}

.admin-tabs {
  border: 1px solid var(--trtg-border) !important;
}

.admin-tab {
  background: var(--trtg-surface-soft) !important;
  color: var(--trtg-text) !important;
  border: 1px solid var(--trtg-border) !important;
}

#adminPanel button:not(.btn-delete):not(.btn-secondary):not(.btn-logout),
#loginBox button,
.btn-aeo-batch {
  background: var(--trtg-primary) !important;
  color: var(--trtg-on-primary) !important;
}

button.btn-secondary,
.admin-view-link {
  background: var(--trtg-surface-soft) !important;
  color: var(--trtg-text) !important;
  border: 1px solid var(--trtg-border) !important;
}

button.btn-logout {
  background: #222222 !important;
  color: #FFFFFF !important;
}

.admin-status,
.admin-private,
.admin-status-draft,
.admin-status-declined,
.admin-status-no-response {
  color: #FFFFFF;
}

/* Analytics retains a dark navigation rail as a functional navigation surface. */
.sidebar {
  background: #111111 !important;
  color: #FFFFFF !important;
}

.sidebar .nav-btn {
  color: #FFFFFF;
}

.sidebar .nav-btn:hover,
.sidebar .nav-btn.active {
  color: var(--trtg-on-primary) !important;
}

.topbar select {
  background: var(--trtg-surface);
  color: var(--trtg-text);
  border-color: var(--trtg-border);
}

.activity-item {
  border-bottom-color: var(--trtg-border);
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================
   TRTG MULTILINGUAL SELECTOR
   ========================= */
.trtg-language-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--trtg-space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.trtg-language {
  display: inline-flex;
  align-items: center;
  max-width: 12rem;
  min-width: 0;
}

.trtg-language-select {
  min-height: 44px;
  max-width: 100%;
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.trtg-language-select:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .header {
    flex-wrap: wrap;
    gap: var(--trtg-space-2);
  }

  .trtg-language-actions {
    max-width: 100%;
    margin-left: auto;
  }

  .trtg-language {
    max-width: min(9.5rem, 100%);
  }

  .trtg-language-select {
    min-height: 44px;
    font-size: 1rem;
  }
}


/* =========================
   P0 RESPONSIVE + CLS HARDENING
   ========================= */

/*
 * Reserve the language/action area before the i18n runtime hydrates it.
 * This prevents the sticky header from changing geometry after first paint,
 * which was a major CLS source in Lighthouse.
 */
.trtg-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 24rem;
  min-height: 44px;
}

.trtg-header-actions > * {
  min-width: 0;
}

.menu-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.footer-icons a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Reserve icon width before the deferred Font Awesome stylesheet arrives. */
.fa,
.fas,
.far,
.fab {
  display: inline-block;
  min-width: 1em;
  text-align: center;
}

/* Content must be allowed to shrink instead of widening the viewport. */
main,
.section,
.grid,
.card,
.hero-copy,
.video-wrapper,
.stb-home-promo,
.stb-home-promo-copy,
.awards-section,
.awards-left,
.awards-right {
  min-width: 0;
}

img,
video,
iframe,
canvas {
  max-width: 100%;
}

.grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.hero-copy h1,
.section h1,
.section h2,
.card h3,
.stb-home-promo-copy,
.menu-btn,
.trtg-language-select {
  overflow-wrap: anywhere;
}

/*
 * Tablet and phone headers use a deterministic two-row layout.
 * Row 1 is reserved for the language selector from first paint;
 * row 2 contains App/Menu controls. The empty first row exists before
 * JavaScript hydration, so adding the selector does not push the page down.
 */
@media (max-width: 820px) {
  .header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .header > *,
  .header > a {
    min-width: 0;
  }

  .header .logo {
    width: auto;
    height: auto;
    max-width: min(180px, 55vw);
    max-height: 72px;
  }

  .header > a .logo {
    width: min(180px, 55vw);
  }

  .trtg-header-actions {
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    min-height: 96px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 44px 44px;
    gap: 8px;
  }

  .trtg-header-actions > .trtg-language {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    max-width: none;
  }

  .trtg-header-actions > .trtg-language .trtg-language-select {
    width: 100%;
    max-width: 100%;
  }

  .trtg-header-actions > .menu-btn,
  .trtg-header-actions > button.menu-btn,
  .trtg-header-actions > .event-header-link {
    grid-row: 2;
    width: 100%;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    white-space: normal;
  }

  .hero-copy {
    margin-left: 16px;
    margin-right: 16px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero-copy h1 {
    font-size: clamp(2.1rem, 10vw, 3.25rem);
    line-height: 1;
    letter-spacing: -1px;
  }

  .hero-copy p {
    font-size: clamp(1rem, 4.6vw, 1.125rem);
    line-height: 1.65;
  }

  .stb-home-promo-copy {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .header {
    padding-left: 8px;
    padding-right: 8px;
  }

  .header .logo,
  .header > a .logo {
    max-width: min(150px, 52vw);
  }

  .section {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-copy {
    margin-left: 12px;
    margin-right: 12px;
    padding-left: 14px;
    padding-right: 14px;
  }

  #menu,
  .app-menu {
    width: min(260px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
  }

  .popup-content {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
  }
}


/* Homepage async category discovery reserves its final footprint until the
   Firestore-backed ring is synchronously rendered. */
#categoriesContainer.trtg-home-categories-loading {
  min-height: 590px;
  border-radius: 24px;
}

@media (max-width: 820px) {
  #categoriesContainer.trtg-home-categories-loading {
    min-height: 540px;
  }
}

@media (max-width: 520px) {
  #categoriesContainer.trtg-home-categories-loading {
    min-height: 500px;
  }
}