@charset "UTF-8";
.content-panel .links ul li .free-img, .content-panel .article .free-img, .news-list-link .free, .article-list .free-img {
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
  margin-left: 5px;
  width: 14px;
  height: 14px;
  border: none;
}

html, body {
  overflow-x: hidden;
  width: 100%;
}

body {
  background-color: #FFFFFF;
  line-height: 1.4em;
  font-size: 14px;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", "Roboto", sans-serif;
  max-width: 100%;
  min-width: 320px;
}

.oldNav, .logo, #user2.oldNav, .navbar-toggler, #news-search {
  display: none;
}

.newNav {
  background: white;
}

.red {
  color: #BC4932;
}

.blue {
  color: #580023;
}

.green {
  color: green;
}

.show {
  display: normal;
}

.hide {
  display: none;
}

.break {
  flex-basis: 100%;
  height: 0;
}

.uppercase {
  text-transform: uppercase;
}

.frac {
  font-feature-settings: "frac";
}

.container, .container-fluid {
  clear: both;
  background-color: #fff;
  min-width: 320px;
  width: 100%;
  padding-top: 2px;
  overflow: visible;
  overflow-x: initial;
  overflow-y: visible;
  padding-bottom: 0.5em;
}
.container.nav-container, .container-fluid.nav-container {
  padding-inline: 8px 5px;
}
.container.header, .container-fluid.header {
  padding-inline: 6px;
}
.container .row .tab, .container-fluid .row .tab {
  max-width: inherit;
  flex-wrap: inherit;
  display: inherit;
  clear: both;
}
.container .row .tab2, .container-fluid .row .tab2 {
  display: none;
}
.container .inner-container, .container-fluid .inner-container {
  margin: 0;
}
.container .inner-container .flex-container, .container-fluid .inner-container .flex-container {
  flex-grow: 1;
  position: relative;
}

.container-fluid {
  padding-inline: 7px;
}

.main-panel > .row {
  margin-left: -7px;
  margin-right: -7px;
}
.main-panel > .row > [class*=col-], .main-panel > .row > .col {
  padding-left: 7px;
  padding-right: 7px;
}

header {
  width: 100%;
}
header .main-logo {
  width: 100%;
  border: solid 0px blue;
  margin: 10px 0 0 0;
}

.nav-container {
  height: 60px;
}

nav.oldNav {
  position: relative;
}

.nav_button {
  display: inline-block;
  width: 35px;
  height: 40px;
  margin-top: 10px;
  cursor: pointer;
}
.nav_button svg {
  width: 40px;
}
.nav_button .user {
  fill: #606161;
}
.nav_button .translate {
  position: relative;
}
.nav_button .search path {
  fill: #606161;
}
.nav_button .world {
  width: 34px;
  stroke: #606161;
  margin-top: 3px;
}
@media screen and (max-width: 370px) {
  .nav_button {
    width: 35px;
    height: 35px;
  }
  .nav_button svg {
    width: 35px;
  }
  .nav_button .world {
    width: 30px;
    margin-top: 3px;
  }
}

.nav_heading {
  width: 40%;
  margin: 0 5px;
  flex-grow: 1;
  padding-top: 2px;
}
.nav_heading h1 a {
  display: inline-block;
  width: 100%;
  text-align: center;
}
.nav_heading h1 a img {
  margin-inline: auto;
  height: 17px;
}

#nav {
  margin-bottom: 0;
  padding-left: 3px !important;
}
#nav ul {
  display: flex;
  margin-right: 20px;
  padding: 4px 0px 1px 0;
}
#nav ul li {
  font-family: "AvenirLT-Black";
}
#nav ul li a, #nav ul li a:link, #nav ul li a:active, #nav ul li a:visited, #nav ul li a:hover {
  color: #580023;
  text-transform: uppercase;
  padding: 3px 6px 4px 6px;
  line-height: 23px;
  text-decoration: none;
  font-size: 12px;
}
#nav ul li a.active {
  border-bottom: 2px solid #580023;
}
#nav ul li a:hover {
  border-bottom: 2px solid #CC6B48;
}

#google_translate_element_new {
  z-index: 0;
  position: relative;
  opacity: 0;
  margin-left: -53px;
  margin-top: -40px;
  padding-top: 0px;
}
#google_translate_element_new select {
  width: 100px;
  cursor: pointer;
}

.goog-te-combo {
  height: 38px;
  width: 128px;
  cursor: pointer;
}

.search-inline-wrapper {
  position: relative;
  float: right;
  width: 200px;
  margin-right: 0px;
  z-index: 9999;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.search-inline-wrapper.is-visible {
  opacity: 1;
  visibility: visible;
}
.search-inline-wrapper #txtSearch {
  position: absolute;
  top: -5px;
  right: 5px;
  font-size: 80%;
  font-style: italic;
  display: block !important;
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  padding: 6px 35px 6px 12px;
  border: 1px solid #000;
  border-radius: 4px;
  outline: none;
  background-color: #fff !important;
  color: #000 !important;
}
.search-inline-wrapper #txtSearch::placeholder {
  color: #ccc;
}
.search-inline-wrapper #btnSubmitSearch {
  position: absolute;
  right: 10px;
  top: 11px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin: 0;
  z-index: 10000;
  transition: color 0.2s ease;
}
.search-inline-wrapper #btnSubmitSearch:hover {
  color: #000;
}

mark.search-highlight {
  background-color: #ffeb3b; /* Or your brand's highlight color */
  color: #000;
  font-weight: bold;
  padding: 0 2px;
}

h4.list-title {
  font-weight: bold;
  margin-block: 2px 15px;
}

.search-index .feature-list:not(:last-child) {
  padding-bottom: 0.5em;
  border-bottom: 1px solid #BC4932;
  margin-bottom: 12px;
}

.headline-bar {
  margin-bottom: 1.2rem;
}
.headline-bar .title h2 {
  margin-bottom: 0;
  height: 25px;
  font-weight: bold;
  width: 6rem;
}
.headline-bar .title h2.wide {
  width: 7rem;
}
.headline-bar .title h2.wider {
  width: 9rem;
}
.headline-bar .title a {
  color: #BC4932;
}

h2 {
  display: inline-block;
  background-color: #580023;
  color: white;
  text-transform: uppercase;
  font-size: 100%;
  padding: 6px 5px;
  text-align: center;
  width: 6rem;
}
h2.selected {
  cursor: pointer;
}
h2.unselected {
  background-color: #CC6B48;
  cursor: pointer;
}
h2.unselected:hover {
  background-color: #580023;
}
h2.narrow {
  width: 4rem;
}

h4 {
  font-family: "Roboto";
}

.category {
  display: inline-block;
  background-color: #580023;
  color: white;
  text-transform: uppercase;
  font-size: 80%;
  padding: 3px 6px;
  margin-bottom: 4px;
  width: 6rem;
  text-align: center;
  font-weight: bold;
  font-family: "AvenirLT-Black";
}

.category-wide {
  width: 100%;
}

