/* ============================================================
   Smart Educator — site-wide glass buttons
   Loaded after each page's own stylesheet (see
   resources/views/components/partials/body-assets.blade.php).
   Only colours, borders, shadows and blur are overridden; sizes
   and positions still come from the page stylesheets.
   ============================================================ */
:root {
  --se-o: 243, 109, 46;      /* brand orange #F36D2E */
  --se-o-deep: 214, 78, 20;  /* deeper orange for gradient + contrast */
}

/* 1. Baseline layout — zero specificity, so it only fills gaps
      (e.g. program pages, where these buttons had no styles at all). */
:where(.btn-primary-orange, .btn-cta-orange, .btn-primary, .btn-drawer-apply,
       .btn-tray-compare, .btn-modal-primary, .hero-btn-primary, .btn-modal-done,
       .btn-drawer-counsel, .btn-drawer-compare, .hero-btn-secondary, .btn-tray-add,
       .btn-calendar-success, .btn-cta-white, .btn-cta-outline-white) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: .75em 1.4em;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

/* 2. Primary — orange glass */
.btn-primary-orange, .btn-cta-orange, .btn-primary, .btn-drawer-apply,
.btn-tray-compare, .btn-modal-primary, .hero-btn-primary, .btn-modal-done {
  color: #fff !important;
  background-color: rgba(var(--se-o), .9) !important;
  background-image:
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,.38) 48%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(var(--se-o), .92), rgba(var(--se-o-deep), .92)) !important;
  background-size: 250% 100%, 100% 100%, 100% 100% !important;
  background-position: 130% 0, 0 0, 0 0 !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  box-shadow:
    0 10px 26px -10px rgba(var(--se-o), .65),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.10) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  text-shadow: 0 1px 1px rgba(0,0,0,.15);
  transition: translate .2s ease, box-shadow .25s ease, background-position .7s ease, filter .2s ease;
}
.btn-primary-orange:hover, .btn-cta-orange:hover, .btn-primary:hover, .btn-drawer-apply:hover,
.btn-tray-compare:hover, .btn-modal-primary:hover, .hero-btn-primary:hover, .btn-modal-done:hover {
  translate: 0 -2px;
  background-position: -30% 0, 0 0, 0 0 !important;
  box-shadow:
    0 14px 32px -10px rgba(var(--se-o), .8),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.10) !important;
  filter: saturate(1.08);
}
.btn-primary-orange:active, .btn-cta-orange:active, .btn-primary:active, .btn-drawer-apply:active,
.btn-tray-compare:active, .btn-modal-primary:active, .hero-btn-primary:active, .btn-modal-done:active {
  translate: 0 0;
}

/* 3. Secondary — frosted white glass with orange outline */
.btn-drawer-counsel, .btn-drawer-compare:not(.in-compare), .hero-btn-secondary,
.btn-tray-add, .btn-calendar-success, .btn-cta-white {
  color: rgb(var(--se-o-deep)) !important;
  background-color: rgba(255,255,255,.55) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.30)) !important;
  border: 1px solid rgba(var(--se-o), .45) !important;
  box-shadow:
    0 8px 22px -14px rgba(15,23,42,.35),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  transition: translate .2s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease;
}
.btn-drawer-counsel:hover, .btn-drawer-compare:not(.in-compare):hover, .hero-btn-secondary:hover,
.btn-tray-add:hover, .btn-calendar-success:hover, .btn-cta-white:hover {
  translate: 0 -2px;
  background-color: rgba(255,244,238,.75) !important;
  border-color: rgba(var(--se-o), .75) !important;
  box-shadow:
    0 12px 26px -14px rgba(var(--se-o), .55),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* 4. On dark / orange bands — clear glass with white text */
.btn-cta-outline-white {
  color: #fff !important;
  background-color: rgba(255,255,255,.14) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04)) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 26px -14px rgba(0,0,0,.45) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  transition: translate .2s ease, background-color .2s ease;
}
.btn-cta-outline-white:hover {
  translate: 0 -2px;
  background-color: rgba(255,255,255,.24) !important;
}

