/* MCDC Schooling System — site-wide styles */

* { box-sizing: border-box; }

body { margin: 0; background: #ffffff; font-family: Archivo, system-ui, sans-serif; color: #1f3a4d; }
img { max-width: 100%; }
a { color: #1f3a4d; text-decoration: none; }
a:hover { color: #f18a1c; }

::selection { background: rgba(55,179,74,.25); }
:focus-visible { outline: 2px solid #37b34a; outline-offset: 2px; }

/* Header / nav */
.mc-nav-link:hover { background: #2e9c40 !important; }
.mc-util-link:hover { color: #37b34a !important; }
.mc-search input::placeholder { color: rgba(255,255,255,.82); font-weight: 500; }
.mc-search:focus-within { background: rgba(255,255,255,.26) !important; border-color: #fff !important; }

/* Buttons */
.mc-btn-o:hover { background: #f6a03d !important; }
.mc-btn-b:hover { background: #1c88c6 !important; }

/* Footer */
.mc-foot-link:hover { color: #f18a1c !important; }

/* Social icons — hover color depends on the background they sit on per page */
body.about .mc-soc:hover { background: #1c88c6 !important; }
body.contact .mc-soc:hover,
body.faq .mc-soc:hover { background: rgba(255,255,255,.2) !important; }
body.gallery .mc-soc:hover { background: #f18a1c !important; }

/* Home page */
.mc-card:hover .mc-card-plus { background: #f18a1c !important; }
.mc-prog:hover .mc-prog-bar { background: #2e9c40 !important; }
.mc-prog { display: flex; flex-direction: column; height: 100%; }
.mc-prog > div:nth-child(2) { flex: 1; }
@keyframes mcRise { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } }
.mc-hero > * { animation: mcRise .8s cubic-bezier(.2,.7,.2,1) .05s forwards; }
.mc-hero > *:nth-child(2) { animation-delay: .15s }
.mc-hero > *:nth-child(3) { animation-delay: .25s }
.mc-hero > *:nth-child(4) { animation-delay: .35s }
.mc-tile { transition: transform .3s cubic-bezier(.2,.7,.2,1) }
.mc-tile:hover { transform: translateY(-6px) }

/* Apply page — form fields */
.mc-in { width: 100%; background: transparent; border: 0; border-bottom: 1px solid #dde1e3; outline: none; padding: 14px 2px; font-family: Archivo, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .09em; color: #1f3a4d; }
.mc-in::placeholder { color: #9aa6ad; font-weight: 600; letter-spacing: .09em; }
.mc-in:focus { border-bottom-color: #37b34a; }
select.mc-in { appearance: none; cursor: pointer; color: #9aa6ad; }
.mc-r { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: .09em; color: #55666f; cursor: pointer; }
.mc-r input { accent-color: #2b9fe0; width: 16px; height: 16px; margin: 0 }

/* Contact page — form fields */
.mc-box { width: 100%; background: #fff; border: 1px solid #e2e5e7; outline: none; padding: 22px 24px; font-family: Archivo, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .09em; color: #1f3a4d; }
.mc-box::placeholder { color: #9aa6ad; font-weight: 600; letter-spacing: .09em; }
.mc-box:focus { border-color: #37b34a; }
select.mc-box { appearance: none; cursor: pointer; color: #9aa6ad; }

/* Gallery page */
.gal-ov { opacity: 0; transition: opacity .22s ease; }
.gal-tile:hover .gal-ov { opacity: 1; }
.gal-tile { overflow: hidden; }
.gal-tile img { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.gal-tile:hover img { transform: scale(1.07); }