.headline-bar, .headline-panel {
  position: relative;
  font-size: 80%;
}
.headline-bar .title, .headline-panel .title {
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.headline-bar .title-underline, .headline-panel .title-underline {
  position: absolute;
  top: 24px;
  width: 100%;
  border-bottom: solid 3px #580023;
}
.headline-bar .headlineTitleText, .headline-panel .headlineTitleText {
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
  color: #580023;
  line-height: 1.5em;
}
.headline-bar a, .headline-bar a:link, .headline-bar a:active, .headline-bar a:visited, .headline-bar a:hover, .headline-panel a, .headline-panel a:link, .headline-panel a:active, .headline-panel a:visited, .headline-panel a:hover {
  font-weight: bold;
  cursor: pointer;
}

.headline-panel {
  display: flex;
  font-weight: bold;
  width: 100%;
}
.headline-panel .tabs {
  flex-grow: 1;
  display: flex;
}
.headline-panel .title {
  display: flex;
  align-items: baseline;
  width: 100%;
  gap: 10px;
  padding: 0;
  margin-bottom: 5px;
  background-color: #fff;
  margin-right: 10px;
}
.headline-panel .title > div {
  display: flex;
  justify-content: flex-start;
}
.headline-panel .title > div:not(:last-child) {
  flex: 0 1 auto; /* 1. Stops artificial expansion, allows shrinking if screen is tiny */
  padding-right: 0.5rem;
}
.headline-panel .title h2 {
  margin-bottom: 0;
  height: 24px;
  font-weight: bold;
  white-space: nowrap;
}
.headline-panel .title h2.wide {
  width: 7rem;
}
.headline-panel .title h2.wider {
  width: 9rem;
}
.headline-panel .title ul.links {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.headline-panel .title ul.links li {
  cursor: pointer;
  color: #BC4932 !important;
  white-space: nowrap;
}
.headline-panel .title ul.links li a {
  color: #BC4932 !important;
  margin-top: 3px;
  white-space: nowrap;
}
.headline-panel .title ul.links li a:hover {
  text-decoration: underline;
}
.headline-panel .buttons {
  width: 40%;
  font-size: 90%;
}
.headline-panel .buttons a, .headline-panel .buttons a:link, .headline-panel .buttons a:active, .headline-panel .buttons a:visited, .headline-panel .buttons a:hover {
  color: #fff;
}
.headline-panel .buttons .button {
  position: relative;
  text-transform: uppercase;
  color: #fff;
  padding: 1px 6px;
  height: 21px;
  margin-bottom: 5px;
}
.headline-panel .buttons .button .label {
  position: absolute;
  left: 6px;
  top: 1px;
}

/* --- MODERN NEWS PAGE LAYOUT (MOBILE FIRST) --- */
.news-page-layout {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: 1.5rem;
  margin: 0 auto;
  width: 100%;
}

/* Replaces legacy <br> tag for banner spacing */
.banner-spacer {
  height: 1.5rem;
}

.news-list, .feature-list {
  font-size: 90%;
}

.article-list .searchTitle {
  margin-bottom: 0.5em;
}
.article-list .browseAll {
  margin-top: 1em;
}
.article-list .paging {
  margin-block: 1em;
}
.article-list .paging .pageLink {
  border: 1px solid #580023;
  color: #580023;
  padding: 1px 7px;
  margin-right: 10px;
  margin-bottom: 2px;
  display: inline-block;
  cursor: pointer;
  min-width: 24px;
  text-align: center;
}
.article-list .paging .pageLink:hover {
  color: #fff;
  background-color: #BC4932;
}
.article-list .paging .pageLink.selected {
  color: #fff;
  background-color: #CC6B48;
  cursor: default;
}
.article-list .free-img {
  vertical-align: baseline;
  margin-top: 2px;
}
.article-list .banner {
  margin-block: 1rem !important;
}
.article-list .item {
  margin-bottom: 1em;
}

.news-list-date {
  clear: both;
  line-height: 2rem;
  color: #BC4932;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.news-list-link {
  clear: both;
  font-size: 90%;
}
.news-list-link .date {
  margin-top: 0.5rem;
  line-height: 2rem;
  color: #BC4932;
  font-weight: bold;
}
.news-list-link a, .news-list-link a:link, .news-list-link a:active, .news-list-link a:visited, .news-list-link a:hover {
  color: #580023 !important;
  line-height: 1.4rem;
  font-weight: bold;
}
.news-list-link .flag {
  float: left;
  margin-right: 8px;
  width: 22px;
  margin-top: 3px;
}
.news-list-link .article-content {
  overflow: hidden;
}
.news-list-link .article-content .intro {
  line-height: 1.1rem;
}
.news-list-link .news-list-image {
  float: left;
  margin-right: 0.6rem;
  margin-bottom: 1.5rem;
}
.news-list-link.showImage a {
  line-height: 1.4em;
}
.news-list-link.showImage .free .free-img {
  margin: 0;
}
.news-list-link.showImage .read {
  margin-top: 0;
}

.news-browse ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-bottom: 1px solid #BC4932;
}
.news-browse ul li {
  margin: 0;
  display: inline;
}
.news-browse ul li a, .news-browse ul li a:link, .news-browse ul li a:active, .news-browse ul li a:visited, .news-browse ul li a:hover {
  font-weight: bold;
  color: #BC4932;
  line-height: 2.2rem;
  margin-inline: 0 0.5rem;
}
.news-browse ul li a.selected {
  color: #580023;
}
.news-browse ul.years {
  padding-bottom: 0.5rem;
}
.news-browse ul.years .selected {
  background-color: #fee;
  border: 1px solid #BC4932;
  padding: 0.3rem 0.5rem;
}
.news-browse ul.months {
  background-color: #fee;
  margin-bottom: 0.5em;
}
.news-browse ul.months a, .news-browse ul.months a:link, .news-browse ul.months a:active, .news-browse ul.months a:visited, .news-browse ul.months a:hover {
  margin-inline: 0.5rem;
}

.col-left, .article-home {
  padding-inline: 0;
  margin-inline: 0;
}

.archiveCategories {
  max-width: 600px;
}
.archiveCategories .buttonlistcontainer {
  margin: 0;
}
.archiveCategories ul.buttonlist {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Forces exactly 2 equal columns */
  gap: 15px; /* Creates consistent spacing between the items */
  padding: 0 !important; /* Overrides any global browser/ul padding */
  margin: 0 0 1rem 0;
  list-style-type: none !important; /* Strips the default bullets */
}
.archiveCategories ul.buttonlist li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}
.archiveCategories ul.buttonlist li a {
  display: block;
  margin: 0;
}
.archiveCategories ul.buttonlist li a img {
  width: 100%;
  height: auto;
  display: block; /* Removes the baseline ghost space under images */
}
.archiveCategories .search {
  padding: 10px;
}

#archiveSearch {
  padding: 1em 0.7em;
}
#archiveSearch input {
  font-size: 80%;
  padding-left: 5px;
  font-style: italic;
}
#archiveSearch input::placeholder {
  color: #aaa;
}
#archiveSearch img {
  margin-top: -2px;
  margin-left: 3px;
  height: 22px;
  width: 22px;
  cursor: pointer;
}

.archiveTab {
  margin: 0 0.5em;
  margin-inline: 0;
}

.ezine-items, .blog-items, .archive-items {
  font-size: 90%;
  position: relative;
  padding-inline: 0;
}
.ezine-items .items .item, .blog-items .items .item, .archive-items .items .item {
  display: block;
  margin-bottom: 1em;
}
.ezine-items .items .item a, .ezine-items .items .item a:link, .ezine-items .items .item a:active, .ezine-items .items .item a:visited, .ezine-items .items .item a:hover, .blog-items .items .item a, .blog-items .items .item a:link, .blog-items .items .item a:active, .blog-items .items .item a:visited, .blog-items .items .item a:hover, .archive-items .items .item a, .archive-items .items .item a:link, .archive-items .items .item a:active, .archive-items .items .item a:visited, .archive-items .items .item a:hover {
  display: block;
  line-height: 1.4rem;
  font-weight: bold;
}
.ezine-items .items .item > span a, .blog-items .items .item > span a, .archive-items .items .item > span a {
  position: relative;
}
.ezine-items .items .item .folder-name, .blog-items .items .item .folder-name, .archive-items .items .item .folder-name {
  color: Green;
  margin-bottom: 0.5rem;
}
.ezine-items .items .item .date, .blog-items .items .item .date, .archive-items .items .item .date {
  font-size: 80%;
  color: #BC4932;
}
.ezine-items .items .item .body, .blog-items .items .item .body, .archive-items .items .item .body {
  font-size: 80%;
  line-height: 1.3em;
}
.ezine-items .paging .prev, .blog-items .paging .prev, .archive-items .paging .prev {
  margin-right: 5px;
}
.ezine-items .paging a, .blog-items .paging a, .archive-items .paging a {
  font-weight: bold;
  cursor: pointer;
}
.ezine-items .paging a:hover, .blog-items .paging a:hover, .archive-items .paging a:hover {
  text-decoration: underline;
}

.archive-items .items .item img, .archive-items .items .item a {
  float: left;
}

.ezine-items {
  margin: 0 1rem;
  padding-right: 0;
}
.ezine-items .year-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.ezine-items .year-filters .year-tab {
  text-decoration: none;
  font-weight: 600;
  color: #777;
  padding: 2px 0;
  transition: color 0.2s ease;
}
.ezine-items .year-filters .year-tab.active {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ezine-items .year-filters .year-tab:hover {
  color: #000;
}

.blog-items .items {
  margin-right: 1rem;
}

.ezine-items .paging, .blog-items .paging, .archive-items .paging {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #eee;
  color: #555;
  margin-bottom: 0.8em;
  height: auto;
  min-height: 40px;
  gap: 10px;
  line-height: 32px;
}
.ezine-items .paging .page-numbers, .blog-items .paging .page-numbers, .archive-items .paging .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
  justify-content: flex-end;
}
.ezine-items .paging .page-numbers a, .ezine-items .paging .page-numbers span.current-page, .blog-items .paging .page-numbers a, .blog-items .paging .page-numbers span.current-page, .archive-items .paging .page-numbers a, .archive-items .paging .page-numbers span.current-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  background-color: #fff;
  transition: all 0.2s ease;
  cursor: pointer;
}
.ezine-items .paging .page-numbers a:hover, .blog-items .paging .page-numbers a:hover, .archive-items .paging .page-numbers a:hover {
  background-color: #f9f9f9;
  border-color: #bbb;
}
.ezine-items .paging .page-numbers span.current-page, .blog-items .paging .page-numbers span.current-page, .archive-items .paging .page-numbers span.current-page {
  background-color: #e2e6ea;
  border-color: #ccc;
  cursor: default;
}

