/*
 * Global Stylesheet for Sev Seve public‑figure website
 *
 * This CSS defines a simple, mobile‑first design system using
 * flexbox and CSS Grid for layout. Colours and typography are
 * controlled via CSS custom properties defined on the :root
 * element. Responsive breakpoints adjust the navigation and
 * grid layouts to ensure the site looks good on phones,
 * tablets and desktop screens. Buttons, cards and form
 * elements reuse consistent styling for clarity and accessibility.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap');

/* Colour palette and typographic scale */
:root {
  --color-primary: #0d1b2a;      /* Deep navy for navigation and headings */
  --color-secondary: #1e7d5c;    /* Rich green for accents and links */
  --color-accent: #c99b32;       /* Warm gold/amber for highlights */
  --color-background: #f8f9fa;   /* Off‑white background */
  --color-surface: #ffffff;      /* Surface panels */
  --color-text-primary: #333333; /* Main text colour */
  --color-text-muted: #666666;   /* Muted text */
  --color-border: #e0e0e0;       /* Light border colour */

  /* Typography scale */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --h1-size: 2rem;
  --h2-size: 1.75rem;
  --h3-size: 1.5rem;
  --h4-size: 1.25rem;
  --body-size: 1rem;
  --small-size: 0.875rem;

  /* Social icon SVGs encoded as data URIs for use with mask-image */
  --icon-facebook: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTE2IDguMDQ5YzAtNC40NDYtMy41ODItOC4wNS04LTguMDVDMy41OCAwLS4wMDIgMy42MDMtLjAwMiA4LjA1YzAgNC4wMTcgMi45MjYgNy4zNDcgNi43NSA3Ljk1MXYtNS42MjVoLTIuMDNWOC4wNUg2Ljc1VjYuMjc1YzAtMi4wMTcgMS4xOTUtMy4xMzEgMy4wMjItMy4xMzEuODc2IDAgMS43OTEuMTU3IDEuNzkxLjE1N3YxLjk4aC0xLjAwOWMtLjk5MyAwLTEuMzAzLjYyMS0xLjMwMyAxLjI1OHYxLjUxaDIuMjE4bC0uMzU0IDIuMzI2SDkuMjVWMTZjMy44MjQtLjYwNCA2Ljc1LTMuOTM0IDYuNzUtNy45NTF6Ii8+PC9zdmc+');
  --icon-instagram: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMEM1LjgyOSAwIDUuNTU2LjAxIDQuNzAzLjA0OCAzLjg1LjA4OCAzLjI2OS4yMjIgMi43Ni40MmEzLjkgMy45IDAgMCAwLTEuNDE3LjkyM0EzLjkgMy45IDAgMCAwIC40MiAyLjc2Qy4yMjIgMy4yNjguMDg3IDMuODUuMDQ4IDQuNy4wMSA1LjU1NSAwIDUuODI3IDAgOC4wMDFjMCAyLjE3Mi4wMSAyLjQ0NC4wNDggMy4yOTcuMDQuODUyLjE3NCAxLjQzMy4zNzIgMS45NDIuMjA1LjUyNi40NzguOTcyLjkyMyAxLjQxNy40NDQuNDQ1Ljg5LjcxOSAxLjQxNi45MjMuNTEuMTk4IDEuMDkuMzMzIDEuOTQyLjM3MkM1LjU1NSAxNS45OSA1LjgyNyAxNiA4IDE2czIuNDQ0LS4wMSAzLjI5OC0uMDQ4Yy44NTEtLjA0IDEuNDM0LS4xNzQgMS45NDMtLjM3MmEzLjkgMy45IDAgMCAwIDEuNDE2LS45MjNjLjQ0NS0uNDQ1LjcxOC0uODkxLjkyMy0xLjQxNy4xOTctLjUwOS4zMzItMS4wOS4zNzItMS45NDJDMTUuOTkgMTAuNDQ1IDE2IDEwLjE3MyAxNiA4cy0uMDEtMi40NDUtLjA0OC0zLjI5OWMtLjA0LS44NTEtLjE3NS0xLjQzMy0uMzcyLTEuOTQxYTMuOSAzLjkgMCAwIDAtLjkyMy0xLjQxN0EzLjkgMy45IDAgMCAwIDEzLjI0LjQyYy0uNTEtLjE5OC0xLjA5Mi0uMzMzLTEuOTQzLS4zNzJDMTAuNDQzLjAxIDEwLjE3MiAwIDcuOTk4IDB6bS0uNzE3IDEuNDQyaC43MThjMi4xMzYgMCAyLjM4OS4wMDcgMy4yMzIuMDQ2Ljc4LjAzNSAxLjIwNC4xNjYgMS40ODYuMjc1LjM3My4xNDUuNjQuMzE5LjkyLjU5OXMuNDUzLjU0Ni41OTguOTJjLjExLjI4MS4yNC43MDUuMjc1IDEuNDg1LjAzOS44NDMuMDQ3IDEuMDk2LjA0NyAzLjIzMXMtLjAwOCAyLjM4OS0uMDQ3IDMuMjMyYy0uMDM1Ljc4LS4xNjYgMS4yMDMtLjI3NSAxLjQ4NWEyLjUgMi41IDAgMCAxLS41OTkuOTE5Yy0uMjguMjgtLjU0Ni40NTMtLjkyLjU5OC0uMjguMTEtLjcwNC4yNC0xLjQ4NS4yNzYtLjg0My4wMzgtMS4wOTYuMDQ3LTMuMjMyLjA0N3MtMi4zOS0uMDA5LTMuMjMzLS4wNDdjLS43OC0uMDM2LTEuMjAzLS4xNjYtMS40ODUtLjI3NmEyLjUgMi41IDAgMCAxLS45Mi0uNTk4IDIuNSAyLjUgMCAwIDEtLjYtLjkyYy0uMTA5LS4yODEtLjI0LS43MDUtLjI3NS0xLjQ4NS0uMDM4LS44NDMtLjA0Ni0xLjA5Ni0uMDQ2LTMuMjMzcy4wMDgtMi4zODguMDQ2LTMuMjMxYy4wMzYtLjc4LjE2Ni0xLjIwNC4yNzYtMS40ODYuMTQ1LS4zNzMuMzE5LS42NC41OTktLjkycy41NDYtLjQ1My45Mi0uNTk4Yy4yODItLjExLjcwNS0uMjQgMS40ODUtLjI3Ni43MzgtLjAzNCAxLjAyNC0uMDQ0IDIuNTE1LS4wNDV6bTQuOTg4IDEuMzI4YS45Ni45NiAwIDEgMCAwIDEuOTIuOTYuOTYgMCAwIDAgMC0xLjkybS00LjI3IDEuMTIyYTQuMTA5IDQuMTA5IDAgMSAwIDAgOC4yMTcgNC4xMDkgNC4xMDkgMCAwIDAgMC04LjIxN20wIDEuNDQxYTIuNjY3IDIuNjY3IDAgMSAxIDAgNS4zMzQgMi42NjcgMi42NjcgMCAwIDEgMC01LjMzNCIvPjwvc3ZnPg==');
  --icon-twitter: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyLjYuNzVoMi40NTRsLTUuMzYgNi4xNDJMMTYgMTUuMjVoLTQuOTM3bC0zLjg2Ny01LjA3LTQuNDI1IDUuMDdILjMxNmw1LjczMy02LjU3TDAgLjc1aDUuMDYzbDMuNDk1IDQuNjMzTDEyLjYwMS43NVptLS44NiAxMy4wMjhoMS4zNkw0LjMyMyAyLjE0NUgyLjg2NXoiLz48L3N2Zz4=');
  --icon-youtube: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTguMDUxIDEuOTk5aC4wODljLjgyMi4wMDMgNC45ODcuMDMzIDYuMTEuMzM1YTIuMDEgMi4wMSAwIDAgMSAxLjQxNSAxLjQyYy4xMDEuMzguMTcyLjg4My4yMiAxLjQwMmwuMDEuMTA0LjAyMi4yNi4wMDguMTA0Yy4wNjUuOTE0LjA3MyAxLjc3LjA3NCAxLjk1N3YuMDc1Yy0uMDAxLjE5NC0uMDEgMS4xMDgtLjA4MiAyLjA2bC0uMDA4LjEwNS0uMDA5LjEwNGMtLjA1LjU3Mi0uMTI0IDEuMTQtLjIzNSAxLjU1OGEyLjAxIDIuMDEgMCAwIDEtMS40MTUgMS40MmMtMS4xNi4zMTItNS41NjkuMzM0LTYuMTguMzM1aC0uMTQyYy0uMzA5IDAtMS41ODctLjAwNi0yLjkyNy0uMDUybC0uMTctLjAwNi0uMDg3LS4wMDQtLjE3MS0uMDA3LS4xNzEtLjAwN2MtMS4xMS0uMDQ5LTIuMTY3LS4xMjgtMi42NTQtLjI2YTIuMDEgMi4wMSAwIDAgMS0xLjQxNS0xLjQxOWMtLjExMS0uNDE3LS4xODUtLjk4Ni0uMjM1LTEuNTU4TC4wOSA5LjgybC0uMDA4LS4xMDRBMzEgMzEgMCAwIDEgMCA3LjY4di0uMTIzYy4wMDItLjIxNS4wMS0uOTU4LjA2NC0xLjc3OGwuMDA3LS4xMDMuMDAzLS4wNTIuMDA4LS4xMDQuMDIyLS4yNi4wMS0uMTA0Yy4wNDgtLjUxOS4xMTktMS4wMjMuMjItMS40MDJhMi4wMSAyLjAxIDAgMCAxIDEuNDE1LTEuNDJjLjQ4Ny0uMTMgMS41NDQtLjIxIDIuNjU0LS4yNmwuMTctLjAwNy4xNzItLjAwNi4wODYtLjAwMy4xNzEtLjAwN0ExMDAgMTAwIDAgMCAxIDcuODU4IDJ6TTYuNCA1LjIwOXY0LjgxOGw0LjE1Ny0yLjQwOHoiLz48L3N2Zz4=');
  --icon-linkedin: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTAgMS4xNDZDMCAuNTEzLjUyNiAwIDEuMTc1IDBoMTMuNjVDMTUuNDc0IDAgMTYgLjUxMyAxNiAxLjE0NnYxMy43MDhjMCAuNjMzLS41MjYgMS4xNDYtMS4xNzUgMS4xNDZIMS4xNzVDLjUyNiAxNiAwIDE1LjQ4NyAwIDE0Ljg1NHptNC45NDMgMTIuMjQ4VjYuMTY5SDIuNTQydjcuMjI1em0tMS4yLTguMjEyYy44MzcgMCAxLjM1OC0uNTU0IDEuMzU4LTEuMjQ4LS4wMTUtLjcwOS0uNTItMS4yNDgtMS4zNDItMS4yNDhTMi40IDMuMjI2IDIuNCAzLjkzNGMwIC42OTQuNTIxIDEuMjQ4IDEuMzI3IDEuMjQ4em00LjkwOCA4LjIxMlY5LjM1OWMwLS4yMTYuMDE2LS40MzIuMDgtLjU4Ni4xNzMtLjQzMS41NjgtLjg3OCAxLjIzMi0uODc4Ljg2OSAwIDEuMjE2LjY2MiAxLjIxNiAxLjYzNHYzLjg2NWgyLjQwMVY5LjI1YzAtMi4yMi0xLjE4NC0zLjI1Mi0yLjc2NC0zLjI1Mi0xLjI3NCAwLTEuODQ1LjctMi4xNjUgMS4xOTN2LjAyNWgtLjAxNmwuMDE2LS4wMjVWNi4xNjloLTIuNGMuMDMuNjc4IDAgNy4yMjUgMCA3LjIyNXoiLz48L3N2Zz4=');
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-background);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  margin-top: 0;
  color: var(--color-primary);
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }

