/* ==========================================================================
   Sarang Custom CSS - Orange CTA (primary) + Deep Teal (accent)
   ========================================================================== */

/* ---------- Site Background ---------- */
body,
.masthead,
.page__hero,
.page__footer,
.page__content,
.sidebar,
.site-header,
.site-footer {
  background-color: #fff !important;  /* Background (white) */
  color: #0B2440 !important;          /* Main text (dark navy) */
}

/* ---------- Header / Navbar ---------- */
header, .navbar, .site-header, .page__header, .site-nav {
  background-color: #fff !important;
  color: #0B2440 !important;
}

/* Navbar links: Gray tone */
.navbar a, header a, .site-header a, .site-nav a {
  color: #6D7B84 !important;    /* Muted gray/slate */
  text-decoration: none !important;
  font-weight: 500;
}

.navbar a:hover, header a:hover, .site-header a:hover, .site-nav a:hover {
  color: #0B2440 !important;    /* Dark on hover */
  text-decoration: none !important;
}

/* ---------- Default / Body Text ---------- */
body, p, span, div, li {
  color: #0B2440 !important;
}

/* Secondary / Metadata Text */
small, .entry-meta, .post-meta, .footer-meta, .sidebar, .tagline {
  color: #6D7B84 !important;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
  color: #0B2440 !important;
  text-shadow: none !important;
}

/* ---------- Links ---------- */
a, a:link, a:visited {
  color: #124E61 !important;    /* Accent (deep teal) */
  text-decoration: none !important;
}

a:hover, a:focus, a:active {
  color: #2b8a79 !important;    /* Slightly lighter accent on hover */
  text-decoration: none !important;
  outline: none !important;
}

/* ---------- Footer ---------- */
footer, .site-footer {
  color: #6D7B84 !important;
  background-color: #fff !important;
}

footer a, .site-footer a {
  color: #124E61 !important;
}

footer a:hover, .site-footer a:hover {
  color: #0B2440 !important;
}

/* ---------- Blockquotes ---------- */
blockquote {
  color: #6D7B84 !important;
  border-left: 3px solid #FF6B35 !important; /* now uses orange accent */
  padding-left: 1rem !important;
}

/* ---------- Inline / Code Blocks ---------- */
code, pre {
  color: #124E61 !important;          /* deep teal for inline code highlights */
  background-color: #F7F7F7 !important;  /* light code background */
  border-radius: 4px !important;
  padding: 0.2rem 0.4rem !important;
}

/* ---------- Site Title / Logo ---------- */
.site-title, 
.site-title a,
.page__splash .splash__title,
.page__splash .splash__title * {
  color: #FF6B35 !important;       /* site title uses orange CTA */
  text-shadow: none !important;
  -webkit-text-fill-color: #0A2540 !important;
  background-image: none !important;
}

/* ---------- Buttons: Style ---------- */
button,
.button,
.btn,
.btn-primary,
.btn--primary,
a.button,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  background-color: transparent !important;
  color: #FF6B35 !important;                 /* CTA orange for button text */
  border: 2px solid #FF6B35 !important;      /* CTA orange border */
  border-radius: 6px !important;
  padding: 0.5rem 1.25rem !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

button:hover,
.button:hover,
.btn:hover,
.btn-primary:hover,
.btn--primary:hover,
a.button:hover,
a.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  background-color: #FF6B35 !important;      /* dark navy hover fill */
  color: #FFFFFF !important;                 /* white text on hover */
  border-color: #FF6B35 !important;
  box-shadow: 0 4px 12px rgba(255,107,53,0.18) !important; /* orange glow on hover */
  transform: scale(1.05) !important;
}

