/*
 * NI_2015 site - Cassiopeia user.css
 * Translated from protostar user.css customizations.
 * Upload to: /media/templates/site/cassiopeia/css/user.css
 */

/* =============================================
   COLOR OVERRIDES (via CSS variables)
   Replaces protostar's #08c blue theme
   ============================================= */
:root {
  /* Link colors matching protostar's #08c theme */
  --cassiopeia-color-link: #0088cc;
  --cassiopeia-color-hover: #005580;
  --link-color: #0088cc;
  --link-color-rgb: 0, 136, 204;
  --link-hover-color: #005580;
  --link-hover-color-rgb: 0, 85, 128;
  --template-special-color: #004466;
  /* Note: --cassiopeia-color-primary intentionally NOT overridden here;
     the header background is cleared directly on .container-header below. */
}

/* =============================================
   BODY & PAGE BACKGROUND
   Protostar: body.site had padding, bg-color, bg-image, border-top
   ============================================= */
body.site {
  border-top: 3px solid #0088cc;
  padding: 20px;
  background-color: #f4f6f7;
  background-image: url('http://ni.kittmaster.com/images/NI-Background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-size: 15px;
  line-height: 22px;
}

/* =============================================
   LINK COLORS
   Protostar: a { color: #08c } a:hover { color: #005580 }
   ============================================= */
a {
  color: #0088cc;
}
a:hover,
a:focus {
  color: #005580;
}

/* =============================================
   LOGO / BRAND
   Protostar: .brand { color: #004466 } .brand:hover { color: #08c }
   Cassiopeia equivalent: .navbar-brand .brand-logo
   ============================================= */
.navbar-brand .brand-logo {
  color: #004466;
  transition: color .5s linear;
}
.navbar-brand .brand-logo:hover {
  color: #0088cc;
  text-decoration: none;
}

/* =============================================
   CONTAINER WIDTH
   Protostar: .container { max-width: 1140px }
   ============================================= */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 1140px;
}

/* =============================================
   MAIN CONTENT BOX
   Protostar: .body .container { background: #efefef; border-radius: 10px; padding: 20px; border; box-shadow }
   Cassiopeia equivalent: .container-component (and children)
   ============================================= */
.container-component {
  background-color: #efefef;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

/* =============================================
   HEADINGS
   Protostar had custom font sizes/line-heights
   ============================================= */
h1, h2, h3, h4, h5, h6 {
  margin: 12px 0;
  word-wrap: break-word;
}
h1 { font-size: 26px; line-height: 28px; }
h2 { font-size: 22px; line-height: 24px; }
h3 { font-size: 18px; line-height: 20px; }
h4 { font-size: 14px; line-height: 16px; }
h5 { font-size: 13px; line-height: 15px; }
h6 { font-size: 12px; line-height: 14px; }

/* =============================================
   MODULE HEADER
   Protostar: .module-header styling
   ============================================= */
.module-header {
  padding-bottom: 17px;
  margin: 20px 0 18px 0;
  border-bottom: 1px solid #eeeeee;
}

/* =============================================
   WELL (card-like boxes)
   Protostar added border-radius: 10px to .well
   Cassiopeia uses .card - match both
   ============================================= */
.well {
  border-radius: 10px;
}
.card {
  border-radius: 10px;
}

/* =============================================
   IMAGES
   Protostar: img { border-radius: 3px }
   ============================================= */
img {
  border-radius: 3px;
}
#map_canvas img,
.google-maps img,
.gm-style img {
  border-radius: 0;
}

/* =============================================
   PARAGRAPH & LIST TEXT
   ============================================= */
p, li {
  word-wrap: break-word;
}

/* =============================================
   HEADER / NAVIGATION AREA
   Cassiopeia sets background-color: var(--cassiopeia-color-primary) on .container-header
   which produces the dark navy "blue box". Clear it so the body background image shows through.
   ============================================= */
header.container-header {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  margin-bottom: 10px;
}

/* =============================================
   NAV BAR BACKING STRIP
   .container-nav is a .grid-child (max-width: 1320px; margin: auto), which
   cassiopeia aligns with the content box below. Putting the dark glass backing
   directly on it makes the strip terminate at the same left/right edges as the
   article area, rather than bleeding to the viewport edges.
   ============================================= */
header.container-header .container-nav {
  background: rgba(0, 10, 25, 0.62);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 136, 204, 0.45);
  border-radius: 8px;
  padding: 6px 14px !important;
}

/* =============================================
   NAV PILL BUTTONS
   Replicates protostar's blue rounded hover-button style.
   ============================================= */

/* Remove cassiopeia's default ::after underline indicator */
header.container-header .mod-menu > li::after,
header.container-header .mod-menu > li > a::after {
  display: none !important;
}

