/* GATA - Guildford Amateur Theatre Association custom styles
   Built on top of the tjay2025 boilerplate / Bootstrap 4.4.1.
   Replaces the previous generic tjay-custom.css. */

:root {
  --gata-navy:       #1a2e4a;
  --gata-navy-dark:  #0f1c30;
  --gata-gold:       #d4a017;
  --gata-gold-light: #e8b94a;
  --gata-cream:      #fafaf7;
  --gata-text:       #2c2c2c;
  --gata-text-light: #5a5a5a;
}

a img {
  border: none;
  text-decoration: none;
  display: block;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--gata-text);
  background-color: var(--gata-cream);
  padding-top: 50px; /* matches the actual navbar height (Bootstrap 4 + navbar-expand-lg) */
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: Georgia, "Times New Roman", "Liberation Serif", serif;
  color: var(--gata-navy);
}

a {
  color: var(--gata-navy);
  text-decoration: none;
  border-bottom: 1px dotted var(--gata-gold);
  transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover, a:focus {
  color: var(--gata-gold);
  border-bottom-color: var(--gata-navy);
  text-decoration: none;
}

/* Header / nav */
.navbar, .site-header, header.navbar {
  background-color: var(--gata-navy) !important;
  color: var(--gata-cream) !important;
}

.navbar a, .navbar-brand, .nav-link {
  color: var(--gata-cream) !important;
  border-bottom: none !important;
}

.navbar a:hover, .nav-link:hover, .nav-link.active {
  color: var(--gata-gold) !important;
}

/* Buttons */
.btn, button.btn, input[type="submit"] {
  background-color: var(--gata-gold);
  border-color: var(--gata-gold);
  color: var(--gata-navy);
  font-weight: 600;
  border-radius: 0;
  border-bottom: none !important;
}

.btn:hover, button.btn:hover, input[type="submit"]:hover {
  background-color: var(--gata-gold-light);
  border-color: var(--gata-gold-light);
  color: var(--gata-navy-dark);
}

.btn-primary, input[type="submit"].btn-primary {
  background-color: var(--gata-navy);
  border-color: var(--gata-navy);
  color: var(--gata-cream);
}

.btn-primary:hover {
  background-color: var(--gata-navy-dark);
  border-color: var(--gata-gold);
  color: var(--gata-gold);
}

/* Footer */
.site-footer, footer.footer, footer {
  background-color: var(--gata-navy-dark);
  color: var(--gata-cream);
  padding: 2rem 0;
  margin-top: 4rem;
}

.site-footer a, footer a {
  color: var(--gata-gold);
  border-bottom: 1px dotted var(--gata-gold-light);
}

.site-footer a:hover, footer a:hover {
  color: var(--gata-cream);
}

/* Blockquote / pull-quotes */
blockquote {
  border-left: 4px solid var(--gata-gold);
  padding-left: 1rem;
  font-style: italic;
  color: var(--gata-text-light);
}

/* GATA jumbotron with theatre image background (inner pages) */
.gata-jumbotron {
  position: relative;
  background-image: url('https://gata.tjay.me.uk/wp-content/uploads/2026/08/gata-hero-image-1024x545.jpg');
  background-size: cover;
  background-position: center;
  background-color: var(--gata-navy);
  color: var(--gata-cream);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 0;
  overflow: hidden;
}

.gata-jumbotron::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 48, 0.55);
  z-index: 0;
}

.gata-jumbotron h1 {
  position: relative;
  z-index: 1;
  color: var(--gata-cream);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.02em;
}

.gata-jumbotron h5 {
  color: var(--gata-gold);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

@media (max-width: 575px) {
  .gata-jumbotron { min-height: 200px; }
  .gata-jumbotron h1 { font-size: 1.75rem; }
}

/* GATA hero banner (used on front-page) */
.gata-hero {
  position: relative;
  background: var(--gata-navy);
  color: var(--gata-cream);
  border-bottom: 4px solid var(--gata-gold);
  overflow: hidden;
  padding: 0;
  margin: 0 0 2rem;
}

.gata-hero__image {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  display: block;
}

.gata-hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 1.5rem;
  background: linear-gradient(transparent, rgba(15, 28, 48, 0.9));
  text-align: center;
}