.magazine-container {
  display: block; /* Mobile Default: Block layout allows text to flow around the image */
  margin-bottom: 1rem;
  /* Clearfix: Ensures the container doesn't collapse if the text is shorter than the image */
}
.magazine-container::after {
  content: "";
  display: table;
  clear: both;
}

.magazine-image-wrapper {
  float: left; /* Mobile: Floats the image left so text wraps around and under it */
  margin-right: 1rem;
  margin-bottom: 0.5rem; /* Gap for when the text wraps underneath */
}

.magazine-image {
  width: 200px;
  height: 283px;
  display: block;
}

.magazine-text {
  line-height: 1.4rem;
  font-family: Arial, sans-serif;
  font-size: 13px;
}

/* Force the CMS-injected paragraph to align perfectly with the top of the image */
.magazine-text p:first-of-type {
  margin-top: 0;
}

.ezineTab .ezine-items {
  min-height: 480px;
  margin-inline: 0;
}

/* ==============================================================
   BASE (Mobile First, under 370px)
   ============================================================== */
.ezine-page-layout {
  display: grid;
  grid-template-columns: 1fr; /* Stacks main content and sidebar vertically */
  gap: 1rem;
}

.ezine-main-content {
  min-width: 0; /* Prevents the grid from blowing out */
}

.ezine-browse-grid {
  display: grid;
  grid-template-columns: 1fr; /* Forces years into 1 column so 185px buttons don't overflow */
  gap: 0.5rem;
}

.ezine-year h4 {
  margin: 0 0 0.5em 0.2em;
  font-weight: bold;
}

.ezine-button {
  height: 45px;
  padding-left: 41px;
  padding-top: 5px;
  width: 185px; /* Locked width */
  font-size: 70%;
  color: #fff;
  display: block;
  line-height: 1.3em;
  margin-bottom: 0.6em;
  font-weight: bold;
  background-size: 215px 35px;
  background-repeat: no-repeat;
}
.ezine-button.live {
  background-image: url("/images/ezine_unlocked.png");
}
.ezine-button.locked {
  background-image: url("/images/ezine_locked.png");
}
.ezine-button a:link,
.ezine-button a:visited {
  color: #fff;
  text-decoration: none;
}

/* ==============================================================
   CUSTOM BREAKPOINT (370px and up)
   ============================================================== */
@media only screen and (min-width: 370px) {
  .ezine-browse-grid {
    grid-template-columns: repeat(auto-fill, 185px);
    gap: 1.5rem 1rem; /* Controls exact vertical and horizontal spacing */
  }
}
/* ==============================================================
   LARGE PHONES / TABLETS (420px and up)
   ============================================================== */
@media only screen and (min-width: 420px) {
  .ezine-page-layout {
    grid-template-columns: 1fr 185px; /* Re-enable the side-by-side sidebar */
    align-items: start; /* Prevents sidebar from stretching to content height */
  }
  .ezine-browse-grid {
    gap: 1rem;
  }
}
/* Replaces the old <br> tag hack */
.banner-spacer {
  height: 2rem;
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
  .ezine-page-layout {
    grid-template-columns: 1fr; /* Stacks the sidebar below the main content on smaller screens */
  }
}
.introText {
  font-weight: bold;
  font-size: 85%;
  padding-inline: 1px;
}
.introText img {
  margin-right: 10px;
  width: 70px;
  height: 70px;
  float: left;
}

.content-panel h3 {
  font-family: "Roboto";
  color: #580023;
  margin: 0.5rem 0 1rem 0;
  font-weight: bold;
  font-size: 170%;
}
.content-panel .links {
  padding-inline: 0;
}
.content-panel .article {
  text-indent: 0em;
  padding-inline: 0;
}
.content-panel .article .free-img {
  margin: -2px 0 0 0;
}
.content-panel .article .read-icon {
  margin-top: 1px;
}
.content-panel .article .listen-icon {
  margin-left: 1px;
}
.content-panel .article .section-image {
  border: solid 0px red;
  overflow: visible;
  background-repeat: no-repeat;
  padding-top: 64%;
  background-size: cover;
}
.content-panel .article img {
  width: 100%;
}
.content-panel .article h3 {
  font-size: 120%;
  margin: 0.5rem 0;
}
.content-panel .article h3 a {
  color: #580023;
  font-weight: bold;
}
.content-panel .article p {
  font-size: 0.8rem;
}
.content-panel .banner {
  margin: 0 0 0.5em 0;
}
.content-panel .story-row {
  min-height: 501px;
}
.content-panel .story {
  font-size: 90%;
}
.content-panel .story .article-heading {
  display: flex;
  justify-content: space-between;
}
.content-panel .story .article-heading .date {
  color: #BC4932;
  font-size: 120%;
  margin-top: 3px;
  margin-right: 1px;
}
.content-panel .story h3, .content-panel .story h4 {
  color: #580023;
  font-family: "Roboto";
}
.content-panel .story h3 {
  margin: 0 5px 0.5rem 0;
  font-weight: bold;
  font-size: 120%;
  line-height: 1.5rem;
}
.content-panel .story h3.story-header {
  font-size: 170%;
}
.content-panel .story h4, .content-panel .story h5 {
  margin: 0.5rem 0 1rem 0;
  font-size: 110%;
  line-height: 1.4rem;
  font-weight: bold;
}
.content-panel .story img.main-image {
  width: 50%;
  float: left;
  margin-right: 0.8rem;
  margin-bottom: 0.4rem;
}
.content-panel .story.sponsored .article-heading {
  display: none;
}
.content-panel .story.sponsored .main-image {
  width: 100%;
  margin: 1em 0 2em 0;
}
.content-panel .story.sponsored h3, .content-panel .story.sponsored .feature-image {
  margin-bottom: 1em;
}
.content-panel .story.sponsored .caption {
  color: #fff;
  background-color: #580023;
  position: relative;
  height: 4rem;
}
.content-panel .story.sponsored .caption p {
  margin: 0;
  position: absolute;
  top: 50%;
  padding: 0 1.5em;
  transform: translate(0, -50%);
  font-size: 80%;
  line-height: 1.5em;
}
.content-panel .share-links {
  font-size: 80%;
  margin-bottom: 1rem !important;
}
.content-panel .share-links .label {
  display: inline-block;
  margin-right: 0.6rem;
  padding-top: 3px;
}
.content-panel .share-links span, .content-panel .share-links a, .content-panel .share-links div, .content-panel .share-links img {
  float: left;
}
.content-panel .share-links img {
  height: 25px;
  margin-right: 0.5rem;
}
.content-panel .related {
  width: 100%;
  margin-inline: 0;
}
.content-panel .related .related-items {
  width: 99%;
}
.content-panel .related h4 {
  margin-top: 1rem;
  margin-bottom: 0.3rem;
  color: #BC4932;
  font-size: 100%;
  font-weight: bold;
}
.content-panel .related .a, .content-panel .related .a:link, .content-panel .related .a:active, .content-panel .related .a:visited, .content-panel .related .a:hover, .content-panel .related a, .content-panel .related a:link, .content-panel .related a:active, .content-panel .related a:visited, .content-panel .related a:hover {
  font-size: 100%;
  font-weight: bold;
  color: #580023;
  font-family: "Roboto";
}
.content-panel .disclaimer {
  margin-top: 1rem;
  font-size: 80%;
}
.content-panel .disclaimer p {
  margin: 0.5rem 0;
}
.content-panel .links a, .content-panel .links a:link, .content-panel .links a:active, .content-panel .links a:visited, .content-panel .links a:hover {
  font-size: 90%;
  font-weight: bold;
  color: #580023;
  font-family: "Roboto";
  margin: 0.5rem 0;
}
.content-panel .links ul {
  list-style-type: none;
  margin: 0 0 0.5rem 0;
  padding: 0;
  flex-direction: column;
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
}
.content-panel .links ul li {
  padding: 0;
  line-height: 1.2em !important;
  align-items: flex-start;
  /* Targets both the old SCSS class and the new HTML class */
}
.content-panel .links ul li img.introImg, .content-panel .links ul li .item-img {
  margin-right: 0.8rem;
  width: 100px;
  height: 67px;
  min-width: 100px;
  min-height: 67px;
  margin-bottom: 1rem;
  flex-shrink: 0; /* Prevents the image from being squished by long text */
}
.content-panel .links ul li .item-content {
  flex-grow: 1; /* Pushes the text container to fill the remaining space */
}
.content-panel .links ul li p, .content-panel .links ul li .intro {
  font-size: 80%;
  line-height: 1rem;
  margin-bottom: 0;
}
.content-panel .links ul li .free-img {
  margin: 0px 1px 0 0;
}
.content-panel .links ul li .read-icon {
  margin-top: 2px;
}
.content-panel .links ul.noheadlinebar li img.introImg, .content-panel .links ul.noheadlinebar li .item-img {
  margin-bottom: 1rem;
}
.content-panel h1 {
  line-height: 1.2rem;
}

