/* Adeli v5.50 — Safari Planning only: content width + tab/CTA backgrounds.
   Deliberately leaves all other homepage/site styling untouched. */

/* Make the Safari Planning tab block align with the normal site content width. */
body.adeli-custom-chrome .adeli-safari-planning-tabs__nav,
body.adeli-custom-chrome .adeli-safari-planning-tabs__panels{
  width:100% !important;
  max-width:var(--wp--style--global--content-size, 1200px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* If the surrounding theme uses a narrower content wrapper, inherit it. */
body.adeli-custom-chrome .adeli-safari-planning-tabs{
  width:100% !important;
  max-width:100% !important;
}

/* Tab backgrounds: neutral/green inactive, CTA gold active/hover. */
body.adeli-custom-chrome .adeli-safari-planning-tab{
  background:var(--adeli-green) !important;
  color:#fff !important;
}
body.adeli-custom-chrome .adeli-safari-planning-tab:hover,
body.adeli-custom-chrome .adeli-safari-planning-tab:focus-visible,
body.adeli-custom-chrome .adeli-safari-planning-tab.is-active{
  background:var(--adeli-gold) !important;
  color:#fff !important;
}

/* Month tabs: use the same established tab family, but keep their background
   consistent and distinct from the CTA buttons. */
body.adeli-custom-chrome .adeli-safari-planning-months,
body.adeli-custom-chrome .adeli-safari-planning-month-tabs{
  background:var(--adeli-green) !important;
}
body.adeli-custom-chrome .adeli-safari-planning-months a,
body.adeli-custom-chrome .adeli-safari-planning-month-tabs a,
body.adeli-custom-chrome .adeli-safari-planning-months button,
body.adeli-custom-chrome .adeli-safari-planning-month-tabs button{
  background:#f1f3ef !important;
  color:var(--adeli-green) !important;
  border-color:rgba(23,63,53,.14) !important;
}
body.adeli-custom-chrome .adeli-safari-planning-months a:hover,
body.adeli-custom-chrome .adeli-safari-planning-months a:focus-visible,
body.adeli-custom-chrome .adeli-safari-planning-months a.active,
body.adeli-custom-chrome .adeli-safari-planning-month-tabs a:hover,
body.adeli-custom-chrome .adeli-safari-planning-month-tabs a:focus-visible,
body.adeli-custom-chrome .adeli-safari-planning-month-tabs a.active,
body.adeli-custom-chrome .adeli-safari-planning-months button:hover,
body.adeli-custom-chrome .adeli-safari-planning-months button:focus-visible,
body.adeli-custom-chrome .adeli-safari-planning-months button.active,
body.adeli-custom-chrome .adeli-safari-planning-month-tabs button:hover,
body.adeli-custom-chrome .adeli-safari-planning-month-tabs button:focus-visible,
body.adeli-custom-chrome .adeli-safari-planning-month-tabs button.active{
  background:var(--adeli-gold) !important;
  color:#fff !important;
}

/* Safari Planning panel CTAs: CTA background only; no size/spacing changes. */
body.adeli-custom-chrome .adeli-safari-planning-tabs__panels a.button,
body.adeli-custom-chrome .adeli-safari-planning-tabs__panels a.wp-element-button,
body.adeli-custom-chrome .adeli-safari-planning-tabs__panels a.adeli-cta,
body.adeli-custom-chrome .adeli-safari-planning-tabs__panels .cta a{
  background:var(--adeli-gold) !important;
  color:#fff !important;
}
body.adeli-custom-chrome .adeli-safari-planning-tabs__panels a.button:hover,
body.adeli-custom-chrome .adeli-safari-planning-tabs__panels a.button:focus-visible,
body.adeli-custom-chrome .adeli-safari-planning-tabs__panels a.wp-element-button:hover,
body.adeli-custom-chrome .adeli-safari-planning-tabs__panels a.wp-element-button:focus-visible,
body.adeli-custom-chrome .adeli-safari-planning-tabs__panels a.adeli-cta:hover,
body.adeli-custom-chrome .adeli-safari-planning-tabs__panels a.adeli-cta:focus-visible,
body.adeli-custom-chrome .adeli-safari-planning-tabs__panels .cta a:hover,
body.adeli-custom-chrome .adeli-safari-planning-tabs__panels .cta a:focus-visible{
  background:var(--adeli-green) !important;
  color:#fff !important;
}