/* NDSC CSS Overrides, added by Marc Alderman*/


:root {
  --text-color: #d6d6d6;
  --ndsc-primary: #ffee32;
  --ndsc-secondary: #ffd100;
  --bg-color: #202020;
  --content-bg: #333533;
}

/* Import of Raleway google font*/
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap");

.widget_CheckoutWizardWidget {
  background-color: #FFFFFF;
}

body {
  font-family: "Raleway", sans-serif;
  font-weight: 400; /* adjust font weight as needed */
}

h2 {
  color: var(--ndsc-secondary);
}

.NDSCCustomPageCard h3 {
  color: #ffffff;
}

/* Background SVG */
#globalContainer,
#news {
  background-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23222' stroke-width='10' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");
}

/* Hide content that I don't want as it can't be removed via 
the designer and leaves blank space at the bottom of the home page */
#eventsAndCommands,
#contact,
#updates,
#sponsors {
  display: none;
}

@media only screen and (max-width: 425px) {
  #mainContent > .CMSSection {
    padding: 0.5em;
}
}

/* -------------------------------- CUSTOM PAGES - The main content of each page ----------------------------- */

.CustomPageComponentContent:has(.NDSCCustomPageCard),
.CMSComponentMainText:has(.NDSCCustomPageCard),
.CMSComponentGenericContent:has(.NDSCCustomPageCard){
  background-color: #333533; /* Change the background to grey */
  border-radius: 15px;
  padding: 15px;
  border: 1px solid var(--ndsc-primary);
}

.CustomPageComponentContent:not(:has(.NDSCSmallCard)), .NDSCCustomPageCard:not(.NDSCSmallCard) {
  background-color: var(--content-bg);
  color: #d6d6d6;
}

.NDSCCustomPageCard a {
    color: #87CEEB;
}

/* Stop button getting truncated when screen is narrow, but not under 922px where it will switch to mobile */

@media (min-width: 922px) {
  .CMSComponent.CMSComponentCommandButtons {
    overflow: visible;
  }
}

.ndsc_hdivide {
  background-image: url("https://raw.githubusercontent.com/marjald/ndsc_css/refs/heads/main/skewed-rectangle-short.svg");
  background-size: 100% auto;

  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 1em;
}

.ndsc_hdivide_narrow {
  background-image: url("https://raw.githubusercontent.com/marjald/ndsc_css/refs/heads/main/skewed-rectangle-narrow.svg");
  background-size: 100% auto;

  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 1em;
}

@media (max-width: 922px) {
  .ndsc_hdivide_narrow {
    margin-top: 1em;
  }
}

.NDSCCustomPageCard ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.NDSCCustomPageCard ul li {
  background-image: url("https://raw.githubusercontent.com/marjald/ndsc_css/refs/heads/main/bpoint.svg");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  padding-left: 25px;
  margin-bottom: 10px;
}

.NDSCCustomPageCard ul li {
  line-height: 24px; /* adjust the line height to create space between list items */
}

/* -------------------------------- WELCOME SECTION -------------------------------- */

#welcome,
#mainContent {
  background-image: url("https://raw.githubusercontent.com/marjald/ndsc_css/refs/heads/main/triangle-half-bottom-left.svg"),
    url("https://raw.githubusercontent.com/marjald/ndsc_css/refs/heads/main/triangle-half-top-left.svg"),
    url("https://raw.githubusercontent.com/marjald/ndsc_css/refs/heads/main/triangle-half-top-right.svg"),
    url("https://raw.githubusercontent.com/marjald/ndsc_css/refs/heads/main/triangle-half-bottom-right.svg");
  background-size: 5% auto, 5% auto, 5% auto, 5% auto;
  background-position: left bottom, left top, right top, right bottom;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

/* -------------------------------- NEWS ITEMS - HOME ans NEWS PAGES -------------------------------- */

/* News item background colour, otherwise it will take the general 
theme colour which is black, ans the same as the background */
#news .CMSComponentNews .Item,
.NewsFilterForm .Item,
.CMSComponentFullNews .ItemList .Item {
  background-color: var(--content-bg);
  padding: 1em;
  border-radius: 10px;
  margin-bottom: 15px;
  border: 1px solid var(--ndsc-primary);
}

#news .CMSComponentNews .Item .Content h4 > a,
.CMSComponentFullNews .ItemList .Item .Content .Title > h4 > a {
  color: #ffd100;
}

.CMSComponentFullNews .ItemList .Item .Content {
  background-color: var(--content-bg);
}

.CMSComponentFullNews > .ItemList > .Item + .Item:not(.Supplement) {
  border-top: solid 1px var(--ndsc-primary);
}

.CMSComponentFullNews .NewsFilterForm > h2 {
  color: var(--ndsc-secondary);
}

