/* ===== PPA header + palette ===== */

/* darker header green */
:root{
  --ppa-green-dark:#145528;   /* darker than #1A6633 */
  --ppa-gold:#F2B705;         /* link/hover highlight */
  --ppa-orange:#C65102;       /* dark orange for buttons */
}

/* header background + tighter height */
.container-header{
  background: var(--ppa-green-dark) !important;
  padding-top:6px;
  padding-bottom:6px;
  border-bottom:0;
}

/* keep logo left and limit its height */
.container-header .navbar-brand{ margin-right:12px; }
.container-header .navbar-brand img,
.navbar-brand img{
  max-height:56px;   /* try 50–60px to taste */
  height:auto;
  width:auto;
}

/* vertically center the header contents */
.container-header .navbar,
.container-header,
.container-header .grid-child{
  align-items:center;
}

/* menu colors */
.container-header .mod-menu a{
  color:#fff !important;
  font-weight:600;
  padding:.45rem .7rem;
  border-radius:8px;
}
.container-header .mod-menu a:hover,
.container-header .mod-menu a:focus{
  background:rgba(255,255,255,.12);
  color:var(--ppa-gold) !important;
}

/* optional: buttons site-wide with the orange accent */
.btn-primary{
  background:var(--ppa-orange);
  border-color:var(--ppa-orange);
  color:#fff;
}
.btn-primary:hover{
  background:var(--ppa-gold);
  border-color:var(--ppa-gold);
  color:var(--ppa-green-dark);
}
/* Use your palette variable (set earlier) */
:root{
  --ppa-orange:#C65102;   /* dark orange */
  --ppa-gold:#F2B705;     /* optional hover */
}

/* Put the title after the logo */
.container-header .navbar-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;                /* space between logo and text */
}

/* The actual text */
.container-header .navbar-brand::after{
  content:"Sandalanka Past Pupils’ Association";
  color:var(--ppa-orange);       /* dark orange text */
  font-weight:800;
  font-size:clamp(1rem,2.4vw,1.28rem);
  line-height:1.1;
  letter-spacing:.2px;
  white-space:nowrap;            /* keep on one line on wide screens */
}

/* Optional: gold on hover for a subtle effect */
.container-header .navbar-brand:hover::after{
  color:var(--ppa-gold);
}

/* Small screens: allow wrapping and reduce size */
@media (max-width:560px){
  .container-header .navbar-brand::after{
    white-space:normal;
    font-size:1rem;
  }
}
/* 1) Sidebar module titles (e.g., “Main Menu”, “Login Form”) */
.sidebar-right .card-title,
.sidebar-left  .card-title,
.moduletable h3,
.card-header .card-title {
  font-size: 1.05rem;   /* was ~1.4rem */
  line-height: 1.2;
  margin: 0;
  font-weight: 700;
}

/* 2) Menu items inside sidebar menu module */
.sidebar-right .mod-menu a,
.sidebar-left  .mod-menu a {
  font-size: 0.95rem;          /* reduce text size */
  padding: .35rem .55rem;      /* reduce pill padding */
  border-radius: 6px;          /* smaller pills */
  font-weight: 600;
}

/* 3) Optional: make the module “cards” less heavy */
.sidebar-right .card,
.sidebar-left  .card {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.sidebar-right .card-header,
.sidebar-left  .card-header {
  padding: .55rem .75rem;
}
.sidebar-right .card-body,
.sidebar-left  .card-body {
  padding: .55rem .75rem;
}

/* 4) Login button—keep it compact */
.sidebar-right .btn,
.sidebar-left  .btn {
  padding: .4rem .7rem;
  font-size: .95rem;
  border-radius: 8px;
}
/* --- ENLARGE LOGO WITHOUT GROWING THE GREEN STRIP --- */

/* let items overflow slightly if needed */
.container-header { 
  overflow: visible; 
}

/* force the bigger logo size and allow it to “bleed” a bit */
.container-header .navbar-brand img,
.navbar-brand img {
  max-height: 84px !important;    /* try 80–92px */
  height: auto !important;
  width: auto !important;
  margin-top: -10px !important;    /* pull upward */
  margin-bottom: -10px !important; /* keep strip height unchanged */
}

/* keep things vertically centered */
.container-header,
.container-header .navbar,
.container-header .grid-child {
  align-items: center !important;
}
/* ===== Compact header height (match to logo) ===== */

/* 1) Set the header's vertical padding very small */
.container-header{
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* 2) Remove any extra padding some Cassiopeia rows add */
.container-header .grid-child,
.container-header .navbar{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  align-items: center !important;   /* keep items centered vertically */
}

/* 3) Control the logo height (pick the one you want) */
.container-header .navbar-brand img,
.navbar-brand img{
  max-height: 60px !important;   /* try 56–68px to taste */
  height: auto !important;
  width: auto !important;
  margin: 0 !important;          /* remove the negative margins we used before */
  display: block;
}

/* 4) Keep the site title compact so it doesn't add height */
.container-header .navbar-brand{
  gap: 10px !important;
  padding: 0 !important;
}
.container-header .navbar-brand::after{
  font-size: clamp(1rem, 2vw, 1.15rem) !important;  /* slightly smaller title */
  line-height: 1.05 !important;
}

/* 5) Make sure the breadcrumbs below don't add big gap */
.mod-breadcrumbs__wrapper{
  margin-top: .25rem !important;
}