/*
  Main Stylesheet for RMC School
  This file includes Tailwind CSS base styles and all custom styles.
*/

/* --- 1. Tailwind CSS Pre-flight/Base Styles --- */
/* This is a minimal set of Tailwind's base styles to ensure consistency. */
*,::before,::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb }
::before,::after { --tw-content: '' }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal }
body { margin: 0; line-height: inherit }
hr { height: 0; color: inherit; border-top-width: 1px }
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit }
a { color: inherit; text-decoration: inherit }
b,strong { font-weight: bolder }
code,kbd,samp,pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em }
small { font-size: 80% }
sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
sub { bottom: -0.25em }
sup { top: -0.5em }
table { text-indent: 0; border-color: inherit; border-collapse: collapse }
button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0 }
button,select { text-transform: none }
button,[type='button'],[type='reset'],[type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none }
:-moz-focusring { outline: auto }
:-moz-ui-invalid { box-shadow: none }
progress { vertical-align: baseline }
::-webkit-inner-spin-button,::-webkit-outer-spin-button { height: auto }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px }
::-webkit-search-decoration { -webkit-appearance: none }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit }
summary { display: list-item }
blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre { margin: 0 }
fieldset { margin: 0; padding: 0 }
legend { padding: 0 }
ol,ul,menu { list-style: none; margin: 0; padding: 0 }
textarea { resize: vertical }
input::placeholder,textarea::placeholder { opacity: 1; color: #9ca3af }
button,[role="button"] { cursor: pointer }

/* --- 2. Custom Site Styles (Moved from index.php) --- */
body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  background-color: #f9fafb;
}

.page-content {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#page-container,
#sidebar {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#sidebar {
  transform: translateX(100%);
}

body.sidebar-open #page-container {
  transform: translateX(-20rem);
}

body.sidebar-open #sidebar {
  transform: translateX(0);
}

#sidebar-overlay {
  transition: opacity 0.4s ease-in-out;
  pointer-events: none;
  opacity: 0;
}

body.sidebar-open #sidebar-overlay {
  opacity: 1;
  pointer-events: auto;
}

#sidebar .sidebar-anim-item {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

body.sidebar-open #sidebar .sidebar-anim-item {
  opacity: 1;
  transform: translateX(0);
}

header {
  transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

header.scrolled .top-info-bar {
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

header.scrolled .main-nav-bar {
  height: 4.5rem;
}

header.scrolled .school-logo {
  height: 2.75rem;
  width: 2.75rem;
}

.nav-link-desktop {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.nav-link-desktop::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 75%;
  width: 100%;
  background-color: var(--theme-color);
  border-radius: 9999px;
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}

.nav-link-desktop:hover,
.nav-link-desktop.active,
.nav-link-desktop.parent-active {
  color: white;
}

.nav-link-desktop:hover::before,
.nav-link-desktop.active::before,
.nav-link-desktop.parent-active::before {
  opacity: 1;
}

.dropdown-menu {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sidebar-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
  padding-top: 0;
  padding-bottom: 0;
}

.sidebar-menu-toggle.active + .sidebar-submenu {
  max-height: 500px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.sidebar-menu-toggle .chevron-icon {
  transition: transform 0.3s ease;
}

.sidebar-menu-toggle.active .chevron-icon {
  transform: rotate(90deg);
}

.sidebar-menu-toggle.active {
  background-color: #f3f4f6;
}

.nav-link.active:not(.nav-link-desktop) {
  color: var(--theme-color);
  font-weight: 700;
}

.sidebar-menu-toggle.parent-active {
  color: var(--theme-color);
  font-weight: 600;
}

.sidebar-submenu .nav-link.active {
  background-color: rgba(0, 0, 0, 0.08);
}