/* =============================================================================
   Material Design layer — applies Material-style elevation, motion, rounded
   surfaces, and component treatment across both the public site and the
   WordPress admin screens this theme builds (Theme Options, User Access
   Roles, Notice Board, Accordion Tabs, Faculty, etc).

   This is intentionally additive: it reuses the theme's existing color
   variables (--navy, --saffron, etc. — see style.css) rather than
   introducing a separate Material color palette, so it stays in sync
   automatically with whatever an admin sets under Theme Options → Theme
   Colors. What it adds on top is Material's elevation system, motion,
   corner rounding, and component conventions (elevated buttons, filled
   cards, outlined form fields).
   ========================================================================= */

/* -----------------------------------------------------------------------
   1. Buttons — public site (.btn) and WordPress admin (.button)
   ----------------------------------------------------------------------- */
.btn, .button, .button-primary, .button-hero, input[type="submit"], button[type="submit"]{
  border-radius: var(--md-radius-xs);
  box-shadow: var(--md-elevation-1);
  transition: box-shadow var(--md-duration-short) var(--md-motion-standard),
              transform var(--md-duration-short) var(--md-motion-standard);
  position: relative;
  overflow: hidden;
  border-width: 0;
}
.btn:hover, .button:hover, .button-primary:hover{
  box-shadow: var(--md-elevation-2);
  transform: translateY(-1px);
}
.btn:active, .button:active, .button-primary:active{
  box-shadow: var(--md-elevation-1);
  transform: translateY(0);
}
.button-hero{ padding: 10px 20px !important; font-size: 14px; }

/* Ripple feedback — a small circular highlight that expands from the
   click point, the signature Material touch response. Triggered by
   assets/js/material-ripple.js on any element with .md-ripple. */
.md-ripple{ position: relative; overflow: hidden; }
.md-ripple__wave{
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,.45); pointer-events: none;
  animation: md-ripple-anim 550ms var(--md-motion-standard);
}
@keyframes md-ripple-anim{
  to{ transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .md-ripple__wave{ animation: none; display: none; }
}

/* -----------------------------------------------------------------------
   2. Cards — every existing "card" surface across the public site gets
   consistent Material elevation + rounding, reusing the class names
   already in place rather than restructuring any markup.
   ----------------------------------------------------------------------- */
.service-card,
.gdc-faculty__card,
.gdc-accordion,
.gdc-accordion__item,
.notice-board,
.gdc-tender-card,
.dept-section,
.dept-body,
.footer-column,
.gdc-options-panel{
  border-radius: var(--md-radius-md);
  box-shadow: var(--md-elevation-1);
  transition: box-shadow var(--md-duration-medium) var(--md-motion-standard),
              transform var(--md-duration-medium) var(--md-motion-standard);
}
.service-card:hover,
.gdc-faculty__card:hover,
.gdc-tender-card:hover{
  box-shadow: var(--md-elevation-3);
  transform: translateY(-3px);
}
.dept-hero, .dept-motto{ border-radius: var(--md-radius-md); box-shadow: var(--md-elevation-2); }

/* -----------------------------------------------------------------------
   3. Form fields — outlined Material-style text inputs, both on the
   public site (search boxes, etc.) and every WordPress admin form this
   theme renders.
   ----------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="number"], input[type="tel"], input[type="password"], input[type="date"],
select, textarea{
  border-radius: var(--md-radius-xs) !important;
  border: 1.5px solid var(--border) !important;
  transition: border-color var(--md-duration-short) var(--md-motion-standard),
              box-shadow var(--md-duration-short) var(--md-motion-standard);
  box-shadow: none !important;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus,
input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus,
input[type="password"]:focus, input[type="date"]:focus, select:focus, textarea:focus{
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(34,49,122,.15) !important;
  outline: none;
}

/* -----------------------------------------------------------------------
   4. Admin — Theme Options navigation rail (Material "navigation drawer"
   treatment: elevated surface, rounded selected-state indicator).
   ----------------------------------------------------------------------- */
.gdc-options-nav{
  border-radius: var(--md-radius-md) !important;
  box-shadow: var(--md-elevation-1) !important;
  border: none !important;
}
.gdc-options-nav__item{
  border-radius: var(--md-radius-xs) !important;
  border-left: none !important;
  margin: 2px 4px;
  transition: background var(--md-duration-short) var(--md-motion-standard);
}
.gdc-options-nav__item.is-active{
  background: rgba(34,49,122,.10) !important;
  border-left: none !important;
  font-weight: 600;
}
.gdc-options-panel{ border: none !important; }

/* -----------------------------------------------------------------------
   5. Admin — list tables (Notice Board / Accordion / Faculty / Roles)
   get a card-like elevated wrapper instead of the flat default WP table.
   ----------------------------------------------------------------------- */
table.widefat{
  border: none !important;
  border-radius: var(--md-radius-sm);
  overflow: hidden;
  box-shadow: var(--md-elevation-1);
}
table.widefat thead th{
  background: var(--navy) !important;
  color: #fff !important;
  font-weight: 600;
  border: none !important;
}
table.widefat tbody tr:hover{ background: rgba(34,49,122,.04); }

/* -----------------------------------------------------------------------
   6. Admin — flash notices as Material "snackbar"-style banners.
   ----------------------------------------------------------------------- */
.notice, .notice-success, .notice-error, .notice-warning, .notice-info{
  border-left-width: 0 !important;
  border-radius: var(--md-radius-xs) !important;
  box-shadow: var(--md-elevation-1) !important;
}

/* -----------------------------------------------------------------------
   7. Public site — header gets Material "app bar" elevation, separating
   it visually from the page content below.
   ----------------------------------------------------------------------- */
.site-header{ box-shadow: var(--md-elevation-1); }
.masthead{ box-shadow: var(--md-elevation-2); }