.responsive-image {
  width: 50%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 1px solid #ffee32;
  box-shadow: 0 0 15px 5px #ffee32;
}

div.NewsItem > img.Primary {
  display: block;
  margin: auto;
}

@media screen and (max-width: 991px) {
  #welcome > .CMSSection,
  #news > .CMSSection,
  #eventsAndCommands > .CMSSection,
  #updates > .CMSSection,
  #contact > .CMSSection,
  #sponsors > .CMSSection {
    padding: 2em 4em 0em 2em;
  }
}

/* Fixes */
/* This first fix adjusts the default positioning of the thumbnail images in news stories.  
By defult the styling often cuts of heads so i am adjusting for specific images where needed*/

img[src="/sendsc/news/358625afec7543c68b3ec927a561a229/518461969-1347934590480649-5306832809319816226-n_081673-tsm-thumb.jpg"],
img[src="/sendsc/news/13a1da23b09448f18c8165c200066ef2/508281134-10162865734263777-4324304291296914288-n_037434-tsml-thumb.jpg"]{
	top: -20px !important;
}

/* -------------------------------- OPEN NEWS ITEMS -------------------------------- */

.NewsItem {
  background-color: var(--content-bg);
  padding: 1em;
  color: #d6d6d6;
  border-radius: 10px;
  border: 1px solid var(--ndsc-primary);
}

.NewsItem h1 {
  color: #ffd100;
}

/* -------------------------------- NAVIGATION BAR -------------------------------- */

/* Navigation menu item color */
.CMSComponentMainNavigator .MainNavigator li > a {
  color: var(--ndsc-primary);
}

/* Navigation menu active item color */
.CMSComponentMainNavigator .MainNavigator li.Active > a {
  color: var(--ndsc-secondary);
}

.CMSComponentMainNavigator {
  background-image: url("https://raw.githubusercontent.com/marjald/ndsc_css/refs/heads/main/triangle-half-bottom-left.svg"), url("https://raw.githubusercontent.com/marjald/ndsc_css/refs/heads/main/triangle-half-bottom-right.svg");
  background-size: 5% auto, 5% auto;
  background-position: left bottom, right bottom;
  background-repeat: no-repeat, no-repeat;
}

ul.MainNavigator.Menu > li.Active {
  border-bottom: 1px solid var(--ndsc-primary);
  color: var(--ndsc-secondary);
}

#cms_Section_menuBar
  > div
  > div
  > div
  > ul
  > li.Active.WithChildren
  > ul
  > li.Active
  > a {
  color: var(--bg-color);
}

#menuBar {
  border-bottom: none;
}

/* mobile */

.DynamicTemplate_cms_widgets_MobileHeader_xhtml
  .AnonId__cms_widgets_MobileHeader_xhtml_menuContainerInner
  a {
  color: #d6d6d6;
}

.MainNavigator li.Active > a {
  color: #ffee32;
}

.MainNavigator li:hover > a {
  color: #ffd100;
}

/* -------------------------------- SOCIAL LINKS -------------------------------- */

/* Social links colour */
.CMSComponentSocialLinks > .Horizontal > li > a {
  background: var(--content-bg);
}

/* Navigation open menu background colour - white by default and can't change it in designer that I can see */
#cms_Section_menuBar ul ul {
  background: #d6d6d6;
}

/* Mobile navigation open menu background colour */
.DynamicTemplate_cms_widgets_MobileHeader_xhtml
  .AnonId__cms_widgets_MobileHeader_xhtml_menuContainerInner {
  background: #333533;
}

#siteFooter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100'%3E%3Cpath d='M0 0v92.3C106.3 35 276 23.6 343.6 73.7 458.2 18.3 637 8.5 693 57.3 779.6 18.6 915.7-2.4 1000 16.1V0H0Z' fill='%23FFEE32'%3E%3C/path%3E%3C/svg%3E");
  background-size: 100% auto;
  background-position: top;
  background-repeat: no-repeat;
}

.IconWrapper {
  border: 1px solid var(--ndsc-primary);
}

#news {
  background-image: url("https://raw.githubusercontent.com/marjald/ndsc_css/refs/heads/main/triangle-half-bottom-left.svg"),
    url("https://raw.githubusercontent.com/marjald/ndsc_css/refs/heads/main/triangle-half-top-left.svg"),
    url("https://raw.githubusercontent.com/marjald/ndsc_css/refs/heads/main/triangle-half-top-right.svg"),
    url("https://raw.githubusercontent.com/marjald/ndsc_css/refs/heads/main/triangle-half-bottom-right.svg"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23222' stroke-width='10' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 5% auto, 5% auto, 5% auto, 5% auto, auto;
  background-position: left bottom, left top, right top, right bottom,
    center center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}