/* ==== Project Pietas – Brand Toolkit ==== */

/* ---------- Colors ---------- */
:root {
  --navy:   #003366;
  --burgundy: #7C0A02;
  --gold:   #B8860B;
  --taupe:  #E2D7C5;
  --light-gray: #F5F5F5;
  --white:  #FFFFFF;
}

/* ---------- CSS Reset & Box Sizing ---------- */
html {
  box-sizing: border-box;
  overflow-x: hidden;
  width: 100vw;
}
*, *::before, *::after {
  box-sizing: inherit;
}

/* ---------- Typography ---------- */
body {
  font-family: 'Open Sans', Arial, sans-serif;
  line-height: 1.7;
  color: var(--navy);
  background-color: var(--white);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Prevent content from hiding under fixed nav */
body {
  padding-top: 90px; /* Adjust to match nav height on desktop */
}
@media (max-width: 700px) {
  body {
    padding-top: 70px; /* Adjust to match nav height on mobile */
  }
}

h1, h2, h3 {
  font-family: 'Libre Baskerville', Georgia, serif;
  color: var(--navy);
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 1.7rem;
}

h3 {
  font-size: 1.2rem;
}

p, ul, ol {
  margin-bottom: 1.2rem;
}

em {
  font-style: italic;
}

/* Blog list */
.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.post-item {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--light-gray);
}
.post-title {
  margin: 0 0 0.3rem 0;
  font-size: 1.6rem;
}
.post-title a {
  color: var(--navy);
}
.post-title a:hover,
.post-title a:focus {
  color: var(--gold);
}
.post-meta {
  font-size: 0.9rem;
  color: var(--burgundy);
  margin-bottom: 0.6rem;
}
.post-excerpt {
  margin-bottom: 0.8rem;
}
.read-more {
  display: inline-block;
  font-size: 0.9rem;
  padding: 0.4rem 0.9rem;
}

.author {
  font-size: 0.95rem;
  color: var(--burgundy);
  margin-top: -0.4rem;   /* pulls it a bit closer to the title */
}

.author-link {
  color: var(--burgundy);
  text-decoration: none;
}
.author-link:hover,
.author-link:focus {
  color: var(--gold);
  text-decoration: underline;
}

/* -------------------------------------------------
   Author avatar – appears next to the “By …” line
   ------------------------------------------------- */
.author-avatar {
  width: 40px;               /* size of the circle */
  height: 40px;
  border-radius: 50%;        /* makes it round */
  object-fit: cover;         /* crop to fit the circle */
  margin-left: 0.6rem;       /* space between name and image */
  vertical-align: middle;    /* aligns with the baseline of the text */
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* ---------- Links & Buttons ---------- */
a {
  color: var(--burgundy);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover, a:focus {
  color: var(--gold);
  text-decoration: underline;
  outline: none;
}

.btn {
  display: inline-block;
  background: var(--burgundy);
  color: var(--white);
  padding: 0.7rem 1.5rem;
  border-radius: 4px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 1rem;
  transition: background 0.2s, color 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.btn:hover, .btn:focus {
  background: var(--gold);
  color: var(--navy);
  outline: 2px solid var(--gold);
}

/* ---------- Layout Containers ---------- */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

.section-divider {
  border: none;
  border-top: 1px solid var(--taupe);
  margin: 2.5rem 0 2rem 0;
}

/* ---------- Skip Link (Accessibility) ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 1000;
  background: var(--gold);
  color: var(--navy);
  padding: 0.5rem 1rem;
  border-radius: 0 0 4px 4px;
  font-weight: bold;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  outline: 2px solid var(--navy);
}

/* ---------- Header & Navigation ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1000;
  background: var(--white);
  color: var(--navy);
  border-bottom: 2px solid var(--taupe);
  box-sizing: border-box;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

.logo {
  max-height: 70px;
  width: auto;
  display: block;
  margin-right: 2rem;
}

.main-nav {
  display: flex;
  align-items: center;
  position: relative;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0 20px;
  align-items: center;
  box-sizing: border-box;
  flex-wrap: wrap;
  max-width: 100vw;
  overflow-x: hidden;
  transition: none;
}

.nav-links a {
  color: var(--navy);
  font-weight: 600;
  font-size: 1rem;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-bottom 0.2s;
  outline: none;
  white-space: nowrap;
}

.nav-links a.active, .nav-links a:focus {
  border-bottom: 2px solid var(--gold);
  color: var(--gold);
}

/* --- Hamburger menu for mobile --- */
@media (max-width: 700px) {
  .header-inner {
    padding: 0 10px;
    max-width: 100vw;
  }
  .logo {
    max-height: 50px;
    margin-right: 1rem;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    z-index: 1050;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-bottom: 2px solid var(--taupe);
    padding: 0;
    max-width: 100vw;
    width: 100vw;
    overflow-x: hidden;
    transition: all 0.3s;
  }
  .nav-links.open {
    display: flex !important;
  }
  .nav-links li {
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 0;
  }
  .nav-links a {
    font-size: 1.1rem;
    padding: 12px 15px;
    width: 100%;
    text-align: left;
    color: var(--navy);
    box-sizing: border-box;
  }
}

/* ---------- Hero Section (Banner) ---------- */
.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: 
    linear-gradient(135deg, rgba(0,51,102,0.85) 0%, rgba(124,10,2,0.75) 50%, rgba(0,51,102,0.85) 100%),
    url('assets/hero.jpg') center/cover no-repeat;
  color: var(--white);
  overflow: hidden;
  animation: hero-fadein 1.2s cubic-bezier(.4,0,.2,1);
}

@keyframes hero-fadein {
  from { opacity: 0; transform: translateY(30px);}
  to   { opacity: 1; transform: none;}
}

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 700;
  margin-bottom: 0.7rem;
  color: var(--white);
  text-shadow: 0 4px 24px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.25);
  letter-spacing: 0.01em;
  padding: 0 1.5rem
}

