/* --- HERO BANNER FULL-WIDTH --- */
.sp-grid-section:first-of-type {
    background-image: url('https://docs.nomagic.com/download/attachments/263094478/banner.png?api=v2');
    background-size: cover;          /* ensures the image covers the entire section */
    background-position: center;     /* centers the image */
    background-repeat: no-repeat;    

    width: 100vw;                    /* full viewport width */
    max-width: 100%;                  /* prevent any inherited max-width */
    
    text-align: center;
    background-color: transparent !important;
}

/* Make title and intro text white */
.sp-grid-section:first-of-type h1,
.sp-grid-section:first-of-type h3,
.sp-grid-section:first-of-type h3 * {
    color: white !important;
}

/* Make search result suggestions grey overriding the rule for H1 and H3 above */
.aui-dropdown.search-macro-dropdown ol li.with-additional > a,
.aui-dropdown.search-macro-dropdown ol li.with-additional > a > span {
    color: #6b6b6b !important;
}

/* Make H3 in the hero banner lighter */
.sp-grid-section:first-of-type h3 {
  font-family: "roboto-regular", Helvetica, Roboto, Arial, sans-serif !important;
  font-size: 24px !important;  
  font-weight: 300 !important;       /* normal weight instead of 500 */
}

/* Make H1 in the hero banner heavier */
.sp-grid-section:first-of-type h1 {
    font-family: "roboto-bold", Helvetica, Roboto, Arial, sans-serif !important;
    font-size: 3rem;
}

/* Hide anchor icons inside all headings */
h1 .article__content__content__anchor,
h2 .article__content__content__anchor,
h3 .article__content__content__anchor,
h4 .article__content__content__anchor {
    display: none !important;
}

/* Widen the search field only in the first hero banner section */
.sp-grid-section:first-of-type .search-macro.search-macro-large {
    width: 100%;       /* full width of the banner section */
    max-width: 900px;  /* or whatever maximum width you want */
    margin: 0 auto;    /* center it horizontally */
}

/* Hide search bar in the header */
header.header__navigation .top-bar-right form#search {
    display: none !important;
}

/*  ---EXPAND ARTICLE TO FULL WIDTH --- */

.article.grid-container {
  	padding-left: 0 !important;
  	padding-right: 0 !important;
    }

.article .article__content article {
  	padding: 0 !important;
}

.article {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    max-width: 3000px !important;
}

/* --- HIDE NAVIGATION TREE --- */
.article__navigation {
    display: none !important;
}

/* --- HIDE TABLE OF CONTENTS --- */
.article__toc {
    display: none !important;
}

/* --- HIDE PAGE TITLE --- */
.article__heading {
    display: none !important;
}

/* --- HIDE BREADCRUMBS --- */
.breadcrumbs,
.breadcrumbs li {
    display: none !important;
}

/* --- STYLE SPACE BLOCKS AND CATEGORIES --- */

/* Content width for all sections except the first (banner) */
.sp-grid-section:not(:first-of-type) {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Allow shadows to extend outside column macros */
.columnMacro {
    padding: 10px !important;
  	margin-top: 0 !important;
}
.columnMacro p {
    max-width: 100% !important;
  	line-height: 1.3rem !important;
}
.sectionMacro {
    margin-top: 0 !important;
}

/* Equalize tile heights based on tallest tile */
.sectionMacroRow {
    display: flex;
    align-items: stretch; /* ensures all children stretch to the same height */
}
.columnMacro {
    display: flex;
    flex-direction: column;
}
.columnMacro > a {
    flex: 1 1 auto; /* grow/shrink to fill column height */
    height: auto;   /* ensure it can expand with content */
}

/* Adjust headings */
.sp-grid-section:not(:first-of-type) h2 {
    font-family: "roboto-medium", Helvetica, Roboto, Arial, sans-serif !important;
    line-height: 45px !important;
    margin-bottom: 1rem !important;
  	margin-top: 4rem !important;
  	margin-left: 1rem !important;
}

.sp-grid-section:not(:first-of-type) h3 {
    margin-bottom: 1rem !important;
  	line-height: 1.5rem !important;
}

/* Stack tiles in one column on small screens */
@media (max-width: 768px) {
  .sectionMacroRow {
    display: flex;
    flex-direction: column !important; /* stack columns vertically */
  }
  .columnMacro {
    width: 100% !important;  /* each column takes full width */
    min-width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- INCREASE NOTE MACRO WIDTH --- */
div.panel-macro.panel-macros--note {
  max-width: 100% !important;
}