/* ======================================================================
   FamilyFotos — user.css (cleaned + reorganized)
   Notes:
   - Keeps your current colours + white menu text (desktop + mobile)
   - Consolidates :root variables
   - Removes duplicate hover rules
   - Replaces invalid '//' comment with valid CSS comment
   ====================================================================== */


/* ======================================================================
   1) THEME COLOURS + GLOBAL BASE
   ====================================================================== */

:root {
  /* Your chosen colours (current scheme) */
  --ff-header-bg: rgb(87, 116, 120);
  --ff-footer-bg: rgb(71, 58, 47);
  --ff-text: rgb(255, 255, 255);

  --ff-link: rgb(29, 121, 137);
  --ff-link-hover: rgb(22, 92, 105);

  --ff-primary: rgb(244, 108, 4);
  /* You had this set to a red hover; kept exactly as-is */
  --ff-primary-hover: rgb(170, 45, 41);

  /* Feed Bootstrap/Cassiopeia vars */
  --bs-primary: var(--ff-primary);
  --cassiopeia-color-primary: var(--ff-primary);
  --cassiopeia-color-link: var(--ff-link);
  --cassiopeia-color-hover: var(--ff-link);
}

body {
  background-color: #B8ACA3;
  color: var(--ff-text) !important;
}

/* Links (site-wide) */
a { color: var(--ff-link); }
a:hover,
a:focus {
  color: var(--ff-link-hover) !important;
  text-decoration: underline;
}


/* ======================================================================
   2) HEADER LAYOUT + LOGO SIZING
   ====================================================================== */

/* Slim the header */
.header.container-header {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;

  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  background: var(--ff-header-bg) !important;
  color: var(--ff-text) !important;
}