/* 5. Keyboard focus, disabled, reduced motion */
:is(.btn-primary-orange, .btn-cta-orange, .btn-primary, .btn-drawer-apply, .btn-tray-compare,
    .btn-modal-primary, .hero-btn-primary, .btn-modal-done, .btn-drawer-counsel, .btn-drawer-compare,
    .hero-btn-secondary, .btn-tray-add, .btn-calendar-success, .btn-cta-white, .btn-cta-outline-white):focus-visible {
  outline: 3px solid rgba(var(--se-o), .45);
  outline-offset: 2px;
}
:is(.btn-primary-orange, .btn-cta-orange, .btn-primary, .btn-drawer-apply, .btn-tray-compare,
    .btn-modal-primary, .hero-btn-primary, .btn-modal-done, .btn-drawer-counsel, .btn-drawer-compare,
    .hero-btn-secondary, .btn-tray-add, .btn-calendar-success):is(:disabled, [aria-disabled="true"]) {
  opacity: .55;
  cursor: not-allowed;
  translate: none;
  filter: grayscale(.2);
}
@media (prefers-reduced-motion: reduce) {
  :is(.btn-primary-orange, .btn-cta-orange, .btn-primary, .btn-drawer-apply, .btn-tray-compare,
      .btn-modal-primary, .hero-btn-primary, .btn-modal-done, .btn-drawer-counsel, .btn-drawer-compare,
      .hero-btn-secondary, .btn-tray-add, .btn-calendar-success, .btn-cta-white, .btn-cta-outline-white) {
    transition: none !important;
    translate: none !important;
  }
}
/* 6. Footer social icons — round glass chips with brand colour on hover */
.social-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.social-links .social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: #fff !important; text-decoration: none;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: translate .2s ease, background-color .2s ease, border-color .2s ease;
}
.social-links .social-icon:hover { translate: 0 -2px; border-color: transparent; }
.social-links .social-facebook:hover  { background: #1877F2; }
.social-links .social-linkedin:hover  { background: #0A66C2; }
.social-links .social-instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-links .social-twitter:hover   { background: #000; }
.social-links .social-youtube:hover   { background: #FF0000; }
.social-links .social-icon:focus-visible { outline: 3px solid rgba(243,109,46,.6); outline-offset: 2px; }
/* 7. Site fixes (Oct 2026 audit) */
/* CTA band: the highlighted words were orange on orange, and the heading fell back to Georgia */
#contact h2, .contact-cta h2 { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#contact h2 .text-orange-highlight { color: #FFE8DC !important; }
/* About page: heading column was wider than the phone screen */
@media (max-width: 768px) {
  .about-who-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .about-who-content, .about-who-content > * { min-width: 0; max-width: 100%; }
  .about-who-heading { overflow-wrap: break-word; font-size: clamp(26px, 7.2vw, 34px); }
}

/* 8. Header search overlay */
.se-search[hidden] { display: none; }
.se-search { position: fixed; inset: 0; z-index: 100000; background: rgba(15,23,42,.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; }
.se-search-box { position: relative; width: 100%; max-width: 560px; background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.7); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(15,23,42,.45); padding: 14px; }
.se-search-box input { width: 100%; font: inherit; font-size: 16px; padding: 12px 44px 12px 14px; border: 1px solid #e2e8f0; border-radius: 10px; outline: none; }
.se-search-box input:focus { border-color: rgb(243,109,46); box-shadow: 0 0 0 3px rgba(243,109,46,.18); }
.se-search-close { position: absolute; right: 22px; top: 21px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f1f5f9; font-size: 18px; line-height: 1; cursor: pointer; color: #334155; }
.se-search-results { list-style: none; margin: 10px 0 0; padding: 0; max-height: 60vh; overflow: auto; }
.se-search-results a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: #0f172a; }
.se-search-results a:hover, .se-search-results a:focus { background: #fff1e9; outline: none; }
.se-search-results strong { display: block; font-size: 15px; }
.se-search-results small { display: block; color: #64748b; font-size: 13px; margin-top: 2px; }
.se-search-empty { padding: 12px; color: #475569; font-size: 14px; }
.se-search-empty a { display: inline; padding: 0; color: rgb(214,78,20); text-decoration: underline; }.se-search-box input::-webkit-search-cancel-button { display: none; }