/* Tampa Bay Rants and Raves — Cassiopeia restyle */

:root {
  --rants-wood: #FBAC40;
  --rants-link: #2F617F;
  --rants-link-hover: #3E81A8;
  --rants-title: #306482;
  --rants-nav-text: #F2F5F7;
  --rants-text: #0F1419;
  --rants-muted: #41576C;
  --rants-active-tan: #e8c896;
  --rants-sheet: 1008px;
  --rants-header-h: 340px;
  --rants-fade-ms: 400ms;
}

html body.site {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px;
  color: var(--rants-text);
  background-color: var(--rants-wood) !important;
  background-image:
    url("../images/rants/Middle_texture.jpg"),
    url("../images/rants/Bottom_texture.jpg") !important;
  background-repeat: repeat-x, repeat !important;
  background-position: top left, top left !important;
  background-attachment: fixed, fixed !important;
}

body.site a,
body.site a:link,
body.site a:visited { color: var(--rants-link); text-decoration: none; }
body.site a:hover { color: var(--rants-link-hover); }

/* ===== Header + slideshow ===== */
body.site header.container-header.full-width,
body.site header.container-header {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  width: min(100% - 24px, var(--rants-sheet)) !important;
  max-width: var(--rants-sheet) !important;
  min-height: var(--rants-header-h) !important;
  margin: 16px auto 0 !important;
  padding: 0 !important;
  background-color: #c5d5e2 !important;
  background-image: none !important;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  position: relative;
  overflow: hidden;
}

body.site header.container-header .rants-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body.site header.container-header .rants-slide {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: 0;
  transition: opacity var(--rants-fade-ms, 400ms) ease-in-out;
}

body.site header.container-header .rants-slide.is-active {
  opacity: 1;
}

body.site header.container-header > .grid-child:not(.container-nav) {
  position: absolute !important;
  top: 48% !important;
  right: 20px !important;
  left: auto !important;
  width: auto !important;
  max-width: 70% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: 2;
}

body.site header.container-header .navbar-brand,
body.site header.container-header .brand-logo {
  background: transparent !important;
  text-align: right !important;
  display: block !important;
}

body.site header.container-header .brand-logo img,
body.site header.container-header .logo {
  display: none !important;
}

body.site header.container-header .site-title {
  display: block !important;
  white-space: normal !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: xx-large !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  text-shadow:
    0 0 3px rgba(15, 30, 45, 0.9),
    1px 1px 0 rgba(15, 30, 45, 0.65),
    -1px -1px 0 rgba(15, 30, 45, 0.4);
  margin: 0 !important;
}