/* Reduce vertical padding in header children */
.header.container-header .grid-child {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Both grid columns stretch to header height */
.header.container-header > .grid-child {
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* Branding wrapper spacing */
.header .navbar-brand,
.header .site-branding,
.header .brand-logo {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1 !important;
}

/* Logo sizing */
.header .brand-logo img,
.header .navbar-brand img {
  display: block !important;
  width: 240px !important;
  height: auto !important;
  max-width: none !important;
  max-height: 240px !important;
}

/* Mobile logo override */
@media (max-width: 991.98px) {
  .header .navbar-brand img,
  .header .brand-logo img {
    width: 140px !important;
    height: auto !important;
  }
}

/* Nav column centered (your current behaviour) */
.header.container-header > .grid-child.container-nav {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

/* Nav itself */
.header.container-header > .grid-child.container-nav > nav.navbar {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* MetisMenu alignment */
.header.container-header > .grid-child.container-nav .metismenu {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.header.container-header > .grid-child.container-nav .metismenu > li > a {
  padding: 0.35rem 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
}

/* Move logo slightly to the right (desktop only) */
@media (min-width: 992px) {
  .header.container-header > .grid-child:first-child {
    padding-left: 6rem;
  }
}


/* ======================================================================
   3) MENU COLOURS (WHITE TEXT) — DESKTOP + MOBILE
   ====================================================================== */

/* Desktop menu links (white) */
.header.container-header .navbar-nav .nav-link,
.header.container-header .metismenu > li > a {
  color: #ffffff !important;
}

/* Mobile collapsed menu links (white) */
.header.container-header .navbar-collapse a,
.header.container-header .collapse a,
.header.container-header .dropdown-menu a {
  color: #ffffff !important;
}

/* Hover / focus / active state */
.header.container-header .navbar-nav .nav-link:hover,
.header.container-header .navbar-nav .nav-link:focus,
.header.container-header .metismenu > li > a:hover,
.header.container-header .metismenu > li > a:focus,
.header.container-header .metismenu > li.active > a,
.header.container-header .navbar-collapse a:hover,
.header.container-header .navbar-collapse a:focus {
  color: rgb(193, 205, 207) !important;
  text-decoration: none;
}

/* Ensure mobile menu background stays readable for white text */
@media (max-width: 991.98px) {
  .header.container-header .navbar-collapse,
  .header.container-header .collapse,
  .header.container-header .dropdown-menu {
    background: var(--ff-header-bg) !important;
  }
}


/* ======================================================================
   4) AUTH BUTTON (LOGIN/LOGOUT) + MODAL LOOK
   ====================================================================== */

/* Neutralise editor-inserted <p> around the login button */
#loginBtn { display: inline-block; }
#loginBtn:not(:disabled) { pointer-events: auto; }

p:has(> #loginBtn) {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline-block !important;
}

/* Prevent "stuck pressed" look */
#loginBtn,
#loginBtn:hover,
#loginBtn:focus,
#loginBtn:focus-visible,
#loginBtn:active,
#loginBtn.active {
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

#loginBtn:active { background-image: none !important; }

/* Ensure auth button sits above nav hit area
   (You already switched from module ID to .auth-btn — good.) */
.auth-btn {
  position: relative !important;
  z-index: 50 !important;
}

/* Keep the actual button on top */
#loginBtn {
  position: relative !important;
  z-index: 60 !important;
  pointer-events: auto !important;
}

/* Remove any <p> layout side-effects inside module */
.auth-btn p {
  margin: 0 !important;
  display: inline-block !important;
}

/* Prevent nav containers/pseudo elements from stealing pointer hover */
.header .grid-child.container-nav,
.header .grid-child.container-nav > nav.navbar,
.header .grid-child.container-nav .collapse,
.header .grid-child.container-nav .navbar-collapse {
  position: relative !important;
  z-index: 1 !important;
}

.header .grid-child.container-nav::before,
.header .grid-child.container-nav::after,
.header .grid-child.container-nav > nav.navbar::before,
.header .grid-child.container-nav > nav.navbar::after {
  pointer-events: none !important;
}

/* Modal styling */
.modal-content { border-radius: 16px; }
.modal-header { border-bottom: none; }


/* ======================================================================
   5) PRIMARY BUTTON COLOURS
   ====================================================================== */

.btn.btn-primary,
button.btn-primary,
a.btn.btn-primary {
  background-color: var(--ff-primary) !important;
  border-color: var(--ff-primary) !important;
  color: #fff !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus,
a.btn.btn-primary:hover,
a.btn.btn-primary:focus {
  background-color: var(--ff-primary-hover) !important;
  border-color: var(--ff-primary-hover) !important;
  color: #fff !important;
}


/* ======================================================================
   6) MOBILE HEADER SPACING (HAMBURGER vs AUTH BUTTON)
   ====================================================================== */

@media (max-width: 991.98px) {
  .header.container-header .navbar-toggler {
    margin-right: 0.75rem;
  }

  /* Space to the left of ANY login/logout module */
  .auth-btn,
  .mod-login {
    margin-left: 0.75rem;
  }
}


/* ======================================================================
   7) JOOMLA SYSTEM MESSAGES (READABLE)
   ====================================================================== */

.com-message,
.alert {
  color: rgb(23, 23, 23) !important;
}

.alert {
  background: rgb(193, 205, 207) !important;
  border: 1px solid rgb(29, 121, 137) !important;
}

.alert a { color: rgb(29, 121, 137) !important; }
.alert .btn-close { filter: none !important; }

.alert-success,
.alert-info,
.alert-warning,
.alert-danger {
  color: rgb(23, 23, 23) !important;
  background: rgb(193, 205, 207) !important;
  border-color: rgb(29, 121, 137) !important;
}

#system-message-container joomla-alert[type=success],
#system-message-container joomla-alert[type=message] {
  --alert-accent-color: var(--success);
  --alert-heading-text: #000000f2;
  --alert-close-button: var(--success);
  background-color: #577478;
}


/* ======================================================================
   8) BA / GALLERY-SPECIFIC RULES
   ====================================================================== */

@media (max-width: 1024px) {
  .ba-album.css-style-13 .ba-image + .ba-caption {
    display: flex !important;
  }
}

.ba-gallery-edit-button {
  background-color: #F46C04 !important;
  color: #ffffff;
}

.ba-edit-gallery-btn {
  background: #f46c04 !important;
  border-radius: 50%;
  box-shadow: 0 .3125rem .75rem rgba(0,0,0,0.23);
  color: #fff !important;
  display: block;
  font-size: 1.5rem;
  height: 1.5rem;
  letter-spacing: normal;
  line-height: 1.5rem;
  margin-left: calc(100% - 3.75rem);
  overflow: visible;
  padding: 1.125rem;
  position: absolute;
  text-align: center;
  top: 0;
  width: 1.5rem;
  z-index: 1;
}

.ba-goback {
  --hover-background-color: #F46C04 !important;
}