p {
  margin: 0 0 1rem 0;
}

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

/* Navigation */
header.navbar {
  background-color: var(--color-primary);
  color: #ffffff;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  /* Add subtle shadow for premium feel */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}

.nav-menu li {
  position: relative;
}

.nav-menu a {
  color: #ffffff;
  padding: 0.5rem;
  display: block;
  font-weight: 500;
}

.nav-menu li:hover > ul {
  display: block;
}

/* Dropdown menus */
.nav-menu ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-primary);
  padding: 0.5rem 0;
  list-style: none;
  min-width: 200px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
}

.nav-menu ul li a {
  padding: 0.5rem 1rem;
}

/* Mobile nav */
.nav-toggle {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.75rem;
  cursor: pointer;
  display: none;
}

@media (max-width: 768px) {
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-primary);
    flex-direction: column;
    gap: 0;
    display: none;
  }
  .nav-menu li {
    width: 100%;
  }
  .nav-menu li a {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .nav-toggle {
    display: block;
  }
  .nav-menu.show {
    display: flex;
  }
  /* Hide dropdowns on mobile */
  .nav-menu li:hover > ul,
  .nav-menu ul {
    display: none;
    position: static;
    box-shadow: none;
  }
}

/* Hero section */
.hero {
  background-image: url('../img/hero.jpg');
  background-size: cover;
  background-position: center;
  color: #ffffff;
  text-align: center;
  padding: 6rem 1rem;
}