.news-section .links ul {
  gap: 1.5em;
}
.news-section .links ul.spaced {
  gap: 1.5em;
}

.feature-section .links ul li {
  display: flex;
}

.continue-reading {
  margin-block: 0.5em 1.5em;
}

.block-panel {
  position: relative;
  padding-top: 20px;
  font-size: 95%;
}
.block-panel h2 {
  background-color: transparent;
  font-size: 1.6rem;
  border-bottom: solid 4px #580023;
  padding: 0 0 5px 0;
  width: 100%;
  text-align: left;
  margin: 0.5rem 0 1rem 0;
  font-weight: bold;
  font-family: "AvenirLT-Medium";
}
.block-panel .blocks {
  display: flex;
  width: 100%;
  margin: 0 auto;
  justify-content: space-between;
}
.block-panel .blocks .block {
  width: 32%;
  flex-grow: 0;
  margin-bottom: 1rem;
}
.block-panel .blocks .block img {
  width: 100%;
}
.block-panel .blocks .block h3 {
  font-size: 0.7rem;
  color: #fff;
  margin: 0.3rem 0.5rem 0.6rem 0.5rem;
}
.block-panel .blocks .block h3 a, .block-panel .blocks .block h3 a:link, .block-panel .blocks .block h3 a:active, .block-panel .blocks .block h3 a:visited, .block-panel .blocks .block h3 a:hover {
  color: #fff;
}
.block-panel.latestwsa {
  background-color: #CC6B48;
}
.block-panel.latestwsa .block {
  background-color: #D67B55;
}
.block-panel.highlights {
  background-color: #858599;
}
.block-panel.highlights .block {
  background-color: #6C6A83;
}
.block-panel.jobboard {
  background-color: #C88987;
}
.block-panel.jobboard .block {
  background-color: #D29D99;
}
.block-panel.jobboard h2 {
  border-bottom-color: #fff;
}
.block-panel.sistertitles {
  background-color: #CC6B48;
}
.block-panel.sistertitles .category {
  font-size: 10px;
  letter-spacing: 0;
}
.block-panel.sistertitles .block {
  background-color: #D67B55;
}
.block-panel.sistertitles h2 {
  border-bottom-color: #fff;
}

.news {
  cursor: pointer;
  background-position: center;
  background-size: cover;
  display: block;
  position: relative;
  color: #fff;
  text-shadow: 0 1px 0 black;
}
.news .text {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 3rem 1rem 1rem 1rem;
}
.news h3 {
  margin: 0;
  color: white;
  position: relative;
  z-index: 1;
}
.news.news-lg {
  height: 380px;
  margin-bottom: 0 !important;
}
.news.news-lg h3 {
  font-size: 1.2rem;
}
.news.news-md {
  height: 228px;
  border-top-width: 0;
}
.news.news-md h3 {
  font-size: 120%;
  line-height: 1.2rem;
}
.news.news-md .text {
  padding-top: 1.8rem;
}

.shop-section {
  position: relative;
  padding: 4px 5px 4px 4px;
  border: 1px solid #580023;
  min-height: 109px;
  font-family: "AvenirLT-Black";
  margin-bottom: 1rem;
  font-size: 80%;
}
.shop-section > img {
  float: left;
  width: 70px;
  height: 100px;
  margin-right: 12px;
}
.shop-section .price {
  font-weight: bold;
  font-size: 120%;
}
.shop-section h4, .shop-section h5 {
  font-family: AvenirLT-Black;
  margin: 20px 0 5px 0;
  text-transform: uppercase;
  font-size: 120%;
  font-weight: bold;
}
.shop-section .description {
  text-transform: uppercase;
  line-height: 1.5em;
  font-family: AvenirLT-Medium;
  font-size: 90%;
  display: block;
  margin-bottom: 2rem;
}
.shop-section .buy-button {
  position: absolute;
  bottom: 0;
  right: 0;
  text-transform: uppercase;
  text-align: center;
}
.shop-section .buy-button a, .shop-section .buy-button a:link, .shop-section .buy-button a:active, .shop-section .buy-button a:visited, .shop-section .buy-button a:hover {
  display: block;
  background-color: #580023;
  padding: 3px;
  width: 110px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.shop-section.gold {
  color: #B56C1C !important;
  border-color: #B56C1C;
}
.shop-section.gold .buy-button a {
  background-color: #B56C1C;
}
.shop-section.charcoal {
  color: #231F20 !important;
  border-color: #231F20;
}
.shop-section.charcoal .buy-button a {
  background-color: #231F20;
}

.shop .basket-section {
  background: #fff;
  border: 1px solid #580023;
  border-radius: 4px;
  font-family: "AvenirLT-Black", sans-serif;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.shop .basket-section.address-section {
  padding: 15px;
}
.shop .basket {
  width: 100%;
  border-collapse: collapse;
}
.shop .basket thead {
  display: none;
}
.shop .basket tr {
  display: block;
  border: 1px solid #eee;
  margin-bottom: 15px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.shop .basket td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  padding: 12px 15px;
  text-align: right;
}
.shop .basket td::before {
  content: attr(data-label);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #666;
  margin-right: 15px;
  text-align: left;
}
.shop .basket td a {
  text-decoration: none;
  color: #0056b3;
}
.shop .basket td a:hover {
  text-decoration: underline;
}
.shop .basket td.remove {
  justify-content: flex-end;
  background: #fafafa;
}
.shop .basket td.remove::before {
  display: none;
}
.shop .basket td.remove img {
  width: 23px;
  height: 23px;
  transition: transform 0.2s;
}
.shop .basket td.remove img:hover {
  transform: scale(1.1);
}
.shop .basket .qty-wrapper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}
.shop .basket .qty-wrapper .qtyBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f5f5f5;
  color: #333;
  text-decoration: none;
  font-weight: bold;
}
.shop .basket .qty-wrapper .qtyBtn:hover {
  background: #e0e0e0;
}
.shop .basket .qty-wrapper .qty {
  width: 40px;
  text-align: center;
  font-weight: bold;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  line-height: 32px;
}
.shop .basket .fw-bold {
  font-weight: bold;
}
.shop .basket-summary {
  display: flex;
  flex-direction: column;
  padding: 20px 15px;
  background-color: rgba(188, 73, 50, 0.05);
}
.shop .voucher-block {
  margin-bottom: 1rem;
}
.shop .voucher-block .voucher-input-group {
  display: flex;
  margin-top: 5px;
  max-width: 300px;
}
.shop .voucher-block .voucher-input-group input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.shop .voucher-block .voucher-input-group .btn-apply {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 8px 15px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-weight: bold;
  margin: 0;
}
.shop .voucher-block .voucher-input-group .btn-apply:hover {
  background-color: #555;
}
.shop .voucher-block .applied-voucher {
  background: #fff;
  padding: 10px;
  border: 1px dashed #580023;
  border-radius: 4px;
  display: inline-block;
}
.shop .voucher-block .applied-voucher .voucher-discount {
  color: #580023;
  font-weight: bold;
  margin: 0 10px;
}
.shop .voucher-block .applied-voucher .removeVoucher {
  color: #999;
  cursor: pointer;
  font-weight: bold;
}
.shop .voucher-block .applied-voucher .removeVoucher:hover {
  color: #580023;
}
.shop .totals-block {
  width: 100%;
  margin-top: 15px;
}
.shop .totals-block .summary-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 0.95rem;
}
.shop .totals-block .summary-row.grand-total {
  font-size: 1.2rem;
  font-weight: bold;
  border-top: 2px solid #ddd;
  margin-top: 10px;
  padding-top: 10px;
}
.shop .buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
}
.shop .buttons .button {
  flex: 1 1 calc(50% - 10px);
  min-width: 200px;
  text-align: left;
  border: none;
  border-radius: 4px;
  text-transform: uppercase;
  color: #fff;
  padding: 12px 15px;
  font-size: 0.85rem;
  font-weight: bold;
  background-repeat: no-repeat;
  background-position: calc(100% - 15px) center;
  cursor: pointer;
  transition: opacity 0.2s;
}
.shop .buttons .button:hover {
  opacity: 0.9;
}
.shop .buttons .backtoshop {
  background-color: #580023;
  background-image: url("/images/back_icon.png");
  background-size: 16px;
}
.shop .buttons .proceed {
  background-color: #BC4932;
  background-image: url("/images/trolley_icon.png");
  background-size: 22px;
}

