/* === CPLD Notice Banner: match screenshot === */
.cpld-notice{
  /* kill the “card” look */
  margin: 0;                 /* no gap above/below */
  border-radius: 0;
  box-shadow: none;
  overflow: visible;

  /* bar color */
  background: #7cc1a2;


  border: 1px solid var(--cpld-gold, #e5c55a);
  border-left: 0;
  border-right: 0;
  top: 0px;

  /* shadow only under */
  box-shadow: 0 10px 16px rgba(0,0,0,.22);
  position: relative;
  z-index: 50; /* keep shadow visible above the page content */
}

.cpld-notice__inner{

  min-height: 30px;          
  padding: 14px 18px;
  margin-top: 44px;

  display: flex;
  align-items: center;
  justify-content: center;   
  gap: 12px;
}

.cpld-notice__text{

  flex: 0 1 auto;
  text-align: center;
}

.cpld-notice__text p{
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 22px;           
  line-height: 1.15;
}


.cpld-notice__actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.cpld-notice__btn{
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
}



/* Responsive: shrink font a bit on small screens */
@media (max-width: 700px){
  .cpld-notice__inner{ min-height: 50px; padding: 12px 14px; }
  .cpld-notice__text p{ font-size: 18px; }
}


/* =========================
   Variant colors
   ========================= */

/* INFO (default) — keep what you have */
.cpld-notice--info{
  background: var(--accent3, #2b3646);
  border-color: var(--cpld-gold, #e5c55a);
}

/* WARNING — yellow bar */
.cpld-notice--warn{
  background: var(--accent4);
  border-color: var(--accent2, #2b3646);
}

/* Make warning text readable on gold */
/*.cpld-notice--warn .cpld-notice__text p{
  color: var(--cpld-navy, #2b3646);
}*/

.cpld-notice--warn .cpld-notice__text p{
  color: #fff;
}


/* Warning button + close: navy accents */
.cpld-notice--warn .cpld-notice__btn{
  color: var(--cpld-navy, #2b3646);
  background: rgba(43,54,70,.10);
  border-color: rgba(43,54,70,.35);
}

.cpld-notice--warn .cpld-notice__close{
  color: var(--cpld-navy, #2b3646);
  background: rgba(43,54,70,.10);
  border-color: rgba(43,54,70,.35);
}


/* URGENT — brighter blue bar */
.cpld-notice--urgent{
  background: #f1d67c;              /* brighter blue (tweak if you want) */
  border-color: var(--cpld-gold, #e5c55a);
  color: #111;
}

/* Urgent keeps white text, but slightly stronger button/close */
.cpld-notice--urgent .cpld-notice__btn{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
}

.cpld-notice--urgent .cpld-notice__close{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
}
.cpld-notice--urgent .cpld-notice__text p{
  color: #111;
}


/*new stuff*/

.cpld-notice__inner{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px;
}

/* Text takes remaining space */
.cpld-notice__text{
  flex: 1;
  min-width: 0; /* prevents overflow in flex layouts */
}

/* Actions: button + close grouped together on right */
.cpld-notice__actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Your button style (unchanged) */
.cpld-notice__btn{
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}

/* Close button – no absolute positioning */
.cpld-notice__close{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
}

.cpld-notice__close:hover{
  background: rgba(255,255,255,.14);
}

/* Responsive: stack nicely instead of collisions */
@media (max-width: 700px){
  .cpld-notice__inner{
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .cpld-notice__actions{
    width: 100%;
    justify-content: center;
  }
  .cpld-notice__text p{ font-size: 18px; }
}
/* Make sure the banner itself paints the full strip */
.cpld-notice{
  display: block;
  margin: 0;
}

/* Remove default paragraph margins (common cause of the “sliver”) */
.cpld-notice__text p{
  margin: 0;
}


:where(.wp-site-blocks) header.wp-block-template-part + .cpld-notice{
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

/* Attach the banner to the header (no 1px seam) */
.cpld-notice{
  border-top: 0 !important;
}

/* Inline links inside the notice message */
.cpld-notice__text a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 800;
}

.cpld-notice__text a:hover,
.cpld-notice__text a:focus{
  text-decoration-thickness: 2px;
}

/* The separate More Info button has been removed from PHP/sidebar. */