.hero h1 {
  font-size: 2.5rem;
  color: #ffffff;
}

.hero p {
  max-width: 600px;
  margin: 0.5rem auto 1.5rem;
  color: #f0f0f0;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-primary {
  background-color: var(--color-secondary);
  color: #ffffff;
}
.btn-primary:hover {
  background-color: #166447;
}

.btn-secondary {
  background-color: var(--color-accent);
  color: #ffffff;
}
.btn-secondary:hover {
  background-color: #b38a2a;
}

/* Section wrappers */
.section {
  padding: 3rem 1rem;
}

.section.bg-light {
  background-color: var(--color-surface);
}

.section-title {
  text-align: center;
  margin-bottom: 2rem;
}

/* Grid utilities */
.grid {
  display: grid;
  gap: 1.5rem;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Card component */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  /* Add interactive transitions for cards */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Slight lift and shadow on hover for cards */
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.card h3 {
  font-size: 1.25rem;
  margin-top: 0;
}

.card p {
  flex-grow: 1;
}

.card .btn-link {
  align-self: flex-start;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--color-secondary);
}

/* Pillar / tag styles */
.pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.pillar {
  flex: 1 1 180px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}
.pillar h3 {
  margin-bottom: 0.5rem;
  color: var(--color-secondary);
}