.gata-hero__content h1 {
  color: var(--gata-cream);
  font-size: 2.5rem;
  margin: 0;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.gata-hero__content .lead {
  color: var(--gata-gold);
  font-size: 1.25rem;
  font-weight: 300;
  margin: 0.5rem 0 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 575px) {
  .gata-hero__image { max-height: 320px; }
  .gata-hero__content h1 { font-size: 1.75rem; }
  .gata-hero__content .lead { font-size: 1rem; }
}

/* Section dividers */
.gata-section {
  padding: 3rem 0;
}

.gata-section--alt {
  background-color: #f0ece1;
}

/* Member group card */
.gata-member-card {
  border: 1px solid #e0dccd;
  border-left: 4px solid var(--gata-gold);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  background: #fff;
  transition: border-color 0.15s ease;
}

.gata-member-card:hover {
  border-color: var(--gata-navy);
  border-left-color: var(--gata-gold);
}

/* Page header (interior pages) */
.gata-page-header {
  background: var(--gata-navy);
  color: var(--gata-cream);
  padding: 2rem 0;
  margin-bottom: 2rem;
  border-bottom: 4px solid var(--gata-gold);
}

.gata-page-header h1 {
  color: var(--gata-cream);
  margin: 0;
}


/* === GATA site styling ===
   Added 2026-08-12 by Dave. Edit this file, not the Customizer.
*/

/* Footer widget headers — white-on-blue readability */
.my-footer .widget-title,
.my-footer h6.widget-title,
footer .widget-title { color: #ffffff !important; }
.my-footer, .my-footer a { color: #e8e8f0; }
.my-footer a:hover { color: #ffffff; text-decoration: underline; }

/* Body text — justified with hyphens */
body, p, li, .entry-content, .page-content, .gata-lede {
    text-align: justify;
}


/* CTA buttons */
.gata-cta {
    display: inline-block;
    background: #0066cc;
    color: #ffffff !important;
    padding: 0.6rem 1.1rem;
    text-decoration: none !important;
    border-radius: 4px;
    font-weight: 600;
    transition: background 0.15s;
}
.gata-cta:hover { background: #004c99; }
.gata-cta-secondary {
    color: #0066cc !important;
    text-decoration: none;
    font-weight: 600;
}
.gata-cta-secondary:hover { text-decoration: underline; }


/* === GATA sidebar widget styling v2 ===
   Updated 2026-08-12 by Dave.
*/

/* Card header — GATA navy with top padding */
.widget_text.card .card-header {
    background-color: #1a2e4a !important;
    color: #ffffff !important;
    padding: 1rem 1rem 0.75rem 1rem;
    padding-top: 1.5rem;
    border: none;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    margin-bottom: 0;
}

/* Widget body padding */
.widget_text.card .textwidget {
    padding: 0.75rem 1rem 1rem 1rem;
}

/* Smaller widget titles (h4 inside body) */
.gata-sidebar-campaign h4,
.gata-sidebar-cta h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #1a2e4a;
    margin: 0 0 0.4rem 0;
}

/* Smaller body text in cards */
.gata-sidebar-campaign p,
.gata-sidebar-cta p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 0.6rem 0;
    color: #444;
}

/* Adjust the campaign box border since the card now has a coloured header */
.gata-sidebar-campaign {
    background: transparent !important;
    border-left: none !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* GATA sidebar dedupe done */


/* GATA no-hyphens tweak done */


/* === GATA single group page === */
.gata-single-group { max-width: 800px; margin: 2rem auto; }
.gata-single-header { display: flex; align-items: center; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap; }
.gata-single-logo { flex: 0 0 200px; }
.gata-single-logo img { max-width: 100%; height: auto; max-height: 160px; object-fit: contain; }
.gata-single-name { margin: 0 0 0.5rem 0; font-size: 2rem; color: #1a2e4a; }
.gata-single-type {
    display: inline-block;
    background: #1a2e4a;
    color: #fff;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.gata-single-content { margin: 2rem 0; line-height: 1.7; }
.gata-single-content p:first-child { font-size: 1.1rem; color: #444; }
.gata-single-contact {
    background: #f5f5f5;
    padding: 1.5rem;
    border-radius: 4px;
    margin: 2rem 0;
    border-left: 4px solid #1a2e4a;
}
.gata-single-contact h2 { margin-top: 0; font-size: 1.1rem; }
.gata-single-contact p { margin: 0.5rem 0; }
.gata-single-back { margin-top: 2rem; font-weight: 600; }


/* === GATA hero tagline centered === */
.gata-hero__content,
.gata-hero__content h1,
.gata-hero__content .lead {
    text-align: center;
}


/* === GATA heading typography fix v2 ===
   - Switches headings from Georgia (serif, short caps) to system sans-serif
   - Forces text-align: left (overrides inherited justify from body)
   - Tighter letter-spacing for a more modern look
*/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    text-align: left !important;
    letter-spacing: -0.01em;
    font-weight: 700;
}

/* Hero H1 keeps its white-on-image style but now sans-serif */
.gata-hero__content h1,
header h1,
.entry-header h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Widget titles (footer/sidebar) also benefit from sans-serif */
.widget-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}


/* === GATA hero h1 centered === */
.gata-hero__content h1 {
    text-align: center !important;
}


/* === GATA CTA buttons gold === */
.gata-cta {
    background: var(--gata-gold, #d4a017) !important;
    color: #ffffff !important;
}
.gata-cta:hover {
    background: var(--gata-gold-light, #b8881a) !important;
}


/* === GATA CTA text navy === */
.gata-cta {
    color: var(--gata-navy, #1a2e4a) !important;
}
.gata-cta:hover {
    color: var(--gata-navy-dark, #0f1c30) !important;
}


/* === GATA page title h1 matched to h2 ===
   Keep semantic h1 (good for SEO) but make it visually match
   the other section headings on the page.
*/
.entry-header h1,
.page-header h1,
header h1:not(.gata-hero__content h1):not(.navbar-brand) {
    font-size: clamp(1.75rem, 1.5vw + 1.25rem, 2.5rem);
    font-weight: 600;
    color: var(--gata-navy);
    text-shadow: none;
    margin-bottom: 1rem;
    letter-spacing: 0;
}


/* === GATA mobile-friendly — added 2026-09-05 ===
   Keeps the desktop look identical to what was set on 12 Aug.
   Mobile: tighter h1, scaled-down h2/h3, larger tap targets.
   ≥768px: subtle clamp() scaling on h2/h3 only. */

/* Touch-friendly tap targets (WCAG 2.5.5: 44x44 minimum) */
.btn, button.btn, input[type="submit"], a.gata-cta {
  min-height: 44px;
  padding: 0.6rem 1.1rem;
}

a, p, li { overflow-wrap: break-word; word-wrap: break-word; }
img, video, iframe { max-width: 100%; height: auto; }

@media (max-width: 767.98px) {
  body { font-size: 1rem; line-height: 1.65; }
  .navbar-brand { font-size: 1.1rem; }
  /* h1 baseline stays 1.5rem on desktop (matches h2 by design), tighten on mobile */
  .entry-header h1,
  .page-header h1 {
    font-size: 1.35rem;
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }
  h2 { font-size: 1.35rem; line-height: 1.25; }
  h3 { font-size: 1.15rem; }
  .container, .site-content, .entry-content { overflow-wrap: break-word; }
}

@media (min-width: 768px) {
  h2 { font-size: clamp(1.35rem, 0.8vw + 1.05rem, 1.75rem); line-height: 1.25; }
  h3 { font-size: clamp(1.15rem, 0.5vw + 1rem, 1.4rem); line-height: 1.3; }
}