/*
Theme Name:        GeneratePress ARA
Theme URI:         https://ara-eu.org
Template:          generatepress
Version:           1.0.0
Author:            Atlantic Research Alliance
Author URI:        https://ara-eu.org
Description:       ARA brand-overlay child theme for GeneratePress. Holds the theme.json design tokens (colour palette, typography) used by GenerateBlocks Pro Global Classes. All visual styling lives in Global Classes — this stylesheet is intentionally minimal.
Text Domain:       generatepress-ara
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Tags:              one-column, two-columns, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-width-template, sticky-post, threaded-comments, accessibility-ready
*/

/* All visual styling lives in Global Classes (gblocks_styles) and theme.json.
   The few rules below are minor polish that can't be expressed via Customizer:
   - bottom hairline on the dark header (gold/20%)
   - active-page underline on the primary navigation
   - footer typography refinements
*/

/* Sticky header gold hairline */
.site-header { border-bottom: 0.5px solid rgba(200,154,91,0.20); }

/* Active-page underline on primary nav */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a {
  position: relative;
}
.main-navigation .main-nav ul li.current-menu-item > a::after,
.main-navigation .main-nav ul li.current_page_item > a::after {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 12px;
  height: 2px;
  background: #c79a5b;
  border-radius: 1px;
}

/* Footer typography */
.site-info {
  padding: 36px clamp(20px, 4vw, 64px);
  border-top: 0.5px solid rgba(200,154,91,0.20);
}
.site-info .copyright-bar { font-size: 12.5px; }
.site-info a {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  text-decoration: none;
}
.site-info a:hover { color: #e0c089; }

/* Site logo: cap height so the JPG sits at the right size on the dark header */
.site-logo img,
.custom-logo {
  max-height: 44px;
  width: auto;
  height: auto;
}

/* ======================================================================
   Responsive polish (added 2026-05)
   - Tablet portrait (700-1024 px): keep cards/team 2-col, not 1-col
   - Mobile phones (≤ 880 px): drop hero-card min-height
   - Narrow phones  (≤ 600 px): stack flow diagram vertically + rotate arrows
   - Mobile hamburger icon: white on dark header
   ====================================================================== */

/* Tablet portrait — cards 3-up stay 2-col */
@media (max-width: 1024px) and (min-width: 700px) {
  .gbp-cards--3,
  .gbp-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile — hero card panel doesn't need its 340 px min-height */
@media (max-width: 880px) {
  .gbp-hero__card {
    min-height: 0;
    padding: 32px 24px;
  }
}

/* Narrow phones — flow diagram becomes a vertical funnel */
@media (max-width: 600px) {
  .gbp-flow {
    flex-direction: column;
  }
  .gbp-flow__node {
    width: 100%;
    min-width: 0;
  }
  .gbp-flow__arrow {
    transform: rotate(90deg);
    padding: 8px 0;
  }
}

/* Mobile menu — make hamburger icon visible on the dark header */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus,
.mobile-menu-control-wrapper .menu-toggle {
  color: #ffffff !important;
  background-color: transparent !important;
}
.menu-toggle .gp-icon {
  color: #ffffff;
}

/* Mobile menu — open dropdown sits over the dark header continuation */
@media (max-width: 768px) {
  .main-navigation .main-nav,
  .main-navigation ul ul,
  .has-inline-mobile-toggle #site-navigation.toggled {
    background-color: #0e1117;
  }
  /* Active-page underline doesn't make sense in a stacked mobile dropdown — hide */
  .main-navigation .main-nav ul li.current-menu-item > a::after,
  .main-navigation .main-nav ul li.current_page_item > a::after {
    display: none;
  }
}

/* ======================================================================
   Bug fixes (2026-05) — patches for style-global.css Global Classes
   These override GenerateBlocks Pro Global Class rules that can't be
   easily changed via the block editor.
   ====================================================================== */

/* Bug 4 — Strip: constrain to 1280px like other sections */
.gbp-strip {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 4vw, 64px);
  padding-right: clamp(20px, 4vw, 64px);
  box-sizing: border-box;
}

/* Bug 5 — Section headline: dark on light backgrounds, white on dark/navy */
.gbp-section__headline {
  color: var(--wp--preset--color--ara-dark, #0e1117);
}
.gbp-section--white .gbp-section__headline,
.gbp-section--off .gbp-section__headline,
.gbp-section--cream .gbp-section__headline {
  color: var(--wp--preset--color--ara-dark, #0e1117);
}
.gbp-section--dark .gbp-section__headline,
.gbp-section--dark .gbp-section__title,
.gbp-section--navy .gbp-section__headline,
.gbp-section--navy .gbp-section__title {
  color: #ffffff;
}
.gbp-section__sub {
  color: var(--wp--preset--color--ara-muted, #6b7280);
}
.gbp-section--dark .gbp-section__sub,
.gbp-section--navy .gbp-section__sub {
  color: rgba(255, 255, 255, 0.68);
}
.gbp-section__tagline {
  color: var(--wp--preset--color--ara-gold, #c79a5b);
}

/* Bug 6 — Hero grid: 75/25 split instead of 57/43 */
.gbp-hero__inner {
  grid-template-columns: 3fr 1fr;
}
@media (max-width: 880px) {
  .gbp-hero__inner {
    grid-template-columns: 1fr;
  }
}

/* Bug 7 — Body text +2-3px larger */
.gbp-hero__lede { font-size: 17px; }
.gbp-card p { font-size: 16.5px; }
.gbp-triptych__body { font-size: 16.5px; }
.gbp-check-item { font-size: 16.5px; }
.gbp-strip__text p { font-size: 16.5px; }
.gbp-pill { font-size: 15.5px; }
.gbp-section__sub,
.gbp-section__text { font-size: 16.5px; }

/* Bug 2 — Triptych tile titles: clickable link styling */
.gbp-triptych__title a { color: inherit; text-decoration: none; }
.gbp-triptych__title a:hover { color: var(--wp--preset--color--ara-gold, #c79a5b); }