.form {
  width: 100%;
}
.form input, .form select {
  margin-bottom: 0.5rem;
  padding: 4px 12px;
  font-weight: bold;
}
.form label {
  display: inline-block;
  margin-top: 10px;
  float: left;
}
.form .form-control {
  border: solid 1px #580023;
  border-radius: 0;
  width: 100%;
  font-size: 90%;
}
.form .form-control::-webkit-input-placeholder, .form .form-control:-ms-input-placeholder, .form .form-control::placeholder {
  text-transform: uppercase;
  color: #AAA;
}
.form .form-control-hidden {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.form.register .register-section1 {
  display: flex;
}
.form.register .register-section1 .register-title {
  width: 100px;
  margin-right: 0.7em;
}
.form.register .register-section1 .register-title input {
  text-align: center;
}
.form.register .register-section1 .register-names {
  width: 100%;
}
.form.register .register-section2 {
  display: flex;
}
.form.register .register-section2 .register-address {
  margin-right: 0.7em;
  width: 80%;
}
.form.register .register-section2 .country-placeholder {
  padding-left: 0.5em;
}
.form.register .register-section3 {
  display: flex;
  justify-content: space-between;
}
.form.register .register-section3 .password, .form.register .register-section3 .verify-password {
  width: 100%;
}
.form.register .register-section3 .password {
  margin-right: 0.7em;
}
.form .buttons {
  width: 100%;
}
.form .buttons a, .form .buttons a:link, .form .buttons a:active, .form .buttons a:visited, .form .buttons a:hover {
  color: #fff;
}
.form .buttons .button {
  width: 100%;
  text-align: left;
  border-style: none;
  border-width: 0;
  text-transform: uppercase;
  color: #fff;
  padding: 7px 14px;
  margin-bottom: 0.5rem;
  font-size: 80%;
  font-weight: bold;
}
.form .buttons .button .label {
  position: absolute;
  left: 10px;
  top: 1px;
}
.form .buttons .signin {
  background-color: #580023;
  background-image: url("/images/login_icon.png");
  background-size: 15px;
  background-position-x: 97%;
  background-position-y: 0.55rem;
  background-repeat: no-repeat;
}
.form .buttons .upgrade {
  background-color: #BC4932;
  background-image: url("/images/premium_icon.png");
  background-size: 15px;
  background-position-x: 97%;
  background-position-y: 0.55rem;
  background-repeat: no-repeat;
}
.form .checks {
  width: 100%;
  display: flex;
}
.form .checks .forgotpassword {
  margin-top: 12px;
  width: 50%;
  font-weight: bold;
}
.form .checks .forgotpassword img {
  margin-top: -2px;
  margin-right: 3px;
}
.form .checks .forgotpassword a {
  color: #BC4932;
}
.form .checks .forgotpassword > div {
  display: inline-block;
}
.form .checks .checkbox {
  line-height: 1.3em;
}
.form .checks .checkbox .ccontainer {
  width: 150px !important;
  display: inline-block;
  position: relative;
  padding-top: 4px;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
  font-weight: bold;
}
.form .checks .checkbox .ccontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.form .checks .checkbox .ccontainer input:checked ~ .checkmark {
  background-color: #580023;
  background-image: url("/images/remember_icon.png");
  background-size: 17px;
  background-repeat: no-repeat;
  background-position: 4px 3px;
}
.form .checks .checkbox .ccontainer input:checked ~ .checkmark:after {
  display: block;
}
.form .checks .checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 27px;
  width: 27px;
  border: 2px solid #580023;
}
.form .checks .checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.form .checks.no-flex {
  display: block;
  overflow: hidden;
  height: auto;
}
.form .checks.no-flex .checkbox {
  display: block;
  float: none;
  clear: both;
  min-height: 30px;
}
.form .checks.no-flex .checkbox .ccontainer {
  width: 100% !important;
  display: block;
}

.basketLink {
  margin-left: auto;
}
.basketLink .headlineTitleText {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

#fade {
  height: 20px;
  background-image: url("/images/fade.png?1");
  background-size: 1px 100%;
  background-repeat: repeat-x;
  position: relative;
  padding: 0;
}

.register-button {
  display: inline-block;
  background-color: #BC4932 !important;
}

.sponsor-container {
  margin: 0;
}
.sponsor-container .col-lg {
  margin-bottom: 0;
}

#loadingPanel, .loadingpanel {
  background-color: #fff;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
#loadingPanel table, .loadingpanel table {
  width: 100%;
  height: 100%;
}
#loadingPanel table td, .loadingpanel table td {
  vertical-align: middle;
  text-align: center;
}

.articleLink {
  margin: 0.3rem 0;
  display: flex;
  justify-content: space-between;
}
.articleLink .date {
  padding-left: 8px;
  color: #BC4932;
  font-size: 90%;
}

.text-content {
  min-height: 400px;
}

.pdficon {
  width: 18px;
  height: 18px;
  margin-right: 0.4em;
}

.ezine-banner-container {
  padding-inline: 7px;
}
.ezine-banner-container .ezine-socials {
  display: none;
}

.banners-right {
  margin-bottom: 9em;
}
.banners-right .banner {
  margin-bottom: 0.5em;
}

.verified-banner-link {
  display: block;
}

.consent-section {
  margin-top: 1em;
  font-size: 80%;
}
.consent-section label {
  margin-block: 0;
}
.consent-section a {
  color: #BC4932 !important;
  font-weight: bold;
}
.consent-section a:hover {
  text-decoration: underline !important;
}

.feature-bg-image {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0;
}

.video-banner {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
}
.video-banner iframe, .video-banner video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.placeholder-error::placeholder {
  color: red !important;
  opacity: 1;
}

.accountSection {
  width: 100%;
  border: 2px solid #BC4932;
  min-height: 125px;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
}
.accountSection a {
  color: #BC4932 !important;
  cursor: pointer;
  font-weight: bold;
}
.accountSection a:hover {
  text-decoration: underline !important;
}
.accountSection h2 {
  width: 175px;
  margin-top: 0 !important;
  background-color: #BC4932;
  padding-top: 3px;
}
.accountSection {
  /* Remove margins from the icons, we will use flex 'gap' instead */
}
.accountSection .iconContainer {
  height: 100%;
  flex-shrink: 0;
}
.accountSection .listIconImage {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.accountSection {
  /* Default content wrapper */
}
.accountSection .content {
  padding: 1em 1em 0 1em;
  display: flex;
  flex-direction: column; /* Mobile Default: Stacks internal blocks */
  gap: 1.5em;
}
.accountSection {
  /* =========================================
     SECTION SPECIFIC TWEAKS
     ========================================= */
  /* 1. PASSWORD SECTION */
}
.accountSection.password .content {
  flex-direction: row;
  align-items: center;
  gap: 0.75em; /* <-- Controls the exact gap between image and text */
}
.accountSection {
  /* 2. ADDRESS DETAILS SECTION */
}
.accountSection.addresses .content {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75em; /* <-- Controls the exact gap between image and addresses */
}
.accountSection.addresses .content .address {
  flex: 1;
  min-width: 0;
}
.accountSection.addresses .content .address .user-details {
  display: flex;
  flex-direction: column;
}
.accountSection {
  /* 3. MAILING LISTS SECTION */
}
.accountSection .account-usermailinglists {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75em; /* <-- Controls the exact gap here too */
  position: relative;
}
.accountSection .account-usermailinglists .listText {
  flex: 1; /* Text takes remaining width */
  min-width: 0;
}
.accountSection .account-usermailinglists .loadingpanel {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
.accountSection .account-usermailinglists .loadingpanel table, .accountSection .account-usermailinglists .loadingpanel td {
  width: 100%;
}

.accountSection .user-details, .shop .user-details {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.accountSection .user-details .address-section, .shop .user-details .address-section {
  flex: 1 1 280px;
}
.accountSection .user-details .address-section .address, .shop .user-details .address-section .address {
  width: 100%;
  min-width: 0;
}
.accountSection .user-details .address-section .address .form-control, .shop .user-details .address-section .address .form-control {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box; /* Forces padding to sit inside the width */
}
.accountSection .button, .shop .button {
  right: 0;
  text-transform: uppercase;
  text-align: center;
  background-color: #580023;
  padding: 3px;
  width: 80px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.accountSection .button.cancel-button, .shop .button.cancel-button {
  display: none;
  right: 90px;
}
.accountSection .button.save-button, .shop .button.save-button {
  display: none;
  background-color: #BC4932;
}

.shop .address .mb-3 {
  margin-bottom: 0 !important;
}
.shop .button {
  margin-top: 0.5em;
  padding-block: 6px;
  border-radius: 4px;
}

.footer {
  background-color: #580023;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  min-width: 320px;
  width: 100%;
  color: #fff;
  padding: 1rem 30px 1rem 30px;
  text-transform: uppercase;
  line-height: 1.7rem;
  font-size: 90%;
}
.footer .column {
  width: 100%;
  margin-bottom: 12px;
}
.footer h3 {
  text-transform: uppercase;
  font-size: 130%;
  color: #BC4932;
  font-weight: bold;
}
.footer ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.footer ul li {
  margin: 0;
  padding: 0;
}
.footer ul li a {
  color: #fff;
}
.footer address {
  margin-bottom: 0.5rem;
}
.footer .disclaimer {
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  text-transform: none;
  margin: 0 auto;
  text-align: center;
}
.footer .social-icons a {
  text-decoration: none;
  border: 0;
}
.footer .social-icons img {
  width: 25px;
  border: 0;
  margin-right: 3px;
}

/* Base HTML, resets, and typography first */
/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 */
#menuToggle {
  display: block;
  position: relative;
  top: 10px;
  z-index: 99999; /* Ensure it stays above everything */
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a {
  text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;
}

#menuToggle a:hover {
  color: tomato;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span {
  display: block;
  width: 32px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #606161;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 2px 1px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 2px 3px;
}

/* * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * The Drawer Menu Container
 */
#menu {
  position: absolute;
  width: 260px;
  min-height: 100vh; /* Makes the drawer extend to the bottom of the screen */
  margin: 12px 0 0 -50px;
  padding: 30px 10px 40px 50px; /* Increased padding to let the list breathe */
  background: #f8f9fa; /* Modern, clean off-white background */
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.05); /* Subtle shadow to lift the menu */
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

/*
 * The List Items & Leatherbiz Brand Colors
 */
#menu li {
  font-family: "AvenirLT-Black";
  margin-bottom: 18px; /* Adds vertical breathing room */
}
#menu li a, #menu li a:link, #menu li a:visited {
  display: block;
  width: 100%;
  color: #580023;
  text-transform: uppercase;
  padding: 4px 0px 6px 0px;
  line-height: 1.2;
  font-size: 14px;
  /* THE FIX: Modern Text-Decoration instead of Borders */
  text-decoration: underline;
  text-decoration-color: transparent; /* Invisible by default */
  text-decoration-thickness: 2px;
  text-underline-offset: 6px; /* Pushes the line down to match the old padding look */
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
#menu li a.active, #menu li a:link.active, #menu li a:visited.active {
  text-decoration-color: #580023;
}
#menu li a:hover, #menu li a:active {
  text-decoration-color: #CC6B48;
}

