/* Make the branding area a single row */
header .navbar-brand,
header .site-branding,
header .site-branding a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* Ensure logo doesn't force a line break */
header .navbar-brand img,
header .site-branding img {
  display: block !important;
  height: 56px !important;
  width: auto !important;
  margin-right: 12px !important;
}

/* Ensure the site title/tagline stay inline */
header .site-title,
header .site-description,
header .navbar-brand span,
header .navbar-brand small {
  display: inline-block !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
/* =========================
   BRANDING + MENU + SEARCH
   on ONE ROW (desktop)
   Also centers ONLY the UL with class: menu-center
   ========================= */

@media (min-width: 992px) {

  /* Keep the overall header layout */
  header.container-header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  /* Branding stays left */
  header.container-header .container-branding {
    flex: 0 0 auto;
  }

  /* Make the nav + search sit on the same row */
  header.container-header .container-nav {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
  }

  /* Nav takes remaining space */
  header.container-header .container-nav > nav.navbar {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Search stays on the far right */
  header.container-header .container-nav > .container-search {
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* Center ONLY the menu UL that has your class */
  header.container-header nav.navbar .navbar-collapse ul.menu-center {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding-left: 0;
  }

  header.container-header nav.navbar .navbar-collapse ul.menu-center > li {
    margin: 0;
  }
}
/* =========================================================
   LIGHT + AIRY Cassiopeia theme (Teal/Purple/Grey)
   Teal   #6ed3cf
   Purple #9068be
   Grey   #e1e8f0
   Paste at END of templates/cassiopeia/css/user.css
   ========================================================= */

:root{
  --pfs-teal: #6ed3cf;
  --pfs-purple: #9068be;
  --pfs-grey: #e1e8f0;

  --pfs-ink: #0f172a;
  --pfs-muted: #475569;

  --pfs-surface: #ffffff;
  --pfs-surface-2: rgba(255,255,255,.86);

  --pfs-border: rgba(15, 23, 42, .10);
  --pfs-shadow: 0 10px 28px rgba(15, 23, 42, .10);
  --pfs-shadow-hover: 0 16px 36px rgba(15, 23, 42, .14);

  --pfs-radius: 18px;
  --pfs-radius-sm: 12px;

  --pfs-ring: 0 0 0 4px rgba(110, 211, 207, .35);

  /* Bootstrap + Cassiopeia variables */
  --bs-primary: var(--pfs-teal);
  --bs-secondary: var(--pfs-purple);
  --bs-link-color: var(--pfs-purple);
  --bs-link-hover-color: var(--pfs-teal);

  --cassiopeia-color-primary: var(--pfs-teal);
  --cassiopeia-color-link: var(--pfs-purple);
  --cassiopeia-color-hover: var(--pfs-teal);
}

/* Page background and default text */
html, body{
  background: var(--pfs-grey) !important;
  color: var(--pfs-ink);
}
p, li{ color: var(--pfs-muted); }

::selection{
  background: rgba(110,211,207,.35);
}

/* Make the main content sit on a soft surface */
.container-component,
.site,
main{
  background: transparent !important;
}

/* Header: clean, light, subtle accent */
.container-header,
.header{
  background: var(--pfs-surface) !important;
  border-bottom: 1px solid var(--pfs-border);
}
.container-header::after{
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--pfs-teal), var(--pfs-purple));
  opacity: .9;
}

/* Nav links: simple pills with gentle hover */
.navbar .nav-link,
.mod-menu .nav-link{
  color: var(--pfs-ink) !important;
  border-radius: 999px;
  padding: .45rem .85rem;
  transition: background-color .18s ease, transform .14s ease, color .18s ease;
}
.navbar .nav-link:hover,
.mod-menu .nav-link:hover{
  background: rgba(110,211,207,.18);
  color: var(--pfs-ink) !important;
  transform: translateY(-1px);
}
.navbar .nav-item.active > .nav-link,
.mod-menu .nav-item.active > .nav-link,
.navbar .nav-link.active{
  background: rgba(144,104,190,.18);
  color: var(--pfs-ink) !important;
}

/* Links: airy underline on hover */
a{
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color .18s ease, background-size .18s ease;
}
a:hover{ background-size: 100% 2px; }

/* Surfaces: modules, cards, blog items */
.card,
.moduletable,
.blog-item,
.com-content-category-blog .blog-items .item,
.item-content{
  background: var(--pfs-surface) !important;
  border: 1px solid var(--pfs-border) !important;
  border-radius: var(--pfs-radius) !important;
  box-shadow: var(--pfs-shadow) !important;
  overflow: hidden;
}
.card:hover,
.moduletable:hover,
.blog-item:hover,
.com-content-category-blog .blog-items .item:hover,
.item-content:hover{
  box-shadow: var(--pfs-shadow-hover) !important;
  border-color: rgba(144,104,190,.22) !important;
}

/* Add breathing room inside blog tiles */
.com-content-category-blog .blog-items .item,
.blog-items .blog-item{
  padding: 1rem;
}

/* Images look nicer on light theme */
img{
  border-radius: var(--pfs-radius-sm);
}
.blog-items img,
.com-content-category-blog img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* Headings and titles */
h1, h2, h3, h4{ color: var(--pfs-ink); }
.blog-items h2 a,
.blog-items h3 a{
  color: var(--pfs-purple) !important;
}
.blog-items h2 a:hover,
.blog-items h3 a:hover{
  color: var(--pfs-teal) !important;
}

/* Optional: keep long bios from exploding the grid */
.com-content-category-blog .blog-item .item-content p{
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Buttons */
.btn,
button,
input[type="submit"]{
  border-radius: 999px !important;
}
.btn-primary{
  border: 0 !important;
  background: linear-gradient(135deg, var(--pfs-teal), var(--pfs-purple)) !important;
}
.btn-primary:hover{ filter: brightness(1.03); }

.btn-outline-primary{
  border-color: rgba(110,211,207,.8) !important;
  color: var(--pfs-purple) !important;
}
.btn-outline-primary:hover{
  background: rgba(110,211,207,.18) !important;
}

/* Forms: clean focus ring */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select{
  background: var(--pfs-surface) !important;
  border: 1px solid rgba(15,23,42,.16) !important;
  border-radius: 12px !important;
}
input:focus,
textarea:focus,
select:focus{
  outline: none !important;
  box-shadow: var(--pfs-ring) !important;
  border-color: rgba(110,211,207,.8) !important;
}

/* Article meta toned down */
.article-info,
.content-info{
  color: rgba(15,23,42,.60) !important;
}

/* Footer: light, not heavy */
.container-footer,
.footer{
  background: rgba(255,255,255,.75) !important;
  border-top: 1px solid var(--pfs-border);
}
/* =========================================================
   FIXES: Header site title + Hero/Banner text contrast
   Paste at very END of user.css
   ========================================================= */

/* 1) Header brand text (Peguis Free Spirits) should be dark on light header */
.container-header .site-title,
.container-header .site-title a,
.container-header .site-description,
.container-header .navbar-brand,
.container-header .navbar-brand a,
header .site-title,
header .site-title a,
header .site-description{
  color: var(--pfs-ink) !important;
}

/* If your logo is an image AND a text brand exists, keep spacing tidy */
.container-header .navbar-brand img{
  display: inline-block;
  vertical-align: middle;
}

/* 2) Hero/Banner: force white text + add readable overlay */
.container-banner,
.container-banner .banner,
.container-banner .banner-overlay{
  position: relative;
}

.container-banner::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, .55),
    rgba(15, 23, 42, .25)
  );
  pointer-events: none;
  z-index: 0;
}