/* Nav bar */
body.site header.container-header .container-nav {
  position: relative !important;
  z-index: 3;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  background: linear-gradient(#7f9eb3, #4a6a84) !important;
  border-top: 1px solid rgba(255,255,255,.25);
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

body.site header.container-header .mod-menu,
body.site header.container-header ul.nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  width: auto !important;
}

body.site header.container-header .mod-menu > li,
body.site header.container-header .nav-item {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}

body.site header.container-header .mod-menu a,
body.site header.container-header .nav-link {
  display: inline-block !important;
  width: auto !important;
  padding: 2px 14px !important;
  line-height: 21px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--rants-nav-text) !important;
  background: linear-gradient(#6f92ad, #3f6f93) !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
}

body.site header.container-header .mod-menu a:hover,
body.site header.container-header .nav-link:hover {
  color: #7F5305 !important;
  background: linear-gradient(#f0d9a8, #d4b06a) !important;
}

body.site header.container-header .mod-menu .active > a,
body.site header.container-header .nav-link.active,
body.site header.container-header li.active > a {
  color: #000 !important;
  background: linear-gradient(#f6e2b8, #e0c07a) !important;
}

body.site header.container-header .navbar-toggler,
body.site header.container-header .mod-menu__toggle {
  display: none !important;
}

/* ===== White content sheet ===== */
body.site .site-grid {
  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  grid-template-areas: none !important;
  grid-gap: 14px 18px !important;
  width: min(100% - 24px, var(--rants-sheet)) !important;
  max-width: var(--rants-sheet) !important;
  margin: 10px auto 24px !important;
  padding: 14px 16px 22px !important;
  background: #fff !important;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
}

body.site .site-grid > * {
  grid-area: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

body.site .site-grid > .container-sidebar-left {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.site .site-grid > .container-component {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body.site .site-grid > .container-sidebar-right,
body.site .site-grid > .container-banner,
body.site .site-grid > .container-top-a,
body.site .site-grid > .container-top-b,
body.site .site-grid > .container-bottom-a,
body.site .site-grid > .container-bottom-b {
  display: none !important;
}

body.site .container-sidebar-left,
body.site .container-component {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.site .container-sidebar-left .card,
body.site .container-sidebar-left .card-body,
body.site .container-sidebar-left .card-header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Left vertical menu */
body.site .container-sidebar-left .mod-menu,
body.site .container-sidebar-left ul.nav {
  display: block !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.site .container-sidebar-left .mod-menu > li,
body.site .container-sidebar-left .nav-item {
  display: block !important;
  width: 100% !important;
  margin: 0 0 2px !important;
}

body.site .container-sidebar-left .mod-menu a,
body.site .container-sidebar-left .nav-link {
  display: block !important;
  width: 100% !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--rants-link) !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  border-radius: 2px;
}

body.site .container-sidebar-left .mod-menu a:hover {
  background: rgba(232,200,150,.35) !important;
  color: var(--rants-link-hover) !important;
}

body.site .container-sidebar-left .mod-menu .active > a,
body.site .container-sidebar-left li.active > a,
body.site .container-sidebar-left .nav-link.active {
  background: var(--rants-active-tan) !important;
  color: #000 !important;
}

/* Article typography — slightly smaller */
body.site .container-component main {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 14.5px;
  line-height: 1.45;
  color: #000;
}

body.site .container-component .item-title,
body.site .container-component h1,
body.site .container-component h2.item-title {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #111 !important;
  margin: 0 0 6px !important;
}

body.site .container-component h3,
body.site .container-component .item-content h2,
body.site .container-component .com-content-article__body h2 {
  font-size: 16px !important;
}

body.site .container-component .item-content p,
body.site .container-component .com-content-article__body p {
  font-size: 14.5px;
  margin: 0 0 10px;
}

body.site .container-component .article-info,
body.site .container-component .icons,
body.site .container-component dl.article-info,
body.site .container-component .content_vote,
body.site .container-component .tags,
body.site .container-component details.article-info,
body.site .container-component .com-content-category-blog__info,
body.site .container-component .blog-item .article-info {
  display: none !important;
}

body.site .container-banner { display: none !important; }

body.site .container-footer.full-width,
body.site .container-footer {
  width: min(100% - 24px, var(--rants-sheet)) !important;
  max-width: var(--rants-sheet) !important;
  margin: 0 auto 24px !important;
  padding: 8px 14px !important;
  background: rgba(255,255,255,.88) !important;
  border-radius: 4px;
  text-align: center;
  font-size: 11px;
  color: var(--rants-muted);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* Contact form */
body.site .com-contact .page-header h1,
body.site .com-contact .page-header h2,
body.site .com-contact h3 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 18px !important;
  color: #111 !important;
}
body.site .com-contact .contact-misc {
  font-family: "Times New Roman", Times, serif;
  font-size: 14.5px;
  margin-bottom: 1rem;
}
body.site .com-contact form { max-width: 560px; }
body.site .com-contact label { font-weight: 700; color: #2F617F; font-size: 12px; }
body.site .com-contact .form-control,
body.site .com-contact input[type="text"],
body.site .com-contact input[type="email"],
body.site .com-contact textarea {
  border: 1px solid #9bb3c5;
  border-radius: 3px;
  padding: 6px 8px;
  font-size: 13px;
}
body.site .com-contact .btn,
body.site .com-contact button[type="submit"] {
  background: linear-gradient(#6f92ad, #3f6f93) !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 4px;
  padding: 5px 16px;
  font-size: 12px;
}
body.site .com-contact .btn:hover,
body.site .com-contact button[type="submit"]:hover {
  background: linear-gradient(#f0d9a8, #d4b06a) !important;
  color: #7F5305 !important;
}

@media (max-width: 900px) {
  body.site .site-grid {
    grid-template-columns: 1fr !important;
  }
  body.site .site-grid > .container-sidebar-left {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  body.site .site-grid > .container-component {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  body.site header.container-header {
    min-height: 220px !important;
  }
}

/* Force smaller readable body copy even when articles have inline font sizes */
body.site .container-component main,
body.site .container-component .item-content,
body.site .container-component .com-content-article__body,
body.site .container-component .blog-item {
  font-size: 14.5px !important;
  line-height: 1.45 !important;
}

body.site .container-component .item-content p,
body.site .container-component .item-content li,
body.site .container-component .item-content span,
body.site .container-component .item-content font,
body.site .container-component .com-content-article__body p,
body.site .container-component .com-content-article__body li,
body.site .container-component .com-content-article__body span,
body.site .container-component .com-content-article__body font {
  font-size: 14.5px !important;
  line-height: 1.45 !important;
}

body.site .container-component .item-content strong,
body.site .container-component .item-content b,
body.site .container-component .item-content em,
body.site .container-component .com-content-article__body strong,
body.site .container-component .com-content-article__body b,
body.site .container-component .com-content-article__body em {
  font-size: inherit !important;
}

body.site .container-component .item-title,
body.site .container-component h1,
body.site .container-component h2.item-title {
  font-size: 19px !important;
}

body.site .container-component .item-content h2,
body.site .container-component .item-content h3,
body.site .container-component .com-content-article__body h2,
body.site .container-component .com-content-article__body h3 {
  font-size: 16px !important;
  margin: 12px 0 6px !important;
}

/* Stronger white title over slideshow photos */
body.site header.container-header .site-title {
  color: #ffffff !important;
  font-size: xx-large !important;
  text-shadow:
    0 0 4px rgba(0,0,0,.85),
    1px 1px 0 rgba(0,0,0,.75),
    -1px -1px 0 rgba(0,0,0,.55),
    0 1px 2px rgba(0,0,0,.65) !important;

}

/* Brand text color lives on .navbar-brand in Cassiopeia, not always .site-title */
body.site header.container-header .navbar-brand,
body.site header.container-header .navbar-brand:link,
body.site header.container-header .navbar-brand:visited,
body.site header.container-header .navbar-brand:hover,
body.site header.container-header .navbar-brand:focus,
body.site header.container-header .navbar-brand .site-title,
body.site header.container-header a.navbar-brand,
body.site header.container-header .site-title {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: xx-large !important;
  font-weight: 700 !important;
  text-shadow:
    0 0 4px rgba(0,0,0,.9),
    1px 1px 0 rgba(0,0,0,.75),
    -1px -1px 0 rgba(0,0,0,.55),
    0 1px 2px rgba(0,0,0,.7) !important;
}

/* Footer */
body.site .container-footer {
  text-align: center;
  padding: 14px 12px 22px !important;
}

body.site .rants-footer-copy {
  margin: 0 !important;
  font-size: 11px !important;
  color: #333;
}

/* Sidebar login button */
body.site .container-sidebar-left .rants-sidebar-login {
  margin: 14px 0 0 !important;
  padding: 0 !important;
}

body.site .container-sidebar-left .rants-login-btn {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 7px 10px !important;
  border-radius: 4px !important;
  background: linear-gradient(to bottom, #5a7ea0, #2f4f6f) !important;
  color: #fff !important;
  font: 700 12px/1.2 Arial, Helvetica, sans-serif !important;
  text-decoration: none !important;
  border: 1px solid #243f57 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

body.site .container-sidebar-left .rants-login-btn:hover,
body.site .container-sidebar-left .rants-login-btn:focus {
  background: linear-gradient(to bottom, #6b91b5, #3a5f82) !important;
  color: #fff !important;
}

/* rants-header-title-final: match live site title */
body.site header.container-header .navbar-brand,
body.site header.container-header .navbar-brand:link,
body.site header.container-header .navbar-brand:visited,
body.site header.container-header .navbar-brand:hover,
body.site header.container-header .navbar-brand:focus,
body.site header.container-header .navbar-brand .site-title,
body.site header.container-header .site-title,
body.site header.container-header a.navbar-brand {
  color: #ffffff !important;
  font-size: xx-large !important;
}