/*
 * Slide it in from the left
 */
#menuToggle input:checked ~ ul {
  transform: none;
}

/*
 * Responsive Hamburger Scaling
 */
@media screen and (max-width: 370px) {
  #menuToggle span {
    display: block;
    width: 27px;
    height: 3px;
  }
  #menuToggle input:checked ~ span {
    transform: rotate(45deg) translate(-2px, -1px) scale(1.1);
  }
  #menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px) scale(1.1);
  }
}
@media screen and (min-width: 370px) {
  #menuToggle {
    top: 11px;
  }
}
@media screen and (min-width: 600px) {
  #menuToggle span {
    display: block;
    width: 36px;
    margin-bottom: 7px;
  }
  #menuToggle input:checked ~ span {
    transform: rotate(45deg) translate(-3px, -1px) scale(1.1);
  }
  #menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px) scale(1.1);
  }
}
/* Component styles */
.banner img,
[class^=banner-] img,
#banner-header img {
  width: 100%;
  max-width: unset;
  height: auto;
}

.banner {
  display: block;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: bold;
  font-size: 100%;
}
.banner > div.text {
  padding: 0 15%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: #E72582;
}

#banner-header {
  width: 100%;
  /* Prevent CLS (Cumulative Layout Shift) for SEO */
  aspect-ratio: 702/90;
}

.banner-sponsored {
  width: 100%;
  margin: 0 auto;
}
.banner-sponsored .banner2 {
  height: 100%;
}

.banner-silver, .banner-bronze {
  width: 100%;
  text-align: center;
  margin: 0.5rem 0;
}

.banner-b, .banner-b-2 {
  width: 300px;
  /* Changed from fixed 10px to min-height to prevent aggressive CLS */
  min-height: 10px;
  float: right;
}

.banner-b {
  margin: 0 auto;
  padding-bottom: 1rem;
}

.banner-b-2 {
  display: none;
}

.banner-ezine {
  flex: 1;
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .banner-b {
    display: none;
  }
  .banner-b-2 {
    width: 200px;
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    float: none;
  }
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  #banner-header {
    align-self: center;
    margin-top: 15px;
  }
  .banner-b-2 {
    width: 250px;
  }
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .banner img,
  [class^=banner-] img,
  #banner-header img {
    width: unset;
  }
  #banner-header {
    width: 702px;
    height: 90px;
    margin-right: -6px;
    margin-top: 15px;
  }
  .banner-sponsored {
    width: 525px;
    margin: 0 auto;
  }
  .banner-b, .banner-b-2 {
    width: 300px;
    float: right;
    margin-left: 15px;
  }
  .banner-silver, .banner-bronze, .banner-ezine {
    width: 702px;
    height: 90px;
    margin: 0.5rem 0 1rem 0;
  }
  .banner-ezine {
    flex: unset;
  }
}
/* Component styles */
/* ==============================================================
   TABLETS & LARGE PHONES (600px and up)
   ============================================================== */
@media only screen and (min-width: 600px) {
  /* --- TRIGGER THE 2-COLUMN GRID --- */
  .news-page-layout {
    grid-template-columns: 1fr 200px; /* Banners locked to exactly 200px */
    gap: 1rem;
  }
  body {
    font-size: 16px;
  }
  .container, .container-fluid, .footer, .shop-section {
    width: 100%;
  }
  .archiveTab, .ezine-items, .col-left, .introText {
    margin-left: 0;
    padding-inline: 0;
  }
  #fade {
    display: block;
    height: 22px;
  }
  .footer .column {
    width: 30%;
  }
  .category {
    width: 7rem;
  }
  .nav-container {
    height: 70px;
  }
  #nav ul {
    display: flex;
  }
  #nav ul li a, #nav ul li a:link, #nav ul li a:active, #nav ul li a:visited, #nav ul li a:hover {
    font-size: 90%;
    padding: 3px 8px;
    line-height: 27px;
  }
  #nav ul li a.active {
    border-bottom: 3px solid #580023;
  }
  #nav ul li a:hover {
    border-bottom: 3px solid #CC6B48;
  }
  .nav_button {
    margin-top: 15px;
    display: inline-block;
    width: 45px;
  }
  .nav_button svg {
    width: 45px;
  }
  .nav_button .world {
    width: 38px;
  }
  .nav_heading h1 {
    margin-top: 5px;
  }
  .nav_heading h1 a img {
    height: 40px;
  }
  .headline-panel, .headline-bar {
    font-size: 80%;
  }
  .headline-panel .title h2, .headline-bar .title h2 {
    width: 7rem;
    height: 29px;
    line-height: 16px;
    padding-inline: 4px;
  }
  .headline-panel .title h2.narrow, .headline-bar .title h2.narrow {
    width: 6rem;
  }
  .headline-panel .title h2.wide, .headline-bar .title h2.wide {
    width: 11em;
  }
  .headline-panel .title h2.wider, .headline-bar .title h2.wider {
    width: 14em;
  }
  .headline-panel .title a, .headline-bar .title a {
    padding-bottom: 2px;
  }
  .headline-panel .title ul.links li, .headline-bar .title ul.links li {
    line-height: 21px;
  }
  .headline-panel .title-underline, .headline-bar .title-underline {
    top: 26px;
    border-bottom-width: 4px;
    margin: 0;
  }
  .headline-panel .buttons, .headline-bar .buttons {
    width: 32%;
  }
  .headline-panel .buttons .button, .headline-bar .buttons .button {
    padding: 2px 10px;
    height: 29px;
    line-height: 25px;
    margin-bottom: 5px;
  }
  .headline-panel .buttons .button .label, .headline-bar .buttons .button .label {
    top: 2px;
  }
  .headline-panel .signin, .headline-panel .language, .headline-bar .signin, .headline-bar .language {
    background-size: 13px;
    background-position-y: 0.5rem;
  }
  .headline-bar .title-underline {
    left: 0;
    top: 25px;
  }
  .article-home {
    padding-left: 0;
  }
  .articleLink .date {
    padding-left: 2rem;
  }
  .archive-list {
    min-height: 1650px;
  }
  /* 1. Page layout: Main content + 200px banners */
  .ezine-page-layout {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 1.5rem;
  }
  .ezine-main-content {
    min-width: 0; /* Prevents the grid from blowing out */
  }
  /* 2. Ezine layout: 2 equal columns of years */
  .ezine-browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 185px); /* Locks columns to 200px and packs them left */
    gap: 1rem; /* Exact spacing between the rows and columns */
  }
  .ezine-button {
    padding-left: 40px;
    font-size: 75%;
    padding-top: 3px;
  }
  .content-panel .article, .content-panel .article p {
    font-size: 0.9rem !important;
    line-height: 1.4rem !important;
  }
  .content-panel .links {
    padding-left: 0;
    font-size: 90%;
  }
  .content-panel .links a {
    font-size: 80%;
  }
  .feature-section .links a {
    font-size: 90%;
  }
  .news.news-lg {
    height: 500px;
  }
  .news.news-lg h3 {
    font-size: 1.5rem;
    line-height: 2.1rem;
  }
  .news.news-md {
    height: 235px;
    padding-left: 15px;
  }
  .news.news-md .text {
    overflow: hidden;
  }
  .news.news-md h3 {
    font-size: 1.1rem;
    line-height: 1.4rem;
  }
  .block-panel {
    font-size: 100%;
  }
  .block-panel h2, .block-panel .block {
    width: 32%;
  }
  .block-panel .blocks {
    display: flex;
  }
  .block-panel .blocks .block h3 {
    font-size: 1rem;
  }
  .block-panel.sistertitles {
    background-color: #CC6B48;
  }
  .block-panel.sistertitles .category {
    font-size: 80%;
    letter-spacing: initial;
  }
  .form .buttons .button {
    padding: 5px 14px;
  }
  .form .checks {
    font-size: 80%;
  }
}
/* ==============================================================
   LARGER TABLETS (660px and up)
   ============================================================== */
