/* Global Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  /* Let the page grow naturally with its content and ensure the gradient
     covers at least the viewport height. Using min-height allows the
     gradient to extend beyond the initial viewport as the page grows. */
  min-height: 100vh;
  /* Use Roboto as the base font for all body text by default */
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #ffffff;
  /* Apply a full‑page gradient from black at the top to green at the bottom */
  background: linear-gradient(180deg, #000000 0%, #169b62 100%);
  line-height: 1.6;
}

a {
  color: #ff883e;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #fbbf77;
}

/* Utility classes */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
}

.btn {
  display: inline-block;
  background: #169b62;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid #169b62;
  transition: background 0.3s ease, color 0.3s ease;
}

.btn:hover {
  background: transparent;
  color: #169b62;
}

/* Navigation */
nav {
  width: 100%;
  /* Transparent header to allow site gradient to show through */
  background: transparent;
  /* The header should scroll away with the page on small sites, so avoid sticking it to the top.
     Use `position: relative` instead of `sticky` so that absolutely positioned dropdown menus
     are still anchored correctly without keeping the header on screen at all times. */
  position: relative;
  z-index: 1000;
}

nav .nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

nav .logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

nav .logo img {
  /* Make the flag logo even smaller for a more professional header look */
  height: 28px;
  width: auto;
}

/* Site name next to the flag in the header */
nav .logo .site-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: #ffffff;
  /* Slightly reduce the site name size to complement the smaller flag */
  font-size: 1.1rem;
  letter-spacing: 1px;
}

nav ul {
  list-style: none;
  display: flex;
  /* Remove default gap so separators can control spacing evenly */
  gap: 0;
}

nav ul li a {
  /* Use Poppins for the navigation links and ensure they are clear white */
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: #ffffff;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  /* Add horizontal padding for symmetrical spacing */
  padding: 0 0.75rem;
}

/* Add a vertical bar separator between navigation items except the first */
nav ul li + li::before {
  content: "|";
  color: #ffffff;
  /* Use padding to create equal spacing on either side of the divider */
  padding: 0 0.75rem;
}

/* Hero Section */
.hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Remove local background so the site gradient shows through */
  background: transparent;
  text-align: center;
  padding: 4rem 0;
}

.hero .hero-content {
  /* Allow the hero content to span the full available width so long headings fit on one line */
  width: 100%;
  max-width: none;
  padding-left: 5%;
  padding-right: 5%;
}

.hero .logo-large {
  margin-bottom: 2rem;
}