/* Put the banner content above the overlay */
.container-banner > *{
  position: relative;
  z-index: 1;
}

/* Make welcome text white inside the banner */
.container-banner,
.container-banner h1,
.container-banner h2,
.container-banner h3,
.container-banner p,
.container-banner a{
  color: #ffffff !important;
}

/* Optional: add a little glow to improve readability on busy photos */
.container-banner h1,
.container-banner h2,
.container-banner p{
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
/* =========================================================
   Cassiopeia Header: less flat, airy, with teal/purple accents
   Paste at END of templates/cassiopeia/css/user.css
   ========================================================= */

:root{
  --pfs-teal: #6ed3cf;
  --pfs-purple: #9068be;
  --pfs-ink: #0f172a;

  --pfs-border: rgba(15, 23, 42, .10);
  --pfs-shadow: 0 10px 26px rgba(15, 23, 42, .10);
  --pfs-shadow-2: 0 18px 40px rgba(15, 23, 42, .14);

  --pfs-radius: 18px;
  --pfs-pill: 999px;
  --pfs-ring: 0 0 0 4px rgba(110, 211, 207, .35);
}

/* 1) Header background, depth, spacing */
.container-header,
.header{
  background: #ffffff !important;
  border-bottom: 1px solid var(--pfs-border) !important;
  position: relative;
  box-shadow: var(--pfs-shadow);
}

/* Accent band across top */
.container-header::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background: linear-gradient(90deg, var(--pfs-teal), var(--pfs-purple));
}