@media only screen and (min-width: 660px) {
  #nav ul li a, #nav ul li a:link, #nav ul li a:active, #nav ul li a:visited, #nav ul li a:hover {
    font-size: 100%;
  }
}
/* Tablet overrides */
/* ==============================================================
   MEDIUM DEVICES (Landscape Tablets, 768px and up)
   ============================================================== */
@media only screen and (min-width: 768px) {
  /* --- MAINTAIN 2-COLUMN GRID WITH 250px SIDEBAR --- */
  .news-page-layout {
    display: grid;
    grid-template-columns: 1fr 250px; /* Banners locked to exactly 250px */
    gap: 1rem;
    align-items: start;
    max-width: 100%;
  }
  .news-main-content {
    min-width: 0; /* Crucial: stops the grid track from expanding past its bounds */
  }
  .news-sidebar {
    width: 250px;
  }
  .news-sidebar .banner-container img,
  .news-sidebar .banner img {
    max-width: 250px;
    width: 100%;
    height: auto;
  }
  .container, .container-fluid, .footer {
    width: 100%;
  }
  .sponsor-container .col-lg {
    margin-bottom: 0;
  }
  .category {
    width: 8rem;
  }
  header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  header .main-logo {
    margin-left: -5px;
    margin-top: 20px;
    width: 80%;
    height: auto;
    margin-right: 10px;
  }
  #nav ul {
    justify-content: flex-start;
    padding-bottom: 0;
  }
  #nav ul li a, #nav ul li a:link, #nav ul li a:active, #nav ul li a:visited, #nav ul li a:hover {
    padding: 5px 7px 6px 7px;
    line-height: 36px;
    font-size: 100%;
  }
  #nav ul li a.active {
    border-bottom: 4px solid #580023;
  }
  #nav ul li a:hover {
    border-bottom: 4px solid #CC6B48;
  }
  h2 {
    font-size: 100%;
    padding: 5px 8px;
    width: 8.5rem;
  }
  h2.wide {
    width: 11rem;
  }
  h2.wider {
    width: 12rem;
  }
  .headline-panel, .headline-bar {
    font-size: 100%;
  }
  .headline-panel .title, .headline-bar .title {
    margin-right: 0;
  }
  .headline-panel .title > div, .headline-bar .title > div {
    /* Clear the legacy hardcoded width so it inherits dynamic sizing */
    max-width: none;
  }
  .headline-panel .title h2, .headline-bar .title h2 {
    width: 8.5rem;
    line-height: 20px;
  }
  .headline-panel .title h2.wide, .headline-bar .title h2.wide {
    width: 9rem;
  }
  .headline-panel .title h2.wider, .headline-bar .title h2.wider {
    width: 12rem;
  }
  .headline-panel .title-underline, .headline-bar .title-underline {
    width: 100%;
    top: 28px;
  }
  .main-panel h2 {
    margin-right: 0.8rem;
    margin-top: 0.2em;
  }
  .main-panel .strapline {
    font-size: 100%;
  }
  .main-panel .right-col {
    display: flex;
    flex-direction: column;
  }
  .main-panel .right-col .row:not(:first-child) {
    flex-grow: 1;
  }
  .main-panel > .row > div:first-child {
    padding-right: 5px;
  }
  .main-panel > .row > .right {
    padding-left: 5px;
  }
  .content-panel {
    padding-right: 0.5em;
  }
  .archiveTab, .ezine-items, .col-left, .introText {
    margin-inline: 0;
  }
  .news.news-md {
    border-top-width: 6px;
    border-bottom-width: 0;
  }
  .news.news-md h3 {
    font-size: 0.9rem;
  }
  .main-panel .news.news-lg, .main-panel .news.news-lg-left, .main-panel .news.news-md.extra {
    height: 100% !important; /* Forces fixed-heights to yield to flex-grow */
  }
  .news-list, .feature-list {
    font-size: 100%;
  }
  .news-list-link {
    font-size: 90%;
  }
  .articleLink .date {
    padding-left: 2rem;
  }
  .magazine-container {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .magazine-image-wrapper {
    float: none; /* Turn off float, let Flexbox take over */
    flex-shrink: 0; /* Prevents the image column from squashing */
    margin-right: 0; /* Reset margins, let flex 'gap' handle spacing */
    margin-bottom: 0;
  }
  .archive-list {
    min-height: 2400px;
  }
  .archiveCategories .buttonlist img, .archiveTab .buttonlist img {
    width: 100%;
  }
  .ezine-banner-container {
    padding-inline: 7px 2px;
  }
  .ezine-page-layout {
    grid-template-columns: 1fr 250px;
  }
  .ezine-browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 230px); /* Locks columns to 200px and packs them left */
    gap: 1.5rem; /* Exact spacing between the rows and columns */
  }
  .ezine-year {
    margin-right: 0;
  }
  .ezine-button {
    width: 241px;
    padding-left: 46px;
    padding-top: 5px;
    font-size: 80%;
    background-size: 232px 40px;
    line-height: 1.2em;
  }
  .shop-section .price {
    padding: 5px;
  }
  .shop-section h4, .shop-section h5 {
    margin: 5px 0;
  }
  .shop-section .description {
    width: calc(100% - 110px); /* Note: Kept this calc() as it's specifically for inline shop UI, not the main grid */
  }
  .shop .basket thead {
    display: table-header-group;
  }
  .shop .basket th {
    background-color: #f9f9f9;
    padding: 12px 15px;
    text-align: left;
    border-bottom: 2px solid #eee;
  }
  .shop .basket tr {
    display: table-row;
    border: none;
    margin-bottom: 0;
    box-shadow: none;
  }
  .shop .basket td {
    display: table-cell;
    padding: 15px;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
    text-align: left;
  }
  .shop .basket td::before {
    display: none;
  }
  .shop .basket td.remove {
    background: transparent;
    text-align: center;
  }
  .shop .basket .value {
    text-align: right;
  }
  .shop .basket-summary {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding: 30px;
  }
  .shop .voucher-block {
    flex: 1 1 300px;
    margin-bottom: 0;
  }
  .shop .totals-block {
    flex: 0 0 280px;
    margin-top: 0;
    margin-left: auto;
  }
  .form .buttons {
    display: flex;
    justify-content: space-between;
  }
  .form .buttons .button {
    line-height: 1.4em;
    width: 49%;
    padding: 9px 14px;
    background-size: 16px;
    background-position: 96% 0.55rem;
  }
  .form .buttons .upgrade {
    background-size: 18px;
    background-position-y: 0.5rem;
  }
  .form .checks {
    font-size: 90%;
  }
  /* ==============================================================
  MEDIUM DEVICES (Tablets, 768px and up)
  ============================================================== */
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .accountSection {
    /* Put Billing & Delivery Addresses side-by-side */
  }
  .accountSection.addresses .content .address .user-details {
    flex-direction: row;
  }
  .accountSection.addresses .content .address .user-details .address-section {
    flex: 1;
    padding-right: 1.5em; /* Gap between Billing and Delivery */
  }
  .accountSection {
    /* Put Mailing Lists side-by-side */
  }
  .accountSection.mailingLists .content {
    flex-direction: row;
  }
  .accountSection.mailingLists .content .account-usermailinglists {
    flex: 1;
    padding-right: 1.5em; /* Gap between the two mailing lists */
  }
}
/* ==============================================================
   DESKTOP (890px and up)
   ============================================================== */
@media only screen and (min-width: 890px) {
  #nav {
    padding-bottom: 0;
  }
  #nav ul li a, #nav ul li a:link, #nav ul li a:active, #nav ul li a:visited, #nav ul li a:hover {
    padding: 5px 7px;
  }
}
/* Landscape Tablet overrides */
/* ==============================================================
   LARGE DEVICES (Laptops/Desktops, 992px and up)
   ============================================================== */