/* ---------- Read-more specific style: subtle teal text + orange gradient on hover ---------- */
.btn.read-more,
a.read-more,
button.read-more {
  border-color: #124E61 !important;  /* accent border by default */
  color: #124E61 !important;         /* accent text by default */
  background: transparent !important;
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

/* Hover for read-more — tasteful orange gradient fill and soft shadow */
.btn.read-more:hover,
a.read-more:hover,
button.read-more:hover,
.btn.read-more:focus,
a.read-more:focus,
button.read-more:focus {
  background: linear-gradient(180deg, #FF6B35 0%, #E05E2B 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 40px rgba(224,94,43,0.18) !important, 0 4px 12px rgba(18,78,97,0.04) !important;
  transform: translateY(-4px) !important;
  outline: none !important;
}

/* ---------- Splash Buttons ---------- */
.page__splash .btn--primary,
.page__splash .hero__actions .btn--primary,
.page__splash .actions .btn--primary {
  background-color: transparent !important;
  color: #FF6B35 !important;
  border: 2px solid #FF6B35 !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 0.55rem 1.5rem !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

.page__splash .btn--primary:hover,
.page__splash .hero__actions .btn--primary:hover,
.page__splash .actions .btn--primary:hover {
  background-color: #0B2440 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(255,107,53,0.18) !important;
  transform: scale(1.05) !important;
}

/* ---------- Contact Page Box ---------- */
.contact-box {
    background-color: #fff !important;
    color: #0B2440 !important;
    padding: 2rem !important;
    max-width: 90% !important;
    margin: 3rem auto !important;
    border-radius: 12px !important;
    box-shadow: 0 0 7px rgba(18,78,97,0.12) !important; /* subtle deep-teal glow */
    text-align: center !important;
    box-sizing: border-box !important;
}

.contact-buttons {
    display: flex !important;
    justify-content: center !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 2rem !important;
}

.contact-buttons a {
    padding: 0.65rem 1.4rem !important;
    border: 2px solid #FF6B35 !important;   /* CTA orange border */
    border-radius: 8px !important;
    color: #FF6B35 !important;              /* CTA orange text */
    text-decoration: none !important;
    font-weight: bold !important;
    background-color: transparent !important;
    font-size: 0.95rem !important;
    transition: all 0.3s ease !important;
}

.contact-buttons a:hover {
    background-color: #FF6B35 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(255,107,53,0.18) !important; /* orange glow on hover */
    transform: scale(1.05) !important;
}

/* ---------- Neon Lines ---------- */
.neon-line, .neon-line-home {
    height: 2-3px !important;
    background: #FF6B35 !important; /* neon line now orange */
    box-shadow: 0 0 10px #FF6B35, 0 0 20px #FF6B35, 0 0 40px #FF6B35 !important;
    border-radius: 2px !important;
    margin: 2rem auto !important;
    width: 80% !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    .contact-box {
        padding: 1.5rem !important;
    }

    .contact-buttons a {
        padding: 0.55rem 1rem !important;
        font-size: 0.85rem !important;
    }

    .page__splash .btn--primary {
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* ---------- Hide Recent Posts ---------- */
.recent-posts, .entries-list, .entries-grid {
  display: none !important;
}

/* ---------- Accessibility / Focus ---------- */
button:focus, .btn:focus, .button:focus, a.button:focus, a.btn:focus {
  outline: 3px solid rgba(18,78,97,0.18) !important; /* deep-teal focus hint */
  outline-offset: 2px !important;
}

/* ---------- Remove Glow / Animations ---------- */
*,
*::before,
*::after {
  text-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  animation: none !important;
}

/* ---------- Footer spacing fix ---------- */
.page__footer,
.page__footer > div,
.page__footer nav,
.page__footer div {
    margin: 0 !important;
    padding: 0 !important;
}

.page__content,
.page__content:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.page__footer {
    margin-top: -5px !important;
}

/* ---------- About Section ---------- */
.about__title {
    margin-top: 0 !important;
}

.author {
    display: none !important;
}

.page__hero--overlay {
  padding-top: 36px !important;   /* Was 48px */
  padding-bottom: 24px !important;
  margin-bottom: 8px !important;  /* Was 32px */
}



button.greedy-nav__toggle {
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

button.greedy-nav__toggle:hover,
button.greedy-nav__toggle:focus {
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

/* ---------------- Hero Section Fixes ---------------- */

/* Reduce spacing above the tagline on mobile */
.layout--splash .page__lead {
  margin-top: 0.8rem !important;   /* smaller gap below title */
  margin-bottom: 1.5rem !important; /* closer to buttons */
  font-size: 1.05rem !important;  /* keep readable */
  line-height: 1.5 !important;
}

/* Button group wrapper */
.layout--splash .page__lead + p {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;  /* nice space between buttons */
  margin-top: 0.4rem !important;
  margin-bottom: 1rem !important;
}

/* Buttons */
.layout--splash .page__lead + p > a {
  flex: 0 0 auto !important;   /* don’t stretch weirdly */
  min-width: 120px !important;
  padding: 0.55rem 1rem !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  text-align: center !important;
  font-size: 1rem !important;
}

/* About (solid CTA orange) */
.layout--splash .page__lead + p > a[href="/about/"] {
  background-color: #FF6B35 !important;
  color: #fff !important;
  border: 2px solid transparent !important;
}

/* LinkedIn (outlined CTA orange) */
.layout--splash .page__lead + p > a[href^="https://www.linkedin.com"] {
  background: transparent !important;
  color: #FF6B35 !important;
  border: 2px solid #FF6B35 !important;
}

/* Hover effect */
.layout--splash .page__lead + p > a:hover {
  transform: translateY(-2px) !important;
  transition: transform 160ms ease !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .layout--splash .page__lead {
    margin-top: 0.6rem !important;
    margin-bottom: 1.5rem !important;
    font-size: 1rem !important;
  }
  .layout--splash .page__lead + p {
    justify-content: center !important;   /* center buttons under text */
    gap: 0.5rem !important;
  }
  .layout--splash .page__lead + p > a {
    flex: 1 !important;   /* buttons expand evenly */
    min-width: auto !important;
  }
}


/* Custom separator above testimonials */
.custom-separator {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: #FF6B35 !important; /* orange separator line */
  margin: 1rem auto !important;
  border-radius: 1px !important;
}


/* Remove border/break line after feature section */
.page__content > .feature__wrapper {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove any <hr> right after features */
.page__content hr {
  display: none !important;
  height: 0 !important;
  border: none !important;
  margin: 0 !important;
}


.skills-container {
  display: flex !important;
  justify-content: center !important;   /* centers the scrollable container itself */
}

.skills-scroll {
  display: flex !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  gap: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 20px !important;
  margin-top: 0 !important;
  scrollbar-width: none !important; /* Firefox */
}

.skills-scroll::-webkit-scrollbar {
  display: none !important; /* Chrome/Safari */
}

.skills-scroll img {
  height: 60px !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease !important;
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .skills-scroll {
    gap: 24px !important;
    padding-bottom: 16px !important;
  }
  .skills-scroll img {
    height: 48px !important;
  }
}

.skills-scroll {
  display: flex !important;
  overflow-x: hidden !important; /* prevent manual scroll glitch */
  white-space: nowrap !important;
  gap: 40px !important;
}

.skills-container {
  display: flex !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;   /* ✅ clips logos outside the box */
}

.skills-scroll {
  display: flex !important;
  white-space: nowrap !important;
  gap: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 20px !important;
  margin-top: 0 !important;
  scrollbar-width: none !important; /* Firefox */
}

.skills-scroll::-webkit-scrollbar {
  display: none !important; /* Chrome/Safari */
}

.skills-scroll img {
  height: 60px !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease !important;
}

/* force rounded corners on the teaser image */
.archive__item-teaser {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* optionally ensure the img itself has no conflicting radius */
.archive__item-teaser img {
  border-radius: 0 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Center content in splash layout */
.page__title,
.page__lead,
.page__lead + p {
  text-align: center !important;
}

/* Center the buttons */
.page__lead + p {
  display: flex;
  justify-content: center;
  gap: 10px; /* space between buttons */
  flex-wrap: wrap;
}

/* Optional: ensure full container is centered */
.page__hero--overlay .wrapper {
  text-align: center;
}


/* Force center alignment in splash hero across all screen sizes */
.page__hero--overlay .wrapper {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure lead paragraph and title are centered */
.page__title,
.page__lead {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* Center the buttons under the paragraph */
.page__lead + p {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* === Splash Section Wrapper === */
/* Controls the overall vertical spacing (top and bottom padding) around the splash hero section */
.page__hero--overlay .wrapper {
  padding-top: 2rem;   /* Adds space above the splash content (mobile) */
  padding-bottom: 2rem; /* Adds space below the splash content (mobile) */
}

/* === Title (H1) === */
/* Controls the space between the title and the lead paragraph */
.page__title {
  margin-bottom: 1rem; /* Adds space below the title (mobile) */
}

/* === Lead Paragraph === */
/* Controls the space below the paragraph and improves readability */
.page__lead {
  margin-bottom: 1.5rem; /* Adds space below the paragraph (mobile) */
  font-size: 1.125rem;   /* Slightly larger text for better readability */
  line-height: 1.6;      /* Comfortable line spacing */
}

/* === Button Row (About Me & LinkedIn) === */
/* Aligns buttons horizontally and adds spacing between and below them */
.page__lead + p {
  display: flex;              /* Enables flex layout for buttons */
  justify-content: center;   /* Centers buttons horizontally */
  flex-wrap: wrap;           /* Allows wrapping on small screens */
  gap: 1rem;                 /* Adds space between buttons */
  margin-bottom: 2rem;       /* Adds space below the button group (mobile) */
}

/* === Responsive Adjustments for Desktop (≥768px) === */
@media (min-width: 768px) {
  /* Increases top and bottom padding for more breathing room on larger screens */
  .page__hero--overlay .wrapper {
    padding-top: 2rem;     /* More top space for desktop */
    padding-bottom: 2rem;  /* More bottom space for desktop */
  }

  /* Slightly increases space between title and paragraph on desktop */
  .page__title {
    margin-bottom: 1.25rem;
  }

  /* Increases space between paragraph and buttons */
  .page__lead {
    margin-bottom: 2rem;
  }

  /* Adds a bit more space below the button group */
  .page__lead + p {
    margin-bottom: 2.5rem;
  }
}

@media (max-width: 767px) {
  .page__hero--overlay .wrapper {
    padding-left: 2rem !important;   /* Adds 16px padding on the left */
    padding-right: 2rem !important;  /* Adds 16px padding on the right */
  }
}

@media (max-width: 767px) {
  .page__title {
    line-height: 1.4; /* Slightly taller line spacing for better readability */
  }
}

body header.masthead,
body .site-header.masthead {
  border-bottom: 3px solid red !important;
}


/* ----- Force a fixed top navbar for Minimal Mistakes (masthead) ----- */
.masthead {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background-color: #fff !important; /* change if you need */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}

/* ensure inner wrapper doesn't collapse when fixed */
.masthead__inner-wrap {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

/* Push page content / hero down by header height so it is not covered.
   Adjust 72px to match your actual masthead height (inspect in devtools). */
.layout--splash .initial-content,
.layout--default .wrapper,
.site {
  padding-top: 72px !important;
}

/* Mobile tweak — increase padding if masthead is taller on mobile */
@media (max-width: 768px) {
  .layout--splash .initial-content,
  .layout--default .wrapper {
    padding-top: 88px !important;
  }
}

/* If you prefer sticky (not fixed), you can try this instead:
.masthead { position: sticky !important; top: 0 !important; z-index: 9999 !important; }
*/

/* Debug helper (only while debugging): ensure no ancestor has overflow hiding sticky */
.masthead, .masthead__inner-wrap, .layout--splash, .layout--default {
  overflow: visible !important;
}


/* ---------- Sticky masthead on all screens, but no big gap on mobile ---------- */

/* keep fixed for desktop (if already done) */
.masthead {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background-color: #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}

/* inner wrap alignment */
.masthead__inner-wrap {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

/* Desktop: keep content pushed so nothing is hidden */
@media (min-width: 769px) {
  .layout--splash .initial-content,
  .layout--default .wrapper,
  .site {
    padding-top: 72px !important; /* adjust to your desktop masthead height */
  }
}

/* ===========================
   Sticky / Fixed Masthead (layout--splash specific)
   Paste at the end of your CSS
   =========================== */

:root{
  --masthead-h-desktop: 72px; /* change to your actual header height */
  --masthead-h-mobile: 70px;  /* change for mobile if needed */
}

/* Authoritative fixed masthead */
body .masthead,
header.masthead,
.site-header.masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
  height: calc(var(--masthead-h-desktop, 72px) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  overflow: visible;
}

/* Center inner content of masthead */
body .masthead__inner-wrap {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 8px 20px;
  box-sizing: border-box;
}

/* Remove stray debug borders */
body header.masthead,
body .site-header.masthead {
  border-bottom: none !important;
}

/* PUSH: apply only on NON-splash pages (layout--splash present on body for home) */
body:not(.layout--splash) .initial-content .wrapper,
body:not(.layout--splash) .wrapper,
body:not(.layout--splash) .site,
body:not(.layout--splash) #page-title.page__title,
body:not(.layout--splash) .page__title {
  padding-top: calc(var(--masthead-h-desktop, 72px) + env(safe-area-inset-top, 0px));
  margin-top: 0;
}

/* Mobile: smaller masthead + matching push */
@media (max-width: 768px) {
  body .masthead,
  header.masthead,
  .site-header.masthead {
    height: calc(var(--masthead-h-mobile, 70px) + env(safe-area-inset-top, 0px));
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }

  body:not(.layout--splash) .initial-content .wrapper,
  body:not(.layout--splash) .wrapper,
  body:not(.layout--splash) .site,
  body:not(.layout--splash) #page-title.page__title,
  body:not(.layout--splash) .page__title {
    padding-top: calc(var(--masthead-h-mobile, 70px) + env(safe-area-inset-top, 0px));
  }

  /* ensure links/buttons in masthead remain tappable above hero */
  body .masthead a,
  body .masthead button {
    z-index: 100000;
  }
}

/* Safeguard: remove transforms/overflow that can break fixed positioning */
body .layout--splash,
body .layout--default,
body .site,
body .masthead,
body .masthead__inner-wrap {
  transform: none !important;
  -webkit-transform: none !important;
  overflow: visible !important;
}



/* ---------------------------
   Force push for ALL non-home pages
   Paste at end of your CSS
   --------------------------- */

:root{
  --masthead-h-desktop: 72px; /* set this to your desktop header height */
  --masthead-h-mobile: 70px;  /* set this to your mobile header height */
}

/* Broad set of common containers — desktop / default */
body:not(.layout--splash) .site,
body:not(.layout--splash) .wrapper,
body:not(.layout--splash) .initial-content,
body:not(.layout--splash) main,
body:not(.layout--splash) #main,
body:not(.layout--splash) .container,
body:not(.layout--splash) .page,
body:not(.layout--splash) .page__hero,
body:not(.layout--splash) .page__content,
body:not(.layout--splash) .page__inner,
body:not(.layout--splash) .page__title,
body:not(.layout--splash) #page-title,
body:not(.layout--splash) .entry,
body:not(.layout--splash) .post,
body:not(.layout--splash) .article,
body:not(.layout--splash) .about-page,
body:not(.layout--splash) .contact-box,
body:not(.layout--splash) #content,
body:not(.layout--splash) .content {
  padding-top: calc(var(--masthead-h-desktop, 72px) - 62px + env(safe-area-inset-top, 0px)) !important;
  box-sizing: border-box !important;
}

/* Mobile: use mobile masthead height */
@media (max-width: 768px) {
  body:not(.layout--splash) .site,
  body:not(.layout--splash) .wrapper,
  body:not(.layout--splash) .initial-content,
  body:not(.layout--splash) main,
  body:not(.layout--splash) #main,
  body:not(.layout--splash) .container,
  body:not(.layout--splash) .page,
  body:not(.layout--splash) .page__hero,
  body:not(.layout--splash) .page__content,
  body:not(.layout--splash) .page__inner,
  body:not(.layout--splash) .page__title,
  body:not(.layout--splash) #page-title,
  body:not(.layout--splash) .entry,
  body:not(.layout--splash) .post,
  body:not(.layout--splash) .article,
  body:not(.layout--splash) .about-page,
  body:not(.layout--splash) .contact-box,
  body:not(.layout--splash) #content,
  body:not(.layout--splash) .content {
    padding-top: calc(var(--masthead-h-mobile, 70px) - 62px + env(safe-area-inset-top, 0px)) !important;
  }
}

/* Ultimate fallback: if a template uses a unique/top-level wrapper, apply to first child of body */
body:not(.layout--splash) > *:first-child {
  padding-top: calc(var(--masthead-h-desktop, 72px) + env(safe-area-inset-top, 0px)) !important;
}

/* Safeguard: avoid fixed masthead being clipped by ancestor transforms */
body .masthead,
body .masthead__inner-wrap,
body .layout--default,
body .layout--splash {
  transform: none !important;
  -webkit-transform: none !important;
  overflow: visible !important;
}

body:not(.layout--splash) .about-page {
    padding-top: calc(var(--masthead-h-desktop, 72px) - 40px + env(safe-area-inset-top, 0px)) !important;
    box-sizing: border-box !important;
}

/* About page - mobile */
@media (max-width: 768px) {
    body:not(.layout--splash) .about-page {
        padding-top: calc(var(--masthead-h-mobile, 72px) - 40px + env(safe-area-inset-top, 0px)) !important;
        /* Adjust -20px as needed to reduce top space on mobile */
    }
}


.page__taxonomy, 
.page__date {
  background-color: #fff !important;
}

@media only screen and (max-width: 768px) {
  .page__title {
    margin-top: -10px !important;
  }
}