/* Soft tint behind nav area so it feels layered */
.container-header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 10px; bottom: 0;
  background:
    radial-gradient(900px 220px at 15% 0%, rgba(110,211,207,.14), transparent 60%),
    radial-gradient(900px 220px at 85% 0%, rgba(144,104,190,.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Make header content sit above overlays */
.container-header > *,
.header > *{
  position: relative;
  z-index: 1;
}

/* Give the header breathing room */
.container-header{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 2) Branding: logo + site name look like a “badge” */
.container-header .site-branding,
.container-header .navbar-brand{
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem .75rem;
  border-radius: var(--pfs-pill);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
  backdrop-filter: blur(6px);
}

.container-header .navbar-brand img{
  height: 52px;
  width: auto;
  border-radius: 12px;
}

/* Brand text readable */
.container-header .site-title,
.container-header .site-title a,
.container-header .site-description,
.container-header .navbar-brand,
.container-header .navbar-brand a{
  color: var(--pfs-ink) !important;
}

/* Slight accent on title */
.container-header .site-title a{
  text-decoration: none !important;
}
.container-header .site-title a:hover{
  color: var(--pfs-purple) !important;
}

/* 3) Navigation: pill links with nice hover and active state */
.container-header .nav-link,
.container-header .mod-menu .nav-link{
  color: var(--pfs-ink) !important;
  border-radius: var(--pfs-pill);
  padding: .5rem .95rem;
  transition: background-color .18s ease, transform .14s ease, box-shadow .18s ease;
}

.container-header .nav-link:hover,
.container-header .mod-menu .nav-link:hover{
  background: rgba(110, 211, 207, .18);
  transform: translateY(-1px);
}

.container-header .nav-item.active > .nav-link,
.container-header .nav-link.active,
.container-header .mod-menu .nav-item.active > .nav-link{
  background: rgba(144, 104, 190, .16);
  box-shadow: inset 0 0 0 2px rgba(144, 104, 190, .22);
}

/* 4) Dropdowns: cleaner menu surface */
.container-header .dropdown-menu{
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: var(--pfs-shadow-2);
  padding: .5rem;
}
.container-header .dropdown-item{
  border-radius: 12px;
  padding: .55rem .75rem;
}
.container-header .dropdown-item:hover,
.container-header .dropdown-item:focus{
  background: rgba(110, 211, 207, .16);
}

/* 5) Search: rounded input + gradient button */
.container-header input[type="search"],
.container-header input[type="text"]{
  border-radius: var(--pfs-pill) !important;
  border: 1px solid rgba(15, 23, 42, .16) !important;
  background: rgba(255,255,255,.90) !important;
}

.container-header input[type="search"]:focus,
.container-header input[type="text"]:focus{
  outline: none !important;
  box-shadow: var(--pfs-ring) !important;
  border-color: rgba(110, 211, 207, .85) !important;
}

.container-header .btn,
.container-header button,
.container-header .btn-primary{
  border-radius: var(--pfs-pill) !important;
}

.container-header .btn-primary,
.container-header button.btn-primary{
  border: 0 !important;
  background: linear-gradient(135deg, var(--pfs-teal), var(--pfs-purple)) !important;
  box-shadow: 0 10px 22px rgba(144,104,190,.18);
}

.container-header .btn-primary:hover,
.container-header button.btn-primary:hover{
  filter: brightness(1.04);
}

/* 6) Optional: sticky header that still feels light
   If you do NOT want sticky, delete this block. */
.container-header{
  position: sticky;
  top: 0;
  z-index: 999;
}

/* 7) Accessibility: focus styles for keyboard users */
.container-header a:focus-visible,
.container-header button:focus-visible,
.container-header input:focus-visible{
  outline: none !important;
  box-shadow: var(--pfs-ring) !important;
}