/* ==========================================================================
   Gibraltar Theme – core tokens + typography
   ========================================================================== */

/* 1. Grayscale palette + Bootstrap tokens */
:root {
  /* Greyscale palette */
  --gray-100: #f8f8f8;
  --gray-200: #e4e4e4;
  --gray-300: #d0d0d0;
  --gray-400: #b8b8b8;
  --gray-500: #9c9c9c;
  --gray-600: #7a7a7a;
  --gray-700: #555555;
  --gray-800: #333333;
  --gray-900: #1a1a1a;

  /* Bootstrap theme colors overridden */
  --bs-primary: var(--gray-900);
  --bs-secondary: var(--gray-600);
  --bs-success: var(--gray-700);
  --bs-info: var(--gray-500);
  --bs-warning: var(--gray-500);
  --bs-danger: var(--gray-700);
  --bs-light: var(--gray-100);
  --bs-dark: var(--gray-900);

  /* Body + text */
  --bs-body-bg: #ffffff;
  --bs-body-color: #222222;

  /* Links */
  --bs-link-color: var(--gray-900);
  --bs-link-hover-color: var(--gray-700);

  /* Borders */
  --bs-border-color: var(--gray-300);

  /* Text utilities (Bootstrap uses this for .text-muted) */
  --bs-secondary-color: var(--gray-600);
}

/* 2. Base typography */

body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: 16px;
  line-height: 1.6;
}

/* bump body size on larger screens */
@media (min-width: 992px) {
  body { font-size: 17px; }
}
@media (min-width: 1400px) {
  body { font-size: 18px; }
}

/* Generic heading treatment inside section blocks */
.gi-section h1,
.gi-section h2,
.gi-section h3,
.gi-section h4 {
  font-weight: 600;
  line-height: 1.2;
}

/* Desktop heading bump */
@media (min-width: 992px) {
  .gi-section h2 { font-size: 2rem; }   /* 32px */
  .gi-section h3 { font-size: 1.5rem; } /* 24px */
}
@media (min-width: 1400px) {
  .gi-section h2 { font-size: 2.25rem; } /* 36px */
  .gi-section h3 { font-size: 1.75rem; } /* 28px */
  .gi-section p  { font-size: 1.05rem; }
}

/* Eyebrow / kicker text */
.gi-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.85;
}

/* In dark-on-light sections, eyebrows can be slightly darker */
.gi-section--text-dark .gi-eyebrow {
  color: var(--gray-700);
}

/* 3. Heading utility scale used in playground + blocks */

.gi-heading {
  font-weight: 600;
  line-height: 1.2;
  font-size: clamp(1.5rem, 1.1rem + 0.8vw, 2.5rem); /* ~24–40px */
  margin-bottom: 0.5rem;
}
.gi-heading--sm {
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.9rem);
}
.gi-heading--md {
  font-size: clamp(1.5rem, 1.1rem + 0.8vw, 2.5rem);
}
.gi-heading--lg {
  font-size: clamp(1.75rem, 1.2rem + 1vw, 3rem); /* ~28–48px */
}
.gi-heading--xl {
  font-size: clamp(2rem, 1.4rem + 1.4vw, 3.5rem); /* ~32–56px */
}

/* 4. Section background helpers (color-based) */

.gi-section--bg-default { background-color: var(--bs-body-bg); }
.gi-section--bg-alt     { background-color: var(--gray-100); }
.gi-section--bg-dark    { background-color: var(--gray-900); color: #fff; }
.gi-section--bg-accent  { background-color: var(--gray-800); color: #fff; }

/* 5. Text scheme for image / dark backgrounds */

.gi-section--text-light {
  color: #ffffff;

  /* Make Bootstrap utilities use light colors in this scope */
  --bs-body-color: #ffffff;
  --bs-heading-color: #ffffff;
  --bs-secondary-color: rgba(255, 255, 255, 0.75); /* for .text-muted */
  --bs-link-color: #ffffff;
  --bs-link-hover-color: #ffffff;
}

.gi-section--text-light a {
  color: #ffffff;
  text-decoration: underline;
}

/* 6. Section background image / video scaffolding
   (used by WP wrapper; safe/no-op for playground HTML) */

.gi-section {
  position: relative;
  overflow: hidden;
}

.gi-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.gi-section__bg-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.gi-section__bg-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.4);
}

.gi-section__inner {
  position: relative;
  z-index: 1;
}

/* Optional data attribute helpers if you wire up bg position */
.gi-section[data-bg-position="top"] .gi-section__bg-image    { background-position: center top; }
.gi-section[data-bg-position="center"] .gi-section__bg-image { background-position: center center; }
.gi-section[data-bg-position="bottom"] .gi-section__bg-image { background-position: center bottom; }

/* 7. Content width helpers (for WP blocks and any advanced layouts) */

.gi-section__content {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: min(100%, 1440px);  /* default frame */
}

.gi-section__content--narrow {
  max-width: min(100%, 900px);
}

.gi-section__content--wide {
  max-width: min(100%, 1900px);
}

/* 8. Playground / shared helpers */

.gi-content-block--narrow {
  max-width: 720px;
}

.gi-link {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  cursor: pointer;
}

.gi-link--with-arrow::after {
  content: " →";
}

.gi-content-media__media img {
  border-radius: 0.5rem;
}

/* Form/embed tweak (used in playground) */
.gi-form-embed__form form {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Force Content + Media row to stay flex */
.row.gi-content-media {
    display: flex !important;
    flex-wrap: wrap;
}