/* Base pill link — white text on dark glass strip */
header.container-header .mod-menu.nav-pills > li.nav-item > a,
header.container-header .mod-menu.nav-pills > li.nav-item > span {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: background-color .2s ease, text-shadow .2s ease;
  background-color: transparent;
}

/* Hover — blue gradient pill */
header.container-header .mod-menu.nav-pills > li.nav-item > a:hover,
header.container-header .mod-menu.nav-pills > li.nav-item > a:focus {
  color: #fff;
  text-shadow: none;
  text-decoration: none;
  background-color: #0081c2;
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
}

/* Active / current page — blue pill always on */
header.container-header .mod-menu.nav-pills > li.nav-item.active > a,
header.container-header .mod-menu.nav-pills > li.nav-item.current > a,
header.container-header .mod-menu.nav-pills > li.nav-item.default.current > a {
  color: #fff;
  text-shadow: none;
  background-color: #0081c2;
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
}

/* Mobile hamburger toggle */
header.container-header .navbar-toggler {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

/* =============================================
   LOGO / BANNER IMAGE TREATMENT
   Adds rounded corners + horizontal edge fade on the 2024+ banner image.
   The mask fades the left/right edges so it blends into the background.
   ============================================= */
.navbar-brand .brand-logo img {
  border-radius: 10px;
  display: block;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
}

/* =============================================
   CONTENT TOP SPACING
   Cassiopeia makes .container-component a flex column and applies
   margin-top: 1em to each child (template rule .container-component > * + *).
   With the empty #system-message-container as the first child, <main> is the
   "next sibling" and inherits that 1em margin — dead space above the article.
   Zero it so content sits right under the box padding. System messages still
   render (with their own spacing) in #system-message-container above <main>,
   so message display and the aria-live region are unaffected.
   ============================================= */
.container-component > main {
  margin-top: 0 !important;
}

/* =============================================
   LOGIN / USER FORMS
   com_users renders inputs as full-width .form-control, which stretches them
   across the entire content box. Constrain the user-view forms to a readable
   width. Scoped to com_users views so search/other forms are unaffected.
   ============================================= */
body.com-users main form,
body.com_users main form,
body.view-login main form,
body.view-registration main form,
body.view-remind main form,
body.view-reset main form,
body.view-profile main form {
  max-width: 480px;
}

/* Constrain the "Forgot your password / username" link list to match.
   Scoped under main so it can't hit the header menu (which also uses .nav). */
body.view-login main .list-group,
body.view-login main ul.nav,
body.view-login main .com-users-login__links {
  max-width: 480px;
}

/* =============================================
   BREADCRUMB
   ============================================= */
.breadcrumb {
  margin: 10px 0;
}
.breadcrumb > li,
.breadcrumb > .active {
  color: #515151;
}

/* =============================================
   ARTICLE / CONTENT ITEM SPACING
   Protostar: .item-title, .item-content, .item-subtitle margins
   ============================================= */
.item-title     { margin-bottom: 9px; }
.item-content   { margin: 18px 0; }
.item-subtitle  { margin-bottom: 9px; }
.list-item-title    { margin-bottom: 9px; }
.list-item-content  { margin: 18px 0; }
.list-item-subtitle { margin-bottom: 9px; }

.pull-right.item-image { margin: 0 0 18px 20px; }
.pull-left.item-image  { margin: 0 20px 18px 0; }

/* =============================================
   IMAGE CAPTIONS
   ============================================= */
.img_caption .left  { float: left; margin-right: 1em; }
.img_caption .right { float: right; margin-left: 1em; }
.img_caption .left p  { clear: left; text-align: center; }
.img_caption .right p { clear: right; text-align: center; }
.img_caption { text-align: center !important; }
.img_caption.none { margin-left: auto; margin-right: auto; }

figure { display: table; }
figure.pull-center,
img.pull-center { margin-left: auto; margin-right: auto; }
figcaption { display: table-caption; caption-side: bottom; }

/* =============================================
   SEARCH HIGHLIGHT
   ============================================= */
.search span.highlight {
  background-color: #ffffcc;
  font-weight: bold;
  padding: 1px 4px;
}

/* =============================================
   CONTENT LINKS / ITEMS MORE
   ============================================= */
.items-more,
.content-links { padding: 15px 0; }

/* =============================================
   ARTICLE INDEX (table of contents)
   ============================================= */
.article-index { margin: 0 0 10px 10px; }

/* =============================================
   MOBILE RESPONSIVE
   Protostar: various @media blocks preserved
   ============================================= */
@media (max-width: 480px) {
  .item-info > span { display: block; }
  .blog-item .pull-right.item-image { margin: 0 0 18px 0; }
  .blog-item .pull-left.item-image  { margin: 0 0 18px 0; float: none; }
}

@media (max-width: 768px) {
  body.site { padding: 10px; }
  .container-component { padding: 10px; }
}