/*
Theme Name: Growing Together Grimsby
Theme URI: https://ourfuture-grimsby.org
Author: Our Future
Description: Community-led, place-based movement theme for Grimsby and North East Lincolnshire.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: Proprietary
Text Domain: growingtogethergy
*/

@import url('assets/css/colors_and_type.css');
@import url('assets/css/site.css');
@import url('assets/css/wordmark.css');

/* ── Mobile nav: hidden until .nav-open is toggled by JS ── */
.gt-header__nav--mobile { display: none; }
.gt-header.nav-open .gt-header__nav--mobile { display: flex; }

/* Swap burger icons */
.gt-header__burger .icon-close { display: none; }
.gt-header.nav-open .gt-header__burger .icon-open  { display: none; }
.gt-header.nav-open .gt-header__burger .icon-close { display: block; }

/* ── FAQ accordion: answer hidden until .is-open on parent ── */
.gt-faq__a { display: none; }
.gt-faq.is-open .gt-faq__a { display: block; }

/* =============================================================
   GTRANSLATE - style the native <select> the free widget renders
   ============================================================= */

.gtranslate_wrapper {
  display: flex !important;
  align-items: center !important;
}

.gtranslate_wrapper select {
  appearance: none !important;
  -webkit-appearance: none !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: var(--w-medium) !important;
  color: var(--gt-navy) !important;
  background-color: transparent !important;
  border: 1.5px solid var(--gt-line) !important;
  border-radius: 2px !important;
  padding: 5px 28px 5px 10px !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  /* Navy chevron arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23180c3c'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  background-size: 9px !important;
  outline: none !important;
  box-shadow: none !important;
}

.gtranslate_wrapper select:hover {
  border-color: var(--gt-blue) !important;
}

.gtranslate_wrapper select:focus {
  border-color: var(--gt-blue) !important;
  outline: 2px solid rgba(51,187,229,.3) !important;
  outline-offset: 1px !important;
}

/* Hide below 480 px so it doesn't crowd the burger */
@media (max-width: 480px) {
  .gtranslate_wrapper { display: none !important; }
}

/* =============================================================
   POWERED BY OUR FUTURE - badge used in header + footer base
   ============================================================= */

.gt-powered {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  padding: 4px 8px;
  text-decoration: none !important;
  line-height: 1;
  transition: background .2s;
  flex-shrink: 0;
}
.gt-powered:hover {
  background: rgba(255,255,255,0.20);
}
.gt-powered__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  white-space: nowrap;
}
.gt-powered__logo {
  height: 20px;
  width: auto;
  display: block;
  border-radius: 2px;
}
/* Hero placement - pinned to bottom-left of the hero section */
.gt-vhero__powered {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  padding: 0 var(--gutter, 24px);
}

/* Hide header badge on mobile - burger + translate already crowded */
@media (max-width: 640px) {
  .gt-powered--header { display: none !important; }
}

/* =============================================================
   AIRTABLE EMBED - project map + gallery toggle
   ============================================================= */

.gt-airtable-embed__bar {
  border-top: 1.5px solid var(--gt-line);
  border-bottom: 1.5px solid var(--gt-line);
  padding: 16px 0;
}
.gt-airtable-embed__bar .gt-container {
  display: flex;
  gap: 12px;
  align-items: center;
}
.gt-airtable-embed__hint {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--gt-mute);
  margin-left: 4px;
}
.gt-airtable-embed__view {
  height: 80vh;
  min-height: 600px;
}
.gt-airtable-embed__view iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

@media (max-width: 640px) {
  .gt-airtable-embed__view {
    height: 70vh;
    min-height: 480px;
  }
  .gt-airtable-embed__hint { display: none; }
}

/* =============================================================
   MOBILE RESPONSIVE OVERRIDES
   site.css is kept verbatim - all mobile fixes live here.
   ============================================================= */

/* WordPress admin bar: offset sticky header so it doesn't clash */
body.admin-bar .gt-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .gt-header { top: 46px; }
}

/* 1. Prevent horizontal scroll globally.
   overflow-x only on body — applying it to html creates a new scroll
   container that breaks position:sticky on the header. */
body {
  margin: 0;
  overflow-x: hidden;
}
/* Prevent any grid child blowing out its track */
* { min-width: 0; }

/* The \n\n whitespace text-node between </header> and <main> generates a
   24px anonymous block (= body line-height) on every page. Collapse the
   strut with line-height:0 on body, then restore on the actual children. */
body {
  line-height: 0;
}
body > header,
body > main,
body > footer {
  line-height: 1.5;
}

@media (max-width: 640px) {

  /* 2. Display text: prevent long words overflowing narrow cards */
  .gt-display, h1, h2, h3 {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* 3. Footer: site.css stops at 1fr 1fr - collapse to single column */
  .gt-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* 4. Grids site.css still leaves at 2 columns at 640px */
  .gt-ways        { grid-template-columns: 1fr !important; }
  .gt-timeline    { grid-template-columns: 1fr !important; }
  .gt-people      { grid-template-columns: 1fr !important; }
  .gt-stats,
  .gt-bignums     { grid-template-columns: 1fr !important; }

  /* 5. Section header: site.css has no 640px override for the 2fr 1fr layout */
  .gt-sec-head {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 6. Inline-style grids defined in PHP templates (need !important to win) */
  .gt-hw-join {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ── Airtable iframe skeleton loader ── */
.gt-iframe-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.gt-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
}
.gt-iframe-skeleton {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--gt-white);
  pointer-events: none;
}
.gt-iframe-skeleton__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0,0,0,.1);
  border-top-color: var(--gt-blue);
  border-radius: 50%;
  animation: gt-spin 0.8s linear infinite;
}
.gt-iframe-skeleton__msg {
  font-size: 0.875rem;
  color: rgba(0,0,0,.4);
  margin: 0;
}
@keyframes gt-spin {
  to { transform: rotate(360deg); }
}

/* ── Partner logo carousel ── */
.gt-logo-carousel {
  overflow: hidden;
  width: 100%;
  position: relative;
  /* Fade edges */
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.gt-logo-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: gt-logo-scroll 35s linear infinite;
}

.gt-logo-carousel:hover .gt-logo-track {
  animation-play-state: paused;
}

@keyframes gt-logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .gt-logo-track { animation: none; }
}

/* Compact callout variant - smaller, italic body text */
.gt-callout--sm p,
.gt-callout--sm strong {
  font-size: 0.72rem !important;
}
.gt-callout--sm p { font-style: italic; }

/* =============================================================
   PROJECT STEPS (How to use the map)
   Three-column numbered grid above the Airtable embed.
   ============================================================= */

.gt-project-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gt-project-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 24px;
  border: 1.5px solid var(--gt-line);
  border-radius: 4px;
  background: var(--gt-white);
}
.gt-project-step__num {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gt-orange);
  line-height: 1;
}
.gt-project-step__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  flex: 1;
}
@media (max-width: 640px) {
  .gt-project-steps { grid-template-columns: 1fr; }
}