.hero p {
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  margin-bottom: 1.7rem;
  color: var(--white);
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.hero .btn {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  padding: 0.8rem 2.2rem;
  font-weight: 700;
  background: var(--gold);
  color: var(--navy);
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.hero .btn:hover, .hero .btn:focus {
  background: var(--burgundy);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(124,10,2,0.18);
}

@media (max-width: 700px) {
  .hero {
    min-height: 40vh;
    padding: 2.5rem 0.5rem 2rem 0.5rem;
  }
  .hero h1 { font-size: 2rem; }
  .hero p  { font-size: 1.1rem; }
}

/* ---------- Contact Hero Section ---------- */
.hero-contact {
  background: var(--taupe);
  color: var(--navy);
  min-height: 180px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  padding: 2.5rem 1rem 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-contact h1 {
  color: var(--navy);
  text-shadow: none;
}
.hero-contact p {
  color: var(--navy);
  text-shadow: none;
}

/* ---------- Section Styling ---------- */
section {
  margin-bottom: 2.5rem;
}

section.taupe-bg {
  background: var(--taupe);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  margin-bottom: 2.5rem;
}

ul {
  padding-left: 1.2rem;
}

ul li {
  margin-bottom: 0.7rem;
}

/* ---------- Table Styling ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: var(--white);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

th, td {
  border: 1px solid var(--light-gray);
  padding: 0.7rem;
  text-align: left;
}

th {
  background: var(--taupe);
  font-weight: 700;
}

tr:nth-child(even) {
  background: var(--light-gray);
}

/* ---------- Form Styling ---------- */
form {
  margin-top: 1.5rem;
  background: var(--taupe);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

form label {
  font-weight: 600;
  margin-bottom: 0.3rem;
  display: block;
  color: var(--navy);
}

form input, form textarea {
  width: 100%;
  padding: 0.6rem;
  margin-bottom: 1rem;
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
  color: var(--navy);
  transition: border 0.2s;
  box-sizing: border-box;
}

form input:focus, form textarea:focus {
  border: 1.5px solid var(--gold);
  outline: none;
}

form button {
  width: auto;
  margin-top: 0.5rem;
}

/* ---------- Footer ---------- */
footer {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 1.2rem 0;
  font-size: 1rem;
  margin-top: 2rem;
  letter-spacing: 0.01em;
  width: 100%;
  box-sizing: border-box;
}

/* ---------- Testimonials ---------- */
.testimonials {
  background: var(--light-gray);
  border-left: 4px solid var(--gold);
  padding: 1.2rem 1.5rem;
  margin: 2rem 0;
  border-radius: 6px;
  font-style: italic;
  color: var(--navy);
}

.testimonials strong {
  color: var(--burgundy);
  font-style: normal;
}

/* ---------- Responsive Design & Navigation Overflow Fixes ---------- */
@media (max-width: 900px) {
  .container, .header-inner {
    max-width: 98vw;
    padding: 1rem;
  }
  .hero, .hero-contact {
    padding: 2rem 0.5rem 2rem 0.5rem;
  }
}

@media (max-width: 500px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.1rem; }
  .container, .header-inner {
    padding: 0 4px;
    min-height: 60px;
    max-width: 100vw;
    box-sizing: border-box;
  }
  .hero, .hero-contact {
    min-height: 120px;
    padding: 1.2rem 0.2rem 1.2rem 0.2rem;
  }

  .nav-links {
    padding: 10px 0;
    max-width: 100vw;
    width: 100vw;
    box-sizing: border-box;
  }
}

/* Prevent horizontal scrolling on all elements */
body, .header-inner, .nav-links, .nav-toggle, .main-nav, .site-header {
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ---------- Focus Styles for Accessibility ---------- */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* -------------------------------------------------
   MOBILE NAVIGATION PATCH
   – Force the three tabs to stay visible on all
   – screen sizes, just like the desktop view.
   – Hide the hamburger button completely.
--------------------------------------------------- */

/* 1. Never hide the nav‑links */
@media (max-width: 700px) {
  .nav-links {
    display: flex !important;          /* keep the flex row */
    flex-direction: row !important;   /* horizontal layout */
    position: static !important;       /* remove the absolute positioning */
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  /* 2. Ensure the list items stay inline */
  .nav-links li {
    width: auto !important;
    border-bottom: none !important;
    padding: 0 !important;
  }

  /* 3. Keep the link styling identical to desktop */
  .nav-links a {
    padding: 0 1rem;               /* same spacing as desktop */
    font-size: 1rem;
    text-align: left;
  }

  /* 4. Hide the hamburger button entirely */
  .nav-toggle {
    display: none !important;
  }

  /* 5. Remove the extra body‑scroll lock that the JS adds
     (the script still runs, but the overflow rule won’t affect us) */
  body {
    overflow-x: hidden;   /* keep your original global rule */
    overflow-y: auto !important;
  }
}

/* -------------------------------------------------
   OPTIONAL: tighten up the header height on mobile
   (since we no longer need extra space for the toggle)
--------------------------------------------------- */
@media (max-width: 700px) {
  .site-header {
    height: auto;                 /* let the header shrink to its content */
  }
  .header-inner {
    padding: 0.5rem 1rem;         /* a little less vertical padding */
  }
}

/* -------------------------------------------------
   MOBILE BOTTOM NAVIGATION BAR
   Visible only on screens ≤ 700 px.
   Does NOT affect the desktop header navigation.
--------------------------------------------------- */

/* Hide the bar on desktop */
.bottom-nav {
  display: none;
}

/* Show on mobile */
@media (max-width: 700px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    inset-inline: 0;               /* left‑right 0 */
    bottom: 0;
    height: 56px;                  /* typical tap target height */
    background: var(--white);
    border-top: 2px solid var(--taupe);
    box-shadow: 0 -2px 8px rgba(0,0,0,.08);
    z-index: 1100;                 /* above page content */
    justify-content: space-around; /* evenly spaced icons/text */
    align-items: center;
  }

  .bottom-nav__list {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    justify-content: space-evenly;
  }

  .bottom-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.9rem;
    color: var(--navy);
    text-decoration: none;
    padding: 4px 0;
    transition: color .2s;
  }

  .bottom-nav__link:hover,
  .bottom-nav__link:focus,
  .bottom-nav__link[aria-current="page"] {
    color: var(--gold);
  }

  /* Optional: add simple icons (Unicode) – you can replace with SVGs later */
  .bottom-nav__link[data-icon]::before {
    content: attr(data-icon);
    font-size: 1.4rem;
    margin-bottom: 2px;
  }
}

/* -------------------------------------------------
   Keep the body from being covered by the fixed bar
   (adds bottom padding on mobile only)
--------------------------------------------------- */
@media (max-width: 700px) {
  body {
    padding-bottom: 72px; /* bar height + a little breathing room */
  }
}

/* -------------------------------------------------
   Accessibility focus outline (already in your file,
   but we reinforce it for the bottom links)
--------------------------------------------------- */
.bottom-nav__link:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* -------------------------------------------------
   1️⃣ LOGO + TITLE (visible on both breakpoints)
   ------------------------------------------------- */
.logo-wrapper {
  display: flex;
  align-items: center;
  text-decoration: none;            /* remove underline on the link */
}

/* Space between logo image and the text */
.logo-wrapper .site-title {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  margin-left: 0.6rem;
}

/* -------------------------------------------------
   2️⃣ HEADER POSITIONING
   ------------------------------------------------- */
/* Desktop: sticky header (fixed at top) */
@media (min-width: 701px) {
  .site-header {
    position: fixed;               /* stays at top while scrolling */
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 1000;
    background: var(--white);
    border-bottom: 2px solid var(--taupe);
  }

  /* Give the page body enough top padding so content isn’t hidden
     behind the fixed header (you already have this, but we keep it
     here for completeness). */
  body {
    padding-top: 90px;             /* matches desktop header height */
  }
}

/* Mobile: header scrolls with the page (no fixed positioning) */
@media (max-width: 700px) {
  .site-header {
    position: static;              /* removes the fixed behaviour */
    border-bottom: 2px solid var(--taupe);
  }

  body {
    padding-top: 0;                /* no extra space needed */
  }
}

/* -------------------------------------------------
   3️⃣ HIDE TOP NAVIGATION ON MOBILE
   ------------------------------------------------- */
@media (max-width: 700px) {
  .main-nav {
    display: none;                 /* completely remove the top nav */
  }

  /* Keep the logo area centred on mobile */
  .header-inner {
    justify-content: center;       /* centre the logo+title */
    padding: 0.5rem 1rem;
  }
}

/* -------------------------------------------------
   4️⃣ OPTIONAL: tighten up mobile header height
   (since the nav is gone we can shrink the bar)
   ------------------------------------------------- */
@media (max-width: 700px) {
  .site-header {
    padding: 0.5rem 0;
  }
}

/* -------------------------------------------------
   5️⃣ KEEP YOUR EXISTING ACCESSIBILITY FOCUS STYLE
   (re‑declare just in case the new selectors need it)
   ------------------------------------------------- */
.logo-wrapper:focus,
.logo-wrapper .site-title:focus,
.bottom-nav__link:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* -------------------------------------------------
   HERO – force full‑width on desktop
   ------------------------------------------------- */
.hero {
  width: 100%;
  max-width: none;               /* override any inherited max‑width */
  background-size: cover;        /* ensure the background image fills the area */
  background-position: center;
  background-repeat: no-repeat;
}

/* -------------------------------------------------
   Blog index – thumbnail styling
   ------------------------------------------------- */
.post-thumb img {
  width: 120px;               /* thumbnail width – adjust as you like */
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 1rem;
  float: left;
}

/* Clear the float after each post item */
.post-item::after {
  content: "";
  display: table;
  clear: both;
}

/* Reduce thumbnail size on mobile */
@media (max-width: 700px) {
  .post-thumb img {
    width: 80px;
  }
}

/* -------------------------------------------------
   Tag list styling (both index & post pages)
   ------------------------------------------------- */
.tag-list,
.tag-index {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-list li,
.tag-index li {
  background: var(--taupe);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
}

.tag-link {
  color: var(--navy);
  text-decoration: none;
  font-size: 0.85rem;
}
.tag-link:hover,
.tag-link:focus {
  color: var(--gold);
}

/* -------------------------------------------------
   Post image (full‑width on single post)
   ------------------------------------------------- */
.post-image img {
  width: 100%;
  max-height: 400px;          /* optional max height */
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

/* -------------------------------------------------
   Post tags block (below article)
   ------------------------------------------------- */
.post-tags {
  margin-top: 2rem;
  border-top: 1px solid var(--light-gray);
  padding-top: 0.8rem;
}

/* -------------------------------------------------
   Post – responsive featured image
   ------------------------------------------------- */
.post-image {
  margin-bottom: 1.5rem;          /* space below the image */
}

/* The image itself */
.responsive-img {
  width: 100%;                    /* never exceed the container width */
  height: auto;                   /* preserve aspect ratio */
  max-height: 500px;              /* optional ceiling for very tall images */
  object-fit: cover;              /* crop if it hits the max‑height */
  border-radius: 4px;
}

/* Mobile tweak – shrink the max‑height so it doesn’t dominate the screen */
@media (max-width: 700px) {
  .responsive-img {
    max-height: 260px;            /* roughly half the viewport height */
  }
}

.share-btn {
  background: var(--burgundy);
  color: var(--white);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  margin-top: 1rem;
}
.share-btn:hover,
.share-btn:focus {
  background: var(--gold);
  color: var(--navy);
}

/* -------------------------------------------------
   Subscribe section – shared between index & post pages
   ------------------------------------------------- */
.subscribe-section {
  margin: 2.5rem 0;
  padding: 1.5rem;
  background: var(--taupe);
  border-radius: 8px;
  text-align: center;
}
.subscribe-section h2 {
  margin-top: 0;
  color: var(--navy);
}
.subscribe-section p {
  margin-bottom: 1rem;
}

/* Visually hidden label – keeps accessibility while not showing text */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Input styling – matches the look of your contact form */
.subscribe-input {
  width: 100%;
  max-width: 320px;
  padding: 0.6rem;
  margin-bottom: 0.8rem;
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
  color: var(--navy);
  box-sizing: border-box;
}
.subscribe-input:focus {
  border-color: var(--gold);
  outline: none;
}

/* Center the button on narrow screens */
.subscribe-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}