/* Form styles */
form {
  max-width: 600px;
  margin: 0 auto;
}

label {
  display: block;
  font-weight: 500;
  margin-top: 1rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: #ffffff;
  font-size: 1rem;
}

textarea {
  min-height: 120px;
}

input[type="checkbox"] {
  margin-right: 0.5rem;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--color-secondary);
  outline-offset: 0;
}

button[type="submit"] {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-secondary);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
}
button[type="submit"]:hover {
  background-color: #166447;
}

/* Footer */
footer {
  background-color: var(--color-primary);
  color: #ffffff;
  padding: 2rem 1rem;
}
footer .footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
  /* Display four responsive columns on large screens, automatically stacking on smaller screens */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: start;
}
footer a {
  color: #ffffff;
}
footer .footer-nav, footer .footer-info {
  flex: 1 1 200px;
}

/* On large screens allocate two columns to the info section so the footer shows four columns total */
@media (min-width: 992px) {
  footer .footer-info {
    grid-column: span 2;
  }
}
footer p {
  margin: 0.5rem 0;
  color: #dddddd;
}
footer .social-links {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Interactive behaviour for social icons */
footer .social-links a:hover {
  background-color: var(--color-accent);
  transform: translateY(-3px);
}

footer .social-links a::before {
  content: '';
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  background-color: #ffffff;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

footer .social-links a[aria-label="Facebook"]::before {
  mask-image: var(--icon-facebook);
  -webkit-mask-image: var(--icon-facebook);
}

footer .social-links a[aria-label="Instagram"]::before {
  mask-image: var(--icon-instagram);
  -webkit-mask-image: var(--icon-instagram);
}

footer .social-links a[aria-label="X (Twitter)"]::before {
  mask-image: var(--icon-twitter);
  -webkit-mask-image: var(--icon-twitter);
}

footer .social-links a[aria-label="YouTube"]::before {
  mask-image: var(--icon-youtube);
  -webkit-mask-image: var(--icon-youtube);
}

footer .social-links a[aria-label="LinkedIn"]::before {
  mask-image: var(--icon-linkedin);
  -webkit-mask-image: var(--icon-linkedin);
}
footer .social-links a {
  /* Hide the link text and display as circular icons */
  color: var(--color-surface);
  background-color: var(--color-secondary);
  text-indent: -9999px;
  overflow: hidden;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
footer .copyright {
  text-align: center;
  margin-top: 2rem;
  font-size: var(--small-size);
  color: #cccccc;
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 1rem;
}
.gallery img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Chips / tags */
.chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.chip {
  background-color: var(--color-secondary);
  color: #ffffff;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.875rem;
}

/* Post metadata */
.post-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
}
.post-meta .date {
  font-size: var(--small-size);
  color: var(--color-text-muted);
}

/* Tables used sparingly for simple lists */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
th, td {
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  text-align: left;
}

/* Accessibility helper classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}