@media only screen and (min-width: 992px) {
  .news-page-layout {
    /* Expands the sidebar for the full 300px skyscraper banners */
    grid-template-columns: 1fr 300px;
    max-width: unset;
  }
  .news-sidebar {
    width: 300px;
  }
  .news-sidebar .banner-container img,
  .news-sidebar .banner img {
    max-width: 300px;
  }
  body {
    background-color: #E6E6E6;
  }
  .newNav {
    display: none;
  }
  .oldNav, .logo, #user2.oldNav {
    display: block;
  }
  .oldNav.filler {
    flex-grow: 1;
  }
  .row.col-left {
    margin-left: 0;
  }
  .container, .container-fluid, .footer {
    width: 1106px;
    margin-right: auto;
    margin-left: auto;
  }
  .container, .container-fluid {
    padding-inline: 20px;
  }
  .container.nav-container, .container-fluid.nav-container {
    padding-inline: 20px;
    padding-top: 5px;
    height: 58px;
  }
  .container .row > div, .container-fluid .row > div {
    margin-bottom: 0;
  }
  header {
    padding: 0 27px !important;
  }
  header .main-logo {
    width: 300px;
  }
  header .filler {
    flex-grow: 1;
  }
  .logo h1 {
    margin-bottom: 0;
  }
  #translate {
    padding-left: 2px;
  }
  .nav_button {
    margin-top: 0;
    padding-block: 5px;
  }
  #nav {
    padding-top: 16px;
  }
  #nav ul {
    margin-right: 0;
    padding-bottom: 5px;
  }
  #nav ul li a, #nav ul li a:link, #nav ul li a:active, #nav ul li a:visited, #nav ul li a:hover {
    padding: 5px 8px 6px 8px;
    line-height: 1.7em;
  }
  #nav ul li a.active {
    border-bottom: 4px solid #580023;
  }
  #nav ul li a:hover {
    border-bottom: 4px solid #CC6B48;
  }
  #nav ul li:first-child a {
    padding-left: 0;
  }
  .search-inline-wrapper #txtSearch {
    margin-right: 15px;
  }
  .search-inline-wrapper #btnSubmitSearch {
    right: 25px;
  }
  .no-gutter {
    padding: 2px 15px 5px 15px;
  }
  .no-gutter p {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .block-panel {
    padding-top: 12px;
  }
  .block-panel h2 {
    border-bottom-width: 6px;
  }
  .content-panel.padding-top {
    padding-top: 15px;
  }
  .headline-panel .title h2 {
    font-size: 100%;
  }
  .headline-panel .title h2.wide {
    width: 11rem;
  }
  .headline-panel .title-underline {
    width: 100%;
  }
  .headline-panel .buttons {
    width: 49%;
    margin-left: 2px;
  }
  .headline-panel .buttons .button {
    padding-top: 1px;
    padding-left: 15px;
    line-height: 27px;
    font-size: 100%;
  }
  .headline-panel .buttons .button .label {
    top: 1px;
    left: 15px;
  }
  .main-panel .right-col .row {
    height: auto;
  }
  .main-panel .right-col .news-md {
    border-bottom-width: 6px;
  }
  .main-panel > .row > div:first-child {
    padding-right: 6px;
  }
  .main-panel > .row > .right {
    padding-left: 8px;
  }
  .main-panel .right .sponsor-container.mb-2 {
    margin-bottom: 0.7rem !important;
  }
  .main-panel .right .sponsor-container > .col-6:first-child {
    padding-right: 6px !important;
  }
  .main-panel .right .sponsor-container > .col-6:last-child {
    padding-left: 6px !important;
  }
  .article-home {
    padding-right: 15px;
  }
  .container .news-md h3 {
    font-size: 1.05rem;
  }
  .container .news-lg {
    margin-bottom: 0 !important;
  }
  .content-panel .article, .content-panel .archiveTab, .content-panel .ezineTab {
    min-height: 462px !important;
  }
  .content-panel .article.no-headline-bar, .content-panel .archiveTab.no-headline-bar, .content-panel .ezineTab.no-headline-bar {
    min-height: 510px !important;
  }
  .content-panel .article.has-intro-text, .content-panel .archiveTab.has-intro-text, .content-panel .ezineTab.has-intro-text {
    min-height: 435px !important;
  }
  .content-panel .article .section-image, .content-panel .archiveTab .section-image, .content-panel .ezineTab .section-image {
    border: solid 0px red;
    overflow: visible;
    width: 360px;
  }
  .content-panel .links {
    padding-left: 1em;
  }
  .content-panel .links a, .content-panel .links a:link, .content-panel .links a:active, .content-panel .links a:visited, .content-panel .links a:hover {
    font-size: 90%;
  }
  .content-panel .related .related-items {
    width: 92%;
  }
  .news-section .links ul.spaced {
    gap: 1.5em;
  }
  .content-panel .links ul, .feature-section .links {
    margin-bottom: 0.5rem;
  }
  .content-panel .links ul ul, .feature-section .links ul {
    margin-top: 0;
    height: 95%;
    margin-left: 0.5rem;
    padding-bottom: 1em;
  }
  .content-panel .links ul li .item-img {
    margin-bottom: 0;
  }
  .feature-section .noheadlinebar {
    min-height: 421px !important;
  }
  .feature-section .links ul {
    height: 100%;
  }
  .feature-list {
    padding: 0;
  }
  .archive-list {
    min-height: 2800px;
  }
  .archiveTab ul.buttonlist li {
    flex: 0 1 38%;
  }
  /* 1. Main Page Grid: Constrain main content and protect 300px sidebar */
  .ezine-page-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
  }
  .ezine-main-content {
    min-width: 0; /* Prevents main content from blowing out the grid */
  }
  /* 2. Ezine Grid: Flow the years into side-by-side rows */
  .ezine-browse-grid {
    display: grid;
    /* Automatically creates as many 200px columns as will fit in the 1fr space */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem 1.5rem;
  }
  .ezine-year {
    display: flex;
    flex-direction: column;
  }
  .form {
    max-width: 702px;
  }
  .login-section {
    min-height: 502px;
  }
  .login-section .text {
    margin: 1em 0 2em 0;
  }
  .login-section .disclaimer {
    margin-top: 90px;
  }
  .video-banner {
    min-height: 295px;
  }
  .ezine-banner-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block: 0.8em 0.2em;
  }
  .ezine-banner-container .ezine-socials {
    width: 300px;
    position: relative;
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin-right: 6px;
  }
  .ezine-banner-container .ezine-socials img {
    width: 290px;
    height: auto;
    display: block;
  }
  .accountSection {
    /* Put Mailing Lists side-by-side in two columns */
  }
  .accountSection.mailingLists .content {
    flex-direction: row;
  }
  .accountSection.mailingLists .content .account-usermailinglists {
    flex: 1; /* Share space evenly */
    padding-right: 2em; /* Gap between the columns */
  }
  .accountSection {
    /* Put Billing & Delivery Addresses side-by-side in two columns */
  }
  .accountSection.addresses .content .address .user-details {
    flex-direction: row;
  }
  .accountSection.addresses .content .address .user-details .address-section {
    flex: 1; /* Share space evenly */
    padding-right: 2em; /* Gap between the columns */
  }
}
/* Desktop overrides */
@font-face {
  font-family: "AvenirLT-Medium";
  src: url("../fonts/AvenirLT-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/AvenirLT-Medium.woff") format("woff"), url("../fonts/AvenirLT-Medium.ttf") format("truetype"), url("../fonts/AvenirLT-Medium.svg#AvenirLT-Medium") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 👉 THE FIX: Prevents Invisible Text while loading */
}
@font-face {
  font-family: "AvenirLT-Black";
  src: url("../fonts/AvenirLT-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/AvenirLT-Black.woff") format("woff"), url("../fonts/AvenirLT-Black.ttf") format("truetype"), url("../fonts/AvenirLT-Black.svg#AvenirLT-Black") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 👉 THE FIX: Prevents Invisible Text while loading */
}
@media only screen and (min-width: 360px) {
  .nav_heading h1 a img {
    height: 20px;
  }
}
@media only screen and (min-width: 400px) {
  .nav_heading h1 a img {
    height: 25px;
  }
}
@media only screen and (min-width: 485px) {
  .nav_heading h1 a img {
    height: 30px;
  }
}

@media only screen and (min-width: 485px) {
  .nav_button {
    width: 45px;
  }
}
@media (pointer: coarse) {
  /* 👉 THE FIX: Targeted touch sizes rather than global padding */
  nav a,
  .buttons a,
  .article-list a.button {
    min-height: 24px;
    min-width: 48px;
  }
  nav a.active,
  .buttons a.active,
  .article-list a.button.active {
    border-bottom-color: #BC4932;
  }
}

/*# sourceMappingURL=Stylesheet1.css.map */