/* ==========================================================================
   HempMS — light, happy green/blue theme for MapleBit (Bootstrap 4)
   ========================================================================== */

@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter-400.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/inter-500.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter-600.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/inter-700.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/inter-800.woff2') format('woff2'); }
@font-face{ font-family:'Baloo 2'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/baloo2-700.woff2') format('woff2'); }
@font-face{ font-family:'Baloo 2'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/baloo2-800.woff2') format('woff2'); }

:root{
  --sky:           #2f9fe0;
  --sky-deep:      #1c7fc2;
  --green:         #2fa036;
  --green-deep:    #1f7a26;
  --lime:          #6dc82e;
  --white:         #ffffff;
  --cream:         #f5faf3;
  --surface:       #ffffff;
  --surface-2:     #eef7ec;
  --border:        #dcebd8;
  --text:          #1c2b1e;
  --text-dim:      #4c5f4e;
  --text-faint:    #7c8f7e;
  --radius:        14px;
  --font:          'Inter', -apple-system, sans-serif;
  --font-display:  'Baloo 2', 'Inter', sans-serif;
}

html, body{
  color: var(--text) !important;
  font-family: var(--font);
  padding-top: 0 !important;
  cursor: url("/assets/hemp/maplestory.cur"), auto;
}
a, a *, button, .btn, input[type="submit"], input[type="button"], [role="button"], .nav-link, .page-link{
  /* static fallback -- JS (cursor-anim.js) swaps this to a 4-frame animated cursor on hover */
  cursor: url("/assets/hemp/link_cur1.cur"), pointer;
}
body{
  background-image: url("/assets/hemp/background.png") !important;
  background-position: center top !important;
  background-repeat: repeat-y !important;
  background-size: 100% auto !important;
  background-attachment: fixed !important;
}
@media (max-width: 767.98px){
  /* fixed backgrounds repaint on every scroll frame on mobile browsers -- causes jank */
  body{ background-attachment: scroll !important; }
}

a{ color: var(--sky-deep); }
a:hover{ color: var(--green-deep); text-decoration: none; }
h1,h2,h3,h4,h5,.h2{ font-family: var(--font-display); color: var(--text); }
hr{ border-color: var(--border); }
::selection{ background: var(--lime); color: #fff; }

/* ---- top hero / brand strip (logo falls directly onto the page background) ---- */
.hm-banner{
  position: relative;
  max-width: 1170px;
  margin: 24px auto 0;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.hm-banner-logo{ max-width: 380px; width: 60%; height: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.hm-rates-badge{
  position: absolute; right: 16px; bottom: 16px;
  background: #fff;
  color: var(--green-deep); font-weight: 800; font-size: 12px;
  padding: 7px 14px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
@media (max-width: 600px){
  .hm-banner{ min-height: 150px; }
  .hm-rates-badge{ position: static; display: block; margin: 10px auto 0; width: fit-content; }
}

/* ---- named text colors ---- */
.character_name{ color: var(--text) !important; text-decoration: none !important; font-weight: 700; }
.donor_name{ color: #e08a2c !important; font-weight: 700; }
.hm-level{ color: var(--text) !important; font-weight: 700; }
.hm-status-up{ color: var(--green) !important; }
.hm-status-down{ color: #c0392b !important; }

/* ---- navbar: rectangle matching the page container width, flush against the content below ---- */
.hm-navbar{
  background: var(--green) !important;
  border-radius: var(--radius);
  padding: 6px 18px;
  margin: 0 0 0;
  width: 100%;
  box-shadow: 0 4px 14px rgba(28,80,40,.18);
}
.hm-navbar .navbar-brand{
  font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #ffffff !important;
  display: flex; align-items: center; gap: 8px;
}
.hm-navbar .nav-link{
  color: #ffffff !important;
  font-weight: 600; font-size: 12.5px;
  padding: 8px 14px !important;
  border-radius: 6px;
  transition: background .15s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.hm-navbar .nav-link i{ font-size: 12px; }
.hm-navbar .nav-link:hover{ background: rgba(255,255,255,.18); color: #fff !important; }
.hm-navbar .dropdown-menu{
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 28px rgba(28,80,40,.18);
}
.hm-navbar .dropdown-item{ color: var(--text-dim); }
.hm-navbar .dropdown-item:hover{ background: var(--surface-2); color: var(--green-deep); }
.navbar-toggler{ border-color: rgba(255,255,255,.4) !important; }
@media (max-width: 991.98px){
  .hm-navbar{ padding: 6px 16px; }
  /* collapsed menu items are tap targets now, not hover targets -- give them room */
  .hm-navbar .nav-link{ padding: 11px 14px !important; font-size: 14px; }
}
.hm-navbar .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ---- cards ---- */
.card{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text);
  box-shadow: 0 8px 22px rgba(28,80,40,.10);
}
.card > .card{ box-shadow: none; }
.card-header{
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border) !important;
  font-family: var(--font-display); font-weight: 700; color: var(--green) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.card-body{ color: var(--text-dim); }

/* outer wrapping card (header.php's .card.card-body around sidebar+content) should be transparent */
body > .container > .card.card-body{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* main content column (news/events/rankings/gm blogs, and every other page's
   raw content) needs its own white panel -- these templates don't wrap
   themselves in .card at all */
.col-md-9{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 8px 22px rgba(28,80,40,.10);
}
@media (max-width: 767.98px){
  /* sidebar (.col-md-3) sits full-width above .col-md-9 once stacked -- needs breathing room */
  .col-md-3{ margin-bottom: 16px; }
  .col-md-9{ padding: 14px; }
}

.list-group-item{
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
}
.list-group-item a{ color: var(--text-dim); }
.list-group-item:hover{ background: var(--surface-2) !important; }

/* ---- buttons ---- */
.btn-primary{
  background: var(--green) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.btn-primary:hover{ background: var(--green-deep) !important; }
.hm-btn-wood{
  background: #945c12 !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  margin-top: 8px;
}
.hm-btn-wood:hover{ background: #b98f57 !important; color: #ffffff !important; }
.btn-secondary, .btn-default{
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.btn-info{
  background: linear-gradient(135deg, var(--sky), var(--sky-deep)) !important;
  border: none !important; color: #fff !important; font-weight: 700 !important;
}
.btn-danger{ background: #d9534f !important; border: none !important; }

/* ---- forms ---- */
.form-control{
  background: var(--cream) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
}
.form-control:focus{
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--sky) !important;
  box-shadow: 0 0 0 3px rgba(47,159,224,.2) !important;
}
.form-control::placeholder{ color: var(--text-faint); }
label{ color: var(--text-dim); }

/* ---- tables ---- */
.table{ color: var(--text-dim); }
.table thead th{ color: var(--green); border-color: var(--border) !important; font-family: var(--font-display); }
.table td, .table th{ border-color: var(--border) !important; }
.table-hover tbody tr:hover{ background: var(--surface-2); color: var(--text); }
.table-striped tbody tr:nth-of-type(odd){ background: rgba(47,159,224,.04); }

/* ---- alerts ---- */
.alert{ border-radius: 10px; border: 1px solid var(--border); }
.alert-success{ background: rgba(111,200,46,.14); color: var(--green-deep); border-color: rgba(111,200,46,.3); }
.alert-danger{ background: rgba(217,83,79,.12); color: #b3423e; }
.alert-info{ background: rgba(47,159,224,.12); color: var(--sky-deep); }

/* ---- badges / labels ---- */
.badge, .label{ border-radius: 999px; }
.badge-primary, .label-primary{ background: var(--green) !important; color: #fff !important; }
.badge-secondary{ background: #4fa600 !important; color: #fff !important; }
.page-link{ color: #4fa600 !important; }

/* ---- footer ---- */
footer{
  border-top: 1px solid rgba(255,255,255,.5);
  margin-top: 40px;
  padding: 20px 0;
  color: #365a3a !important;
}
footer a{ color: var(--green-deep); }
footer p{ color: #365a3a !important; }

.hm-server-info{ font-size: 13px; }
.hm-credits{ opacity: .5; font-size: 70%; text-align: right; margin-top: auto; }
.hm-credits a{ color: inherit; }
.hm-rank-job-icon{ width: 24px; height: 24px; object-fit: contain; }
.hm-rank-guild{ font-size: 12px; color: var(--text-faint); }

/* ---- character info card ---- */
.hm-charcard-head{ display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.hm-charcard-name{ font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--green); }
.hm-charcard-guild{ font-style: italic; color: var(--text-faint); font-size: 12px; margin-top: -2px; }
.hm-charcard-level{ font-weight: 800; font-size: 16px; color: var(--text); white-space: nowrap; text-align: right; }
.hm-charcard-job-icon{ width: 28px; height: 28px; object-fit: contain; }
.hm-charcard-stats{ margin-top: 14px; }
.hm-stat-box{ border: 2px solid var(--green); border-radius: var(--radius); padding: 12px 16px; height: 100%; }
.hm-stat-box-title{ font-family: var(--font-display); font-weight: 700; color: var(--green); margin-bottom: 8px; }
.hm-charcard-footer{ text-align: right; font-style: italic; color: var(--text-faint); font-size: 12px; margin-top: 12px; }
@media (max-width: 480px){
  /* long character names + level badge no longer fit on one line at very small widths */
  .hm-charcard-head{ flex-wrap: wrap; gap: 6px; }
  .hm-charcard-level{ text-align: left; }
}
.hm-nav-avatar{ width: 24px !important; height: 24px !important; object-fit: cover; }
.hm-profile-avatar{ width: 80px !important; height: 80px !important; object-fit: cover; }

/* ---- homepage top-5 ranking widget avatar: fixed width, height floor below which it distorts ---- */
.rank_img{ width: 78px !important; min-height: 43px; height: auto; }

/* ---- downloads page ---- */
.hm-dl-main{ width: 400px; height: 200px; object-fit: cover; max-width: 100%; border-radius: var(--radius); }
.hm-dl-mirrors{ display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.hm-dl-mirror{ width: 150px; height: auto; border-radius: var(--radius); box-shadow: 0 8px 22px rgba(28,80,40,.10); }

/* ---- server supporters (donor thank-you cloud) ---- */
.hm-supporters{
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}
.hm-supporters-img{ max-width: 260px; width: 70%; height: auto; }
.hm-supporter{
  position: absolute;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--green-deep);
}

/* ---- custom-hint date picker (register form) ---- */
.hm-datepicker{
  position: relative;
  display: flex;
  align-items: stretch;
}
.hm-datepicker.nopadding{ padding: 0; }
.hm-datepicker .noborder{ border: none; }
.hm-datepicker input[type="date"]::-webkit-calendar-picker-indicator,
.hm-datepicker input[type="date"]::-webkit-inner-spin-button{
  display: none;
  -webkit-appearance: none;
}
.hm-datepicker-icon{
  cursor: pointer;
  background: #fff;
}
.hm-supporter-0{ top: 4%;  left: 6%; }
.hm-supporter-1{ top: 0;   left: 55%; }
.hm-supporter-2{ top: 16%; left: 32%; }
.hm-supporter-3{ top: 34%; left: 2%; }
.hm-supporter-4{ top: 40%; right: 4%; }
.hm-supporter-5{ top: 66%; left: 10%; }
.hm-supporter-6{ top: 72%; left: 38%; }
.hm-supporter-7{ top: 66%; right: 8%; }
.hm-supporter-8{ top: 90%; left: 22%; }
.hm-supporter-9{ top: 90%; right: 20%; }
@media (max-width: 767.98px){
  .hm-supporters{ min-height: 260px; }
  .hm-supporter{ font-size: 12px; }
}

/* ---- notice marquee ---- */
.hm-notice{
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 27px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  z-index: 2;
  text-align: center;
  margin-bottom: 10px;
  border-radius: 0;
  white-space: nowrap;
}
.hm-notice_marquee{
  display: inline-block;
  width: 100%;
}
.hm-notice_text{
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  padding-left: 100%;
  animation: marquee-scroll var(--marquee-duration, 20s) linear infinite;
  margin-top: 0;
  font-weight: normal;
  font-family: arial;
  letter-spacing: 0px;
  font-size: 15px;
  color: #ffff22;
}
.hm-notice_text a{ color: #ffff22; text-decoration: underline; }
.hm-notice:hover .hm-notice_text{ animation-play-state: paused; }
@keyframes marquee-scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}
@media (max-width: 600px){
  .hm-notice{ height: 24px; }
  .hm-notice_text{ font-size: 12.5px; }
}

/* ---- misc ---- */
.card-header b, .card-body b{ color: var(--text); }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--cream); }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 999px; }