/* 
Most of this file is from the previous developer, whose approach 
was to create one theme for all of his clients' sites. Honestly, it should be 
rewritten completely at some point. 
Generally, it defines the layout and formats the collapsiblock (jquery plugin) menus
*/

/** LAYOUT ---------------------------------------------------------------- 
Includes: 
    Global resets and definitions 
    Menu layout 
    Main layout
    Region spacing 
    Frontcopy testing
    Accessibility tools positioning 
    Collapsible banner 
    Resize for 768px, 992px, 1200px, 1400px
    Social icons positioning 
    
PATTERN:
Main
  DIV--featured
  SECTION--layout-content
    DIV--region-content
      DIV--block-system-main-block
        ARTICLE--
          DIV--node__content
  FOOTER--
    DIV--region-footer
      DIV--newsletter-signup (front page only)
      DIV--partners (front page only)
      DIV--block-copywrite
      DIV--information
      DIV--social
-------------------------------------------------------------------------- **/

/**global resets/definitions**/
html, body {
	margin: 0;
	overflow: hidden; }
body {
	font-size: 1.125em;
	line-height: 1.8em;
	text-rendering:optimizeLegibility;}
html, body, .dialog-off-canvas-main-canvas {  height: 100%; }
/* .dialog-off-canvas-main-canvas { height: 100%; } */

.layout-container {
    margin: 0 auto;
    height: 100%;
    display: grid;
    column-gap: 0;
    border: 0 auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header" "main";}
header[role=banner] { 
    grid-area: header; 
    position: relative; 
    z-index: 10; } 

/**menu layout**/
nav.menu { 
	grid-area: auto; 
	grid-column: 1 / 1; 
	grid-row: 1 / 1; 
	overflow-y: auto;
	padding: 5px 10px;
	overflow-y: hidden;
}

/**main layout**/
main {
	grid-area: main;
	overflow: auto;
	display: grid;
	column-gap: 0;
	grid-template-rows: auto auto 1fr auto auto auto;
	grid-template-areas: "featured" "content" "sidebar1" "sidebar2" "footer";}
.layout-container > main > .layout-content {
    grid-area: content;
	width: 100%;
}

.layout-sidebar-first { grid-area: sidebar1; }
.layout-sidebar-second { grid-area: sidebar2; }
div.featured { grid-area: featured; }
footer { grid-area: footer }

/**region spacing**/
.region-header { padding: 5px 45px 5px 10px; }
.region-content, .region-footer { padding: 20px 10px; }
.region-sidebar-second { padding: 20px 10px 0 10px; }
.region-content:after, .region-header:after {
	display: table;
	clear: both;
	content: "";}
.layout-sidebar-second .block:not(:last-child) { margin-bottom: 2em; }
.layout-content .block { margin-bottom: 1em; }
.layout-content .block-page-title-block { margin-bottom: 0; }

/**accessibility tools positioning**/
header[role=banner] #block-accessibilitytoolbar, 
header[role=banner] #block-daedal-client-search {
	position: absolute;
	text-align: right; 
	top: 5px; 
	z-index: 10; }
header[role=banner] #block-accessibilitytoolbar { right: 5em; }
header[role=banner] #block-daedal-client-search { right: 2.5em; }
header[role=banner] #block-accessibilitytoolbar button { padding: 2px 6px; }
header[role=banner] #block-accessibilitytoolbar .accessibility--controls { font-size: 0.88888888em; }


/**collapsible banner**/
header[role=banner] .collapsiblock, .sf-accordion-toggle {
    display: block;
    background-image: none;
    line-height: 1em;
    font-size: 1rem;}
header[role=banner] .collapsiblock A, #superfish-main-toggle {
    z-index:200;
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 1.75em;
    height: 1.75em;
    background-color: #fff;
    -webkit-mask-size: 75%;
    mask-size: 75%;
    padding: 5px;
    	-webkit-border-top-left-radius: 10px;
    	-webkit-border-top-right-radius: 10px;
    	-moz-border-radius-topleft: 10px;
    	-moz-border-radius-topright: 10px;
    	border-top-left-radius: 10px;
    	border-top-right-radius: 10px;
    	mask-position: center;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;}