.hero h1 {
  /* Use a moderately large heading size as in other pages */
  font-size: 2rem;
  margin-bottom: 1.5rem;
  /* Use Poppins for all main headings with semi‑bold weight */
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.hero p {
  /* Match paragraph styling to those on other pages */
  font-size: 1rem;
  margin-bottom: 2rem;
  line-height: 1.8;
  /* Paragraphs use Roboto for readability */
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

/* About Page */
.section {
  padding: 4rem 0;
  /* Let the main page gradient show through behind sections */
  background: transparent;
}

.section.dark {
  /* Dark sections inherit the page gradient instead of applying their own colour */
  background: transparent;
}

.section h2 {
  /* Section headings remain modest to match original design */
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  /* Section headings use Poppins semi‑bold */
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.card {
  background: #043b2c;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card i {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #ff883e;
}

/* Custom icons for cards: ensure consistent sizing and white fill */
.cards .card svg {
  /* Match the original icon size and spacing */
  width: 2rem;
  height: 2rem;
  margin-bottom: 1rem;
  /* Prevent inline SVGs from stretching */
  display: inline-block;
  /* Force white fill on the icon paths for clarity on the dark cards */
  fill: #ffffff;
}

.card h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: #ffffff;
  /* Card headings use Poppins semi‑bold */
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.card p {
  font-size: 0.95rem;
  color: #dddddd;
  /* Card paragraphs use Roboto */
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

/* Tabs Section */
.tabs {
  max-width: 800px;
  margin: 2rem auto;
}

.tab-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2rem;
}

.tab-buttons button {
  background: transparent;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
  /* Tab buttons use Poppins semi‑bold and white colour */
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #ffffff;
}

.tab-buttons button.active {
  color: #ff883e;
  border-color: #ff883e;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  font-size: 1rem;
  color: #dddddd;
  line-height: 1.8;
  /* Tab content paragraphs use Roboto */
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

/* Center the descriptions within the Why Choose tabs on the About page.  The text within
   each tab should be easy to read and aligned consistently with the overall
   design.  Limiting the scope of this rule to the specific section ensures
   that other tabbed content elsewhere on the site (should it be added) is not
   inadvertently affected. */
#why-choose .tab-content p {
  text-align: center;
}

/* Contact Form */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  background: #043b2c;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: #ffffff;
  /* Labels use Poppins for consistency with headings */
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  background: #032418;
  color: #ffffff;
  /* Inputs inherit the paragraph font for readability */
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form .checkbox-group {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.contact-form .checkbox-group input[type="checkbox"] {
  margin-right: 0.5rem;
  margin-top: 0.3rem;
}

.contact-form .message {
  margin-bottom: 1rem;
  height: 1rem;
  font-size: 0.9rem;
}

.contact-form button {
  width: 100%;
  border: none;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
  background: #169b62;
  color: #ffffff;
  transition: background 0.3s ease;
  /* Buttons use Poppins normal weight */
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

.contact-form button:disabled {
  background: #025d3e;
  cursor: not-allowed;
}

.contact-form button:not(:disabled):hover {
  background: #137c4e;
}

/* Footer */
footer {
  text-align: center;
  padding: 2rem 0;
  /* Transparent footer so the page gradient is visible behind it */
  background: transparent;
  /* Use Poppins for footer text and make it white */
  color: #ffffff;
  font-size: 0.85rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

/* Responsive Typography */
@media (min-width: 768px) {
  .hero h1 {
    /* Maintain the same heading size on larger screens */
    font-size: 2rem;
  }
  .hero p {
    /* Keep consistent paragraph size on larger screens */
    font-size: 1rem;
  }

  /* Do not scale section headings; they keep a consistent size */
  .section h2 {
    font-size: 2rem;
  }
}

/* Desktop layout: display three cards per row on larger screens */
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Logotype on internal pages */
.page-logotype {
  display: block;
  margin: 0 auto 1rem;
  height: auto;
  width: auto;
}

/* Horizontal divider under logotypes on pages */
.section-divider {
  width: 80%;
  margin: 0 auto 1.5rem;
  height: 1px;
  border: none;
  background: rgba(255, 255, 255, 0.3);
}

/* Small‑screen responsiveness */
@media (max-width: 600px) {
  /* Allow navigation links to wrap and centre them on narrow viewports */
  nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  /* Hide vertical separators on narrow viewports to reduce clutter */
  nav ul li + li::before {
    display: none;
  }
  /* Reduce padding and font size for navigation links on mobile */
  nav ul li a {
    padding: 0 0.5rem;
    font-size: 0.9rem;
  }
  /* Scale down hero headings and paragraphs for better fit. The hero heading is
     reduced to roughly half its desktop size to avoid dominating the
     viewport on very small screens. */
  .hero h1 {
    font-size: 1rem !important;
  }
  .hero p {
    font-size: 0.9rem;
  }
  /* Reduce section heading size on mobile to half the desktop size */
  .section h2 {
    font-size: 1rem !important;
  }
  /* Stack cards vertically on mobile */
  .cards {
    grid-template-columns: 1fr;
  }
  /* Reduce internal padding on cards for mobile */
  .card {
    padding: 1.5rem;
  }

  /* Ensure the hero paragraph on the home page remains narrow and centred on very small
     viewports. By constraining the measure (width) of the paragraph we recreate the
     compact, poem‑like styling shown in the provided Word document. The max‑width
     is tuned to roughly 32 characters which yields 10–12 short lines on a typical
     phone screen. Combined with automatic line wrapping and the existing text
     alignment from the hero section, this produces a visually balanced block of
     text on mobile without manually inserting line breaks. */
  body.page-home .hero p {
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* Reduce excessive gaps between sections on internal pages */
/* For the About page: tighten spacing between intro and potential uses */
.page-about .section:first-of-type {
  /* Reduce bottom padding to tighten the gap after the intro section */
  padding-bottom: 1rem;
}
.page-about #potential-uses {
  /* Reduce top padding to bring the cards closer to the intro section */
  padding-top: 1rem;
}

/* For the Contact page: tighten spacing between intro and contact form */
.page-contact .section:first-of-type {
  /* Reduce bottom padding of the intro section */
  padding-bottom: 1rem;
}
.page-contact #contact-form-section {
  /* Reduce top padding of the contact form section */
  padding-top: 1rem;
}

/* ===== Enhancements: 2025-09-01 ===== */

/* 1) Header brand: make Irish flag SVG same height as the 'Presidency.ie' word */
.nav-wrapper .logo {
  display: inline-flex;
  align-items: baseline; /* Keep text baseline nice and tidy */
  gap: 0.5rem;
}
.nav-wrapper .logo img,
.nav-wrapper .logo svg {
  height: 1em; /* Match the current font-size of the brand text */
  width: auto;
  display: block;
  vertical-align: middle;
}

/* 2) Navigation hover underline animation in Irish flag orange */
nav ul li a {
  position: relative;
  text-decoration: none; /* ensure no default underline */
}
nav ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: #FF883E; /* Irish flag orange */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease-in-out;
}
nav ul li a:hover::after,
nav ul li a:focus-visible::after {
  transform: scaleX(1);
}

/* 3) Selected (active) menu item style */
nav ul li a.active {
  color: #FF883E;
  font-weight: 600;
}
nav ul li a.active::after {
  transform: scaleX(1);
}

/* 4) Consistent logotype size & divider spacing across pages */
.page-logotype,
.logo-large img {
  height: 100px !important; /* match About/Contact */
  margin-bottom: 1rem;
  width: auto;
  max-width: 100%;
}
/* Ensure section divider consistency (if not already) */
.section-divider {
  border: none;
  height: 1px;
  background: rgba(0,0,0,0.15);
  margin: 0.5rem 0 1.25rem 0;
}
/* ===== End Enhancements ===== */


/* Page-aware active nav highlight */
body.page-home nav ul li a[href="/"],
body.page-about nav ul li a[href="/about/"],
body.page-contact nav ul li a[href="/contact/"] {
  color: #FF883E;
  font-weight: 600;
}
body.page-home nav ul li a[href="/"]::after,
body.page-about nav ul li a[href="/about/"]::after,
body.page-contact nav ul li a[href="/contact/"]::after {
  transform: scaleX(1);
}


/* ===== Menu color rules update: 2025-09-01 ===== */
/* Base menu link color = white */
nav ul li a {
  color: #FFFFFF !important;
  text-decoration: none;
}
/* Hover: animated underline only; keep text white */
nav ul li a:hover,
nav ul li a:focus-visible {
  color: #FFFFFF !important;
}
/* Hover underline */
nav ul li a::after {
  background: #FF883E !important;
}
/* Active (current page): bold orange without underline */
nav ul li a.active,
body.page-home nav ul li a[href="/"],
body.page-about nav ul li a[href="/about/"],
body.page-contact nav ul li a[href="/contact/"] {
  color: #FF883E !important;
  font-weight: 700;
}
/* Remove underline for active */
nav ul li a.active::after,
body.page-home nav ul li a[href="/"]::after,
body.page-about nav ul li a[href="/about/"]::after,
body.page-contact nav ul li a[href="/contact/"]::after {
  transform: scaleX(0) !important;
}
/* Ensure underline shows only on hover for non-active */
nav ul li a:not(.active):hover::after,
body.page-home nav ul li a[href="/"]:not(.active):hover::after,
body.page-about nav ul li a[href="/about/"]:not(.active):hover::after,
body.page-contact nav ul li a[href="/contact/"]:not(.active):hover::after {
  transform: scaleX(1) !important;
}
/* Ensure brand text remains white, except active menu entries */
.nav-wrapper .brand-text {
  color: #FFFFFF;
}
/* Logotype & divider spacing consistency */
.page-logotype {
  height: 100px !important;
  margin-bottom: 1rem;
}
.section-divider {
  border: none;
  height: 1px;
  background: rgba(255,255,255,0.35); /* subtle on dark bg; adjust if needed */
  margin: 0.5rem 0 1.25rem 0;
}
/* Home hero heading spacing to match other pages (logotype + divider above) */
.hero .logo-large + .section-divider + h1,
.hero .page-logotype + .section-divider + h1 {
  margin-top: 0.75rem; /* tighten like other pages */
}
/* Button behavior on home page CTA */
.hero .btn-outline {
  background: transparent;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 999px; /* round */
  transition: background 180ms ease, color 180ms ease;
}
.hero .btn-outline:hover,
.hero .btn-outline:focus-visible {
  background: #FFFFFF;
  color: #000000;
}


/* Ensure current-page item NEVER shows underline, even on hover */
body.page-home nav ul li a[href="/"]:hover::after,
body.page-about nav ul li a[href="/about/"]:hover::after,
body.page-contact nav ul li a[href="/contact/"]:hover::after {
  transform: scaleX(0) !important;
}


/* ===== Divider consistency update: 2025-09-01 ===== */
:root {
  /* Tweak this number to change the long divider length; kept consistent across pages */
  --logotype-divider-width: 960px;
  --logotype-gap-below-img: 0.75rem;   /* distance between logotype and divider */
  --logotype-gap-below-hr: 1.25rem;    /* distance between divider and following heading/text */
}
/* Ensure the logotype uses the same spacing everywhere */
.page-logotype {
  height: 100px !important;
  display: block;
  margin-bottom: var(--logotype-gap-below-img) !important;
  width: auto;
  max-width: 100%;
}
/* Uniform, centered divider under logotype on all pages */
.section-divider {
  display: block;
  height: 1px;
  border: none;
  background: rgba(255, 255, 255, 0.35);
  /* Same visual length across pages at a given viewport; centered left/right */
  width: clamp(320px, 90vw, var(--logotype-divider-width));
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: var(--logotype-gap-below-hr);
}
/* Prevent container styles from overriding divider width */
.section .container .section-divider {
  width: clamp(320px, 90vw, var(--logotype-divider-width)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ===== Hero inline links: no underline, white text ===== */
.hero a {
  text-decoration: none;
  color: #FFFFFF;
}
.hero a:hover,
.hero a:focus-visible {
  text-decoration: none;
}
/* Reduce extra space under hero logotype container */
.hero .logo-large { margin-bottom: 0 !important; }


/* === Thin menu underline (user request) === */
nav ul li a::after { height: 1px !important; }


/* === Centered about intro (exact section only) === */
.about-intro { 
  text-align: center; 
  margin-left: auto; 
  margin-right: auto; 
  max-width: 68ch;
}
.about-intro a { text-decoration: none; color: inherit; }
.about-intro a:hover, .about-intro a:focus-visible { text-decoration: none; }


/* ===== Header & Footer rhythm update (restored) ===== */
nav .container { padding-top: 0; padding-bottom: 0; }
nav .nav-wrapper { padding: 0.75rem 0; }
@media (max-width: 768px){
  nav .nav-wrapper { padding: 0.5rem 0; }
}

/* Sticky-to-bottom footer pattern (no background changes) */

body { display: flex; flex-direction: column; }
main { flex: 1; }

/* Footer padding */
footer { padding: 1.75rem 0; }
@media (max-width: 768px){
  footer { padding: 1.25rem 0; }
}


/* Centered About intro (two-paragraph reference) */
.about-intro {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 68ch;
}
.about-intro + .about-intro { margin-top: 1rem; }
.about-intro a { text-decoration: none; color: inherit; }
.about-intro a:hover, .about-intro a:focus-visible { text-decoration: none; }

/* === About intro: enforce ~3-line measure on desktop (v2) === */
@media (min-width: 1200px){
  .about-intro { max-width: 68ch; }
  .about-intro.about-intro--p1 { max-width: 70ch; }
  .about-intro.about-intro--p2 { max-width: 66ch; }
}

/* === About intro: force three-line measure on desktop (exact widths) === */
@media (min-width: 1200px){
  .about-intro { 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
    width: auto;
    max-width: none;
  }
  .about-intro.about-intro--p1 {
    width: 106ch;      /* tuned for ~3 lines on desktop */
    max-width: 106ch;
  }
  .about-intro.about-intro--p2 {
    width: 98ch;       /* tuned for ~3 lines on desktop */
    max-width: 98ch;
  }
}


/* Desktop-only explicit line breaks in About intro paragraph */
br.desktop-break { display: none; }
@media (min-width: 1200px){
  br.desktop-break { display: inline; }
}


/* Tighten spacing before Potential Uses section only */
#potential-uses { padding-top: 1.25rem; }
@media (max-width: 768px){
  #potential-uses { padding-top: 1rem; }
}


/* Match H2→P1 gap: set divider offset from the second about paragraph */
.about-intro.about-intro--p2 + .section-divider {
  margin-top: 2rem;  /* same as h2 { margin-bottom: 2rem } */
}


/* === About page section rhythm === */
/* Bring sections closer after previous divider */
#why-choose { padding-top: 1.25rem; }
#about-cta { padding-top: 0.25rem !important; }
/* Sections explicitly closed with an end divider have tighter bottom padding */
.section.section-closed { padding-bottom: 2rem; }
/* Place the end-divider near content and avoid extra gap below it */
.section .section-end { margin-top: 2rem; margin-bottom: 0; }

/* === Final .btn-outline override (About CTA) === */
.btn-outline {
  background: transparent;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 999px;
  padding: 0.625rem 1.25rem;
  display: inline-block;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: #FFFFFF;
  color: #000000;
  text-decoration: none;
}
#about-cta .container { padding-top: 0.25rem !important; }


/* Contact intro styling */
.contact-intro a { text-decoration: none; color: #FFFFFF; }
.contact-intro a:hover, .contact-intro a:focus-visible { text-decoration: none; }

/* Desktop-only <br> visibility */
br.desktop-break { display: none; }
@media (min-width: 1200px){
  br.desktop-break { display: inline; }
}

/* Bring contact form closer to divider */
#contact-form-section { padding-top: 0.5rem !important; }
#contact-form-section .container { padding-top: 0.5rem !important; }


/* === Contact form visual refresh === */
.contact-form { background: transparent !important; padding: 2rem; border-radius: 8px; }

.contact-form input,
.contact-form textarea {
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.2);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(0,0,0,0.6);
}

/* Label star for required fields */
.contact-form label .req { margin-left: 0.25rem; color: #FFFFFF; font-weight: 700; }

/* Paragraph-to-divider gap same as About (2rem) */
.contact-intro + .section-divider { margin-top: 2rem !important; }

/* Bring form closer to divider */
#contact-form-section { padding-top: 0rem !important; }
#contact-form-section .container { padding-top: 0rem !important; }

/* Make the Send button use the outline style even when disabled */
.contact-form .btn-outline:disabled {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  opacity: 0.6;
  cursor: not-allowed;
}


/* === Contact form: remove outer wrapper border/shadow === */
#contact-form-section .container { box-shadow: none !important; border: none !important; background: transparent !important; }
.contact-form { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; }
.contact-form::before, .contact-form::after { content: none !important; display: none !important; }


/* === Contact form: bring closer to divider === */
#contact-form-section { padding-top: 0rem !important; margin-top: 0 !important; }
#contact-form-section .container { padding-top: 0rem !important; margin-top: 0 !important; }
#contact-form-section h2 { margin-top: 0 !important; }
/* Kill any stray top margin on the form itself */
#contact-form-section form { margin-top: 0.25rem !important; }


/* === Contact: bring form even closer to divider === */
.contact-intro + .section-divider { margin-bottom: 0.5rem !important; }
#contact-form-section { padding-top: 0 !important; margin-top: 0 !important; }
#contact-form-section .container { padding-top: 0 !important; margin-top: 0 !important; }
#contact-form-section form { margin-top: 0 !important; }

/* Acceptance block styling */
.contact-form .acceptance { margin-top: 0.75rem; }
.contact-form .consent { display: flex; align-items: flex-start; gap: 0.5rem; }
.contact-form .consent input[type="checkbox"] { margin-top: 0.25rem; }
.contact-form .consent-text { color: #FFFFFF; line-height: 1.4; }

/* Enforce exact outline button styling in contact form */
.contact-form .btn-outline {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 999px !important;
  padding: 0.625rem 1.25rem !important;
  display: inline-block;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}
.contact-form .btn-outline:hover,
.contact-form .btn-outline:focus-visible {
  background: #FFFFFF !important;
  color: #000000 !important;
  text-decoration: none;
}


/* === Contact: Acceptance block per reference === */
.contact-form .acceptance { 
  margin-top: 0.5rem !important;
  margin-bottom: 0.75rem !important;
}
.contact-form .acceptance > label {
  display: block;
  margin: 0 0 0.25rem 0 !important;   /* label on its own line */
  line-height: 1.2;
  color: #FFFFFF;
}
.contact-form .acceptance .req-dot {
  display: inline-block;
  margin-left: 0.25rem;
  color: #FF3B3B;                     /* red dot as in reference */
  font-weight: 700;
  transform: translateY(-0.05em);
}
.contact-form .consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;                        /* small space between checkbox and text */
  margin: 0 !important;
}
.contact-form .consent input[type="checkbox"] {
  margin: 0.2rem 0 0 0 !important;    /* align with first line of text */
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}
.contact-form .consent-text {
  margin: 0 !important;
  color: #FFFFFF;
  line-height: 1.45;                  /* comfortable multi-line wrapping */
}


/* === Contact form: equalize vertical gaps === */
.contact-form .form-group { margin-bottom: 1rem !important; }
.contact-form .acceptance { margin-bottom: 1rem !important; }
.contact-form .consent { margin-bottom: 0 !important; }
.contact-form button[type="submit"],
.contact-form input[type="submit"] { margin-top: 1rem !important; }

/* ======================================================================
   Gap refinement (2025‑09‑06)

   The default section styles add generous padding above and below content,
   and earlier tweaks left the contact form and potential uses cards sitting
   noticeably far from the divider above them. To tighten these
   transitions while leaving the dividers themselves in place, reduce the
   bottom padding on the first section and the top padding on the
   subsequent section. The adjustments below apply consistently to both
   the About and Contact pages. The margin beneath the divider after the
   intro is also trimmed slightly. These overrides use !important to
   supersede earlier rules without relocating the divider.
*/

/* About page: close the gap between the intro and the Potential Uses section */
.page-about .section:first-of-type {
  padding-bottom: 0.5rem !important;
}
.page-about #potential-uses {
  padding-top: 0.5rem !important;
}

/* Contact page: close the gap between the intro and the contact form */
.page-contact .section:first-of-type {
  padding-bottom: 0.5rem !important;
}
#contact-form-section {
  padding-top: 0.5rem !important;
  margin-top: 0 !important;
}
#contact-form-section .container {
  padding-top: 0.5rem !important;
  margin-top: 0 !important;
}

/* Trim the space under the divider following the intro on all pages */
.contact-intro + .section-divider {
  margin-bottom: 0.25rem !important;
}

/* ======================================================================
   Gap refinement v2 (2025‑09‑06)

   Following further feedback that the contact form and the Potential Uses
   section still felt too far from their respective dividers, this second
   refinement reduces spacing even more.  We set the top padding on the
   follow‑on sections to zero and trim the bottom padding on the preceding
   sections to 0.25 rem.  The margin below the divider after the intro is
   eliminated entirely so the content flows directly beneath it.  These
   overrides employ !important and appear at the end of the stylesheet to
   ensure they trump earlier rules.
*/

/* About page: bring Potential Uses even closer */
.page-about .section:first-of-type {
  padding-bottom: 0.25rem !important;
}
.page-about #potential-uses {
  padding-top: 0 !important;
}

/* Remove container padding above the Potential Uses content on the About page.
   The default .container adds 2rem of vertical padding; eliminating the top
   padding here brings the section’s heading and cards much closer to the
   preceding divider. */
.page-about #potential-uses .container {
  padding-top: 0 !important;
}

/* Reduce the margin below the final divider in the About intro to further
   tighten the transition into the Potential Uses section. */
.page-about .about-intro.about-intro--p2 + .section-divider {
  margin-bottom: 0.5rem !important;
}

/* Remove default top margin on the Potential Uses heading to avoid adding
   extra space before the cards.  Also slightly reduce its bottom margin to
   tighten the section visually. */
.page-about #potential-uses h2 {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
}

/* Contact page: bring contact form even closer */
.page-contact .section:first-of-type {
  padding-bottom: 0.25rem !important;
}
#contact-form-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
#contact-form-section .container {
  padding-top: 0 !important;
  /* Use a negative top margin to overlap the container slightly with the
     divider above, eliminating residual whitespace. */
  margin-top: -1rem !important;
}

/* === Responsive hamburger menu === */
/* The hamburger icon is hidden on desktop and shown on mobile. The icon is
   structured as three evenly spaced lines within a fixed-size container so
   that when it transforms into an "X" the entire shape remains visible. */
nav .hamburger {
  display: none;
  cursor: pointer;
  /* Fixed width and height ensure the transforming bars do not get
     clipped when rotated into an "X". */
  width: 24px;
  height: 18px;
  border: none;
  background: none;
  padding: 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
nav .hamburger .bar {
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
@media (max-width: 768px) {
  /* Convert the desktop horizontal navigation into a mobile dropdown overlay. Using
     absolute positioning ensures that toggling the menu does not push the logo or
     disrupt the header layout. The menu appears beneath the header and spans
     the full viewport width. */
  nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    margin: 0;
    /* Provide a semi‑opaque background so links remain legible over page content */
    background: rgba(0, 0, 0, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 999;
  }
  /* When toggled, display the dropdown list */
  nav ul.open {
    display: flex;
  }
  /* Display the hamburger icon on small screens */
  nav .hamburger {
    display: flex;
  }
}
/* Transform the hamburger into an X when active */
nav .hamburger.active .bar:nth-child(2) {
  opacity: 0;
}
nav .hamburger.active .bar:nth-child(1) {
  /* Move the first bar down and rotate to form the top-left to bottom-right part of the X */
  transform: translateY(7px) rotate(45deg);
}
nav .hamburger.active .bar:nth-child(3) {
  /* Move the third bar up and rotate to form the bottom-left to top-right part of the X */
  transform: translateY(-7px) rotate(-45deg);
}

/* Remove any extra margin under the divider following the intro */
.contact-intro + .section-divider {
  margin-bottom: 0 !important;
}

/* Further tighten the contact form spacing by reducing its internal top padding.
   The contact form originally has 2rem of padding on all sides; by
   halving the top padding we bring the first label closer to the divider
   without affecting the overall visual balance of the form. */
.page-contact .contact-form {
  /* Set the top padding to zero so the first label sits flush to the
     container’s top edge, minimizing the gap from the divider. */
  padding-top: 0 !important;

  /* Pull the form upward slightly to negate any residual space left by
     surrounding containers or default margins.  A negative margin-top
     effectively overlaps the top edge of the form with the preceding
     divider, ensuring the gap is minimal on the contact page. */
  /* Pull the form further upward to virtually eliminate the gap. */
  margin-top: -1rem !important;
}

/* ======================================================================
   Mobile spacing adjustments (2025‑09‑06)

   On small screens the default section and hero padding introduces
   excessive space above the content, making the page feel awkwardly
   empty. Reduce the vertical padding on mobile so that text and images
   start closer to the header. These overrides are placed near the end
   of the stylesheet to ensure they take precedence over earlier rules. */
@media (max-width: 768px) {
  /* Hide the site name next to the Irish flag on narrow screens so only the flag is visible */
  nav .logo .site-name {
    display: none !important;
  }
  /* Lighten the padding on mobile further: bring content much closer to the header
     while still retaining a tiny bit of breathing room. */
  .container {
    padding-top: 0.25rem !important;
    padding-bottom: 1rem !important;
  }
  /* Reduce section padding even more so sections begin almost immediately below the header */
  .section {
    padding-top: 0.25rem !important;
    padding-bottom: 1rem !important;
  }
  /* Adjust the hero: remove almost all top padding so it hugs the header but keep bottom
     padding slightly larger to separate it from subsequent content. */
  .hero {
    padding-top: 0.25rem !important;
    padding-bottom: 1.25rem !important;
    min-height: 55vh !important;
  }
  /* Scale down hero and section headings on medium-size mobile devices */
  .hero h1 {
    font-size: 1.25rem !important;
  }
  .section h2 {
    font-size: 1.25rem !important;
  }
}

/* ======================================================================
   Divider responsiveness (2025‑09‑07)

   The dividers should remain as originally designed on larger viewports.
   On mobile viewports, however, they need to scale down with the
   available width. The rules below override the divider widths only on
   narrow screens while keeping the original styling on desktop. */

@media (max-width: 768px) {
  .section-divider {
    /* Use a width based on percentage so the divider scales with the viewport and remains centred */
    width: 95% !important;
    max-width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 600px) {
  .section-divider {
    /* On very small screens, reduce the width slightly more */
    width: 90% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ======================================================================
   Mobile content flush to header (2025‑09‑07)

   With the header now offset from the top of the viewport, the user
   requested that content on mobile devices begin immediately below the
   header without any extra vertical gap.  The rules below remove
   residual top padding from containers, sections and the hero area on
   screens up to 768px wide.  Additionally, the bottom padding of
   the navigation wrapper is eliminated on mobile to ensure that the
   first content element (often the hero) touches the header.
*/
@media (max-width: 768px) {
  /* Remove bottom padding from the navigation wrapper */
  nav .nav-wrapper {
    padding-bottom: 0 !important;
  }
  /* Eliminate top padding on containers so content begins at the header */
  .container {
    padding-top: 0 !important;
  }
  /* Eliminate top padding on sections for the same reason */
  .section {
    padding-top: 0 !important;
  }
  /* Remove top padding on the hero so the hero text sits flush under the header */
  .hero {
    padding-top: 0 !important;
  }

  /* Expand the contact form wrapper on mobile so that the form can occupy
     nearly the full viewport width.  By default, `.container` elements
     are constrained to 85% of the viewport width, which causes the
     contact form to remain narrow even when its own width is set as a
     percentage.  Overriding the width here ensures the container spans
     the full width of the screen on mobile devices.  Padding is
     removed so the form aligns with the viewport edges, and the form
     itself is centred with its own width. */
  .page-contact #contact-form-section .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ======================================================================
   Contact form responsiveness (2025‑09‑07)

   On smaller screens, the contact form should not maintain a fixed
   width but instead scale relative to the viewport.  These rules set
   the form’s width to a percentage of the screen and centre it by
   automatically adjusting the left and right margins.  A slightly
   smaller width is used on very small screens to maintain a margin on
   either side.  These overrides come after the default contact form
   definition so they take precedence.
*/
@media (max-width: 768px) {
  .contact-form {
    width: 95% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 600px) {
  .contact-form {
    /* Maintain the same responsive width on very small screens rather than reducing it further. */
    width: 95% !important;
  }
}

/* ======================================================================
   Desktop hero vertical centering (2025‑09‑07)

   On larger screens, the home page’s hero section should appear
   vertically centred between the navigation and footer.  Because the
   body uses flexbox to push the footer to the bottom, we can turn the
   `main` element on the home page into a flex container and allow the
   hero to flex to fill the available height.  This, combined with the
   existing flex styles on `.hero`, centres the hero content within the
   viewport.  We remove the fixed `min-height` on the hero to let it
   stretch naturally.  Apply this only on desktop widths (1024px and
   above) to avoid interfering with tablet layouts.
*/
@media (min-width: 1024px) {
  body.page-home main {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .page-home .hero {
    flex: 1;
    min-height: auto !important;
  }
}

/* ======================================================================
   Header top margin adjustment (2025‑09‑07)

   The site is intentionally compact, but the header (navigation bar) was
   positioned flush against the very top of the browser window. To mirror
   the visual balance provided by the footer’s bottom padding, the header
   should be offset from the top of the viewport by the same amount.  On
   desktop and larger tablet screens, this offset matches the footer’s
   1.75rem vertical padding.  On mobile screens (≤768px), the offset
   matches the footer’s 1.25rem padding.  These rules are placed at the
   end of the stylesheet so they override any earlier margin settings.
*/
nav {
  margin-top: 1.75rem;
}
@media (max-width: 768px) {
  nav {
    margin-top: 1.25rem;
  }
}