@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css);

:root {
  --primary: #802b47;
  --accent: #219ebc;
  --grad-left: rgba(128, 43, 71, 0.9);
  --grad-right: rgba(33, 158, 188, 0.8);
  --bg: #f4f7f9;
  --card-bg: #ffffff;
  --text: #2d3436;
  --text-light: #636e72;
  --onedx-font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body, html {
  height: 100%;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
}

#logo img {
  height: 2.2rem;
}

footer, footer.bg--dark {
  background: white;
  color: var(--text-light);
  font-size: 1.3rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 25px;
  margin-bottom: 50px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--onedx-font-family);
  text-transform: capitalize;
}

article.node.page > h2 {
  font-size: 2.1rem;
  color: var(--primary);
  border-left: 4px solid var(--primary);
  padding-left: 15px;
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
}

article.node.page > h2 a {
  color: var(--primary);
}

.card {
  background: var(--card-bg);
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  border: 1px solid #eee;
  font-family: var(--onedx-font-family);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
  border-color: var(--accent);
}

.card i {
  font-size: 4rem;
  color: var(--accent);
  margin-bottom: 15px;
  display: block;
}

.card h3 {
  font-size: 1.9rem;
  margin: 10px 0;
  color: var(--text);
  text-transform: capitalize;
  font-weight: bold;
}

.card p {
  font-size: 1.3rem;
  color: var(--text-light);
  line-height: 1.4;
  margin: 1.4rem 0;
}

a.card a, a.card:hover {
  text-decoration: none;
}

/* --- Admin Specific --- */
.admin-card i {
  color: var(--primary);
}

/* --- Hero Section --- */
/*-- change bg path as needed --*/
.hero {
  background: linear-gradient(135deg, var(--grad-left) 0%, var(--grad-right) 100%),
  url('../img/onedx-theme-2026-bg.avif') center;
  background-size: cover;
  padding: 80px 5%;
  color: white;
  text-align: center;
}

.hero h1 {
  font-size: 4rem;
  color: white;
  margin: 0 0 1rem 0;
  font-weight: bold;
}

.hero p {
  font-size: 1.8rem;
  opacity: 0.9;
  font-weight: 300;
}

/* --- Main menu styles --- */
#main-navigation .menu > li > a,
#main-navigation .menu > li > span {
  font-size: 1.4rem;
  font-weight: bold;
}

#main-navigation .menu > li:last-child > a:before {
    content: "\f011";
    font-family: "Font Awesome 6 Free";
    padding-right: 4px;
}

#main-navigation .menu > li.active > a,
#main-navigation .menu > li:hover > a,
#main-navigation .menu > li.active > span,
#main-navigation .menu > li:hover > span
{
  background: white !important;
  color: var(--primary) !important;
}

div.block-views-blockadmintools-block-1,
div.block-views-blockadmintools-block-2,
div.block-views-blockadmintools-block-1 .block,
div.block-views-blockadmintools-block-2 .block {
  margin-bottom: 0;
}

/* ---------------------------------- */
/* --- Login/Password page styles --- */
/* ---------------------------------- */

.login-container {
  display: flex;
  height: 100vh;
  width: 100%;
}

/* Left Side: Branding/Imagery */
.login-hero {
  flex: 1;
  background: linear-gradient(135deg, var(--grad-left) 0%, var(--grad-right) 100%),
  url('../img/login_bg_2026.avif') center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  color: white;
}

.hero-logo-box {
  margin-bottom: 30px;
}

.hero-logo-box img {
  width: 200px;
  filter: brightness(0) invert(1); /* Keeps logo white on dark background */
}

.login-hero h1 {
  font-size: 5rem;
  margin-bottom: 10px;
  color: white;
}
.login-hero p { font-size: 1.9rem; font-weight: 300; max-width: 500px; line-height: 1.6; }

/* Right Side: Login Form Area */
.login-form-area-container {
  min-height: 100vh;
  display: flex;
  overflow-y: auto;
  background: white;
  width: 450px;
  box-shadow: -10px 0 30px rgba(0,0,0,0.05);
}

.login-form-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  /*            justify-content: center;*/
  padding: 0 60px;
  margin: auto 0;
  position: relative;
}

.form-header {
  margin-bottom: 40px;
  text-align: center;
}

/* Fixed Right-Side Logo Display */
.form-header img {
  width: 150px;
  height: auto;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.form-header h2 {
  font-size: 2.5rem;
  color: var(--text);
  margin: 0;
}

.form-header p {
  color: #636e72;
  font-size: 1.5rem;
  margin-top: 5px;
}

.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.form-group label span { color: #d63031; }

.input-wrapper { position: relative; }
.input-wrapper i {
  position: absolute;
  left: 15px;
  top: 13px;
  color: #b2bec3;
  font-size: 1.6rem;
}

.input-wrapper-name i:before {
  content: "\f0f0";
}

.input-wrapper-pass i:before {
  content: "\f023";
}

.login-container input.form-text,
.login-container textarea.form-textarea,
.login-container select {
  color: var(--text);
}

.login-container input[type="text"],
.login-container input[type="password"] {
  width: 100%;
  padding: 9px 15px 9px 45px;
  border: 1px solid #dfe6e9;
  border-radius: 8px;
  font-size: 1.6rem;
  box-sizing: border-box;
  transition: border-color 0.3s;
  background-color: white;
}

.login-container .form-control {
  height: auto;
}

.login-container .form-control:focus {
  border-color: var(--primary);
  box-shadow: none;
  outline: none
}

.login-container .btn-primary {
  width: 100%;
  padding: 11px 14px;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
  margin-top: 10px;
}

.login-container .btn-primary:hover { background-color: #6a233b; }

.login-container nav.tabs {
  display: none;
}

.form-footer { margin-top: 25px; text-align: center; font-size: 1.5rem; }
.form-footer a { color: var(--accent); text-decoration: none; }

.footer-absolute {
  /*position: absolute;*/
  /*bottom: 20px;*/
  /*left: 0;*/
  /*right: 0;*/
  text-align: center;
  font-size: 1.2rem;
  color: #b2bec3;
  margin-top: 5rem;
}

@media (max-width: 900px) {
  .login-hero { display: none; }
  .login-form-area-container {
    width: 100%;
  }
  .login-form-area { padding: 40px; }
}