header[role=banner] .collapsiblock A > H2, #superfish-main-toggle span {
    position:absolute;
    top:2em;
    left:-999em;
    transform:translateX(-50%);}
header[role=banner] .collapsiblock:not(.collapsiblockCollapsed) A, #superfish-main-toggle.sf-expanded {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-size: 75%;
    background-position-x: center; 
    background-position-y: 7px; 
    background-repeat: no-repeat;
    padding-bottom: 10px;}
#block-accessibilitytoolbar .collapsiblock A {
    -webkit-mask-image: url(../images/accessibility.svg);
    mask-image: url(../images/accessibility.svg);}
header[role=banner] #block-accessibilitytoolbar .collapsiblock:not(.collapsiblockCollapsed) A {
    background-image: url(../images/accessibility.svg);}
#block-daedal-client-search .collapsiblock A {
    -webkit-mask-image: url(../images/search.svg);
    mask-image: url(../images/search.svg);}
header[role=banner] #block-daedal-client-search .collapsiblock:not(.collapsiblockCollapsed) A {
    background-image: url(../images/search.svg);}
#superfish-main-toggle {
    -webkit-mask-image: url(../images/hamburger.svg);
    mask-image: url(../images/hamburger.svg);
	-webkit-mask-size: 60%;
	mask-size: 60%;
	float:right;
}
#superfish-main-toggle.sf-expanded {
    background-image: url(../images/hamburger.svg);
    background-size: 60%; 
}
header[role=banner] #search-block-form, header[role=banner] .accessibility--controls { padding: 0 10px; }


/**resize for medium screen**/
@media (min-width: 768px), print {
    /*.node__content:not(.path-frontpage) {*/
        
    /*}*/
    .block-system-main-block,
    .block-menu {
        margin: 0 7em;
    }
    .path-frontpage .block-system-main-block {
        margin: 0;
    }
    .page-title {
        margin-left: 5em;
    }
    .breadcrumb {
        margin-left:8em;
    }
  html, body { overflow: visible; }
  nav.menu { grid-area: menu; overflow-y: visible; }
  .layout-container {
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "header" "menu" "main";
  }
  main {
	overflow: visible;
	grid-template-rows: auto 1fr auto auto auto;
    grid-template-columns:
      calc( 50% - 360px )
      720px
      calc( 50% - 360px );
    grid-template-areas:
     "featured featured featured"
      ". content ."
      ". sidebar1 ."
      ". sidebar2 ."
      "footer footer footer";
  }
	.sidebars-first main, .sidebars-both main {
	grid-template-columns:
      calc( 50% - 360px )
      180px 540px
      calc( 50% - 360px );
    grid-template-areas:
     "featured featured featured featured"
      ". sidebar1 content ."
      ". sidebar2 sidebar2 ."
      "footer footer footer footer";
	}
	.region-header, .region-footer { 
	    padding: 20px; 
	    width: 680px; 
	    margin: 0 auto; }
	.region-menu {
		padding: 0 20px; 
		width: 680px; 
		margin: 0 auto;
	}
	#block-mainnavigation, .region-menu {
		display: table;
		clear: both;
		content: "";
		z-index: 10;
	}
	nav.menu { padding: 0; }
	.region-content, .region-footer, .region-sidebar-second { padding: 20px; }
	header[role=banner] #search-block-form, 
	header[role=banner] .accessibility--controls { 
	    padding: 0; 
	    display: flex !important;
	    flex-direction:column;}
	header[role=banner] #block-accessibilitytoolbar, 
	header[role=banner] #block-daedal-client-search {
		position: static;
		top: 0;
		right: 0;
		}
	header[role=banner] .collapsiblock { display: none; }
}
/**end min768px nest**/

/**resize for mid-large screens**/
@media (min-width: 992px) {
  
  
  
  main {
   grid-template-columns:
      calc( 50% - 480px )
      480px 480px
      calc( 50% - 480px );
   grid-template-areas:
     "featured featured featured featured"
      ". content content ."
      "footer footer footer footer";
   }
  .sidebars-first main, .sidebars-both main {
   grid-template-columns:
      calc( 50% - 480px )
      240px 720px
      calc( 50% - 480px );
    grid-template-areas:
     "featured featured featured featured"
      ". sidebar1 content ."
      ". sidebar2 sidebar2 ."
      "footer footer footer footer";
  }
  .sidebars-second main {
   grid-template-columns:
      calc( 50% - 480px )
      720px 240px
    calc( 50% - 480px );
    grid-template-areas:
     "featured featured featured featured"
      ". content sidebar2 ."
      "footer footer footer footer";
  }
  .region-header, .region-menu, .region-footer { width: 920px; }
}
/**end 992px nest**/

/**resize for large screens**/
@media (min-width: 1200px) {
  main {
    grid-template-columns:
      calc( 50% - 570px )
	  285px 570px 285px
      calc( 50% - 570px );
    grid-template-areas:
     "featured featured featured featured featured"
      ". content content content ."
      "footer footer footer footer footer";
  }
  .sidebars-first main {
    grid-template-columns:
      calc( 50% - 570px )
	  285px 570px 285px
      calc( 50% - 570px );
    grid-template-areas:
     "featured featured featured featured featured"
      ". sidebar1 content content ."
      "footer footer footer footer footer";
  }
  .sidebars-second main {
    grid-template-columns:
      calc( 50% - 570px )
	  285px 570px 285px
      calc( 50% - 570px );
    grid-template-areas:
     "featured featured featured featured featured"
      ". content content sidebar2 ."
      "footer footer footer footer footer";
  }
  .sidebars-both main {
    grid-template-columns:
      calc( 50% - 570px )
	  285px 570px 285px
      calc( 50% - 570px );
    grid-template-areas:
     "featured featured featured featured featured"
      ". sidebar1 content sidebar2 ."
      "footer footer footer footer footer";
  }
	.region-header, .region-menu, .region-featured, .region-footer { width: 1100px; margin: 0 auto; }
	.region-content, .region-second-sidebar { padding: 30px; }
}
/**end 1200px nest**/

/**resize for xlarge screens**/
@media (min-width: 1400px) {
  main {
    grid-template-columns:
      calc( 50% - 660px )
      330px 660px 330px
      calc( 50% - 660px );
  }
  .sidebars-first main {
    grid-template-columns:
      calc( 50% - 660px )
      330px 660px 330px
      calc( 50% - 660px );
    grid-template-areas:
     "featured featured featured featured featured"
      ". sidebar1 content content ."
      "footer footer footer footer footer";
  }
  .sidebars-second main {
    grid-template-columns:
      calc( 50% - 660px )
      330px 660px 330px
      calc( 50% - 660px );
    grid-template-areas:
     "featured featured featured featured featured"
      ". content content sidebar2 ."
      "footer footer footer footer footer";
  }
  .sidebars-both main {
    grid-template-columns:
      calc( 50% - 660px )
      330px 660px 330px
      calc( 50% - 660px );
    grid-template-areas:
     "featured featured featured featured featured"
      ". sidebar1 content sidebar2 ."
      "footer footer footer footer footer";
  }
  .region-header, .region-menu, .region-featured, .region-footer { width: 1280px; }
}
/** end 1400px nest **/

/**social icons positioning**/
header[role=banner] .block-social .field A { 
    margin-left: 1em; 
    display: inline-block; }
footer .block-social .field A { 
    margin: 0 .5em; 
    display: inline-block; 
    vertical-align: middle; }
.block-social IMG { 
    width: 42px; 
    height: 42px; 
    transition: 0.1s; }
.block-social A:hover IMG { transform: scale(1.166666666666667); }


/** UI FIXES -------------------------------------------------------------
Includes: misc spacing, background tweaks
-------------------------------------------------------------------------- **/

.system-modules details { white-space: normal; }
/* .cke_reset { width: 100% !important; } */
button.link { border: none; }

.project-update__compatibility-details details { 
    border: 0; 
    margin: 0; }
.menu-item--expanded { 
    list-style-type: disc; 
    list-style-image: none; }

.editor-link-dialog .ui-dialog-content { overflow: visible; }
time { white-space: nowrap; }
.webform-dropbutton .dropbutton-wrapper .dropbutton-widget { background-color: #fff; }
.filter-guidelines { clear: left; }

#edit-delete::before {
	content: "";
	background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23d72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
    position: relative;
	top: 0.125rem;
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.5em;
	margin-left: -0.25rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}