/**
 * @file
 * DRAccess Customizations
 *
 * @see url for image links: url(../../images/images.png)
 */


/* Load Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Oswald:wght@200;300;400;500;600;700&display=swap');

/* Global box-sizing rule at the top to make calculations easier */
*, *::before, *::after {
  box-sizing: border-box;
}


:root {

  --bg: #b3c4d7;
  --text: #333;
  --headers: #a04a23;
  --text-muted: #444;
  --link-hover: #f15a29;
  --box-border: #5b86ab;
  /* cards */
  --card-border: #d7dfe9;
  --card-border-hover: #84abc4;
  --card-bg: #f2f7f9;
  --card-bg-hover: #fff;
  --card-title: #4e6a89;
  --card-radius: 0; /* set to 4px for rounded corners */
  --card-transition: 0.25s;
  --overlay-size: 60px;
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --thumb-bg: #f5f5f5;
  /* buttons and video tabs */
  --tab-border: #7193b5;
  --tab-hover-bg: #eaf1f5;
}


html {
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.5;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
	background-color: var(--bg);
}


/* GLOBAL LAYOUT */
.layout-container {
  background-color: #ffffff;
  width: 100%;
  max-width: 1200px;
  overflow-x: hidden;
  margin: 0 auto; /* centers the container */
  padding: 0;
  border-right: 1px solid var(--box-border);
  border-left: 1px solid var(--box-border);
  text-align: left;
  color: var(--text);
}
.region-content {
  margin-top: 0;
  padding-top: 0;
}


/* BASIC STYLES */
p {
	color: #000;
	margin: 0;
	padding: 0 0 1em 0;
	font-size: 1rem;
	line-height: 1.5;
}
hr {
	border: 0;
	margin-bottom: 3px;
	width: 100%;
	height: 1px;
	color: var(--bg);
	background-color: var(--box-border);
}

/* HEADERS */
h1, h2, h3, h4, h5, h6 {
	line-height: 1.5;
	color: var(--headers);
	margin: 0;
}
h1 { font-size: 1.8rem; font-weight: 800; padding: 18px 0 6px 0; }
h2 { font-size: 1.6rem; font-weight: 700; padding: 14px 0 0 0; }
h3 { font-size: 1.4rem; font-weight: 700; padding: 14px 0 0 0; }
h4 { font-size: 1.3rem; font-weight: 600; padding: 12px 0 0 0; }
h5 { font-size: 1.2rem; font-weight: 600; padding: 12px 0 0 0; }
h6 { font-size: 1.05rem; font-weight:500; padding: 10px 0 0 0; }

/* LINK STYLES */
a {
	color: #365980;
	text-decoration: none;
}
p a:link, p a:visited, td a:link, td a:visited, li a:link, li a:visited, h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited, .views-field-view-node a, .staff-email a {
	color: #365980;
	text-decoration: none;
	border-bottom: 1px dotted #32749e;
}
.views-field-view-node { font-size: .9rem; } /* Read more... link */
#block-draccess-content p a, #block-draccess-content li a, #block-draccess-content td a, #footer p a {
	border-bottom: 1px dotted #32749e;
}
p a:hover, td a:hover, li a:hover, h1 a:hover, h2 a:hover, h3 a:hover, .views-field-view-node a:hover, .staff-email a:hover {
	color: var(--link-hover);
	border-bottom: 1px dotted var(--link-hover);
}



/* TOP MENU CONTAINER */

.region-primary-menu {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 3px 16px;
  background-color: #d7e0ea;
  border-top: 1px solid var(--bg);
  border-bottom: 1px solid var(--bg);
  box-sizing: border-box;
}

/* Main menu - Top horizontal menu */
#block-draccess-main-menu {
  flex: 1 1 auto;
  min-width: 0;
}
#block-draccess-main-menu ul.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  margin: 0;
  padding: 0;
}
#block-draccess-main-menu ul.menu li.menu-item {
  float: none;
  margin: 4px 0;
  padding: 0;
  list-style: none;
}
#block-draccess-main-menu ul li.menu-item a {
  display: block;
  margin: 0;
  border: 1px solid var(--tab-border);
  padding: 2px 8px;
  background-color: var(--bg);
  color: #000;
  font-size: 1.1rem;
  line-height: 1.5;
  white-space: nowrap;
}
#block-draccess-main-menu ul li.menu-item--active-trail a, #block-draccess-main-menu ul li a.is-active {
	color: #285c7e;
	background-color: #d7e0ea;
}
#block-draccess-main-menu ul li.menu-item a:hover {
	border: 1px solid #84abc4;
	background-color: var(--tab-hover-bg);
	color: var(--link-hover);
}
#block-draccess-main-menu .menu-item--active-trail a:hover { color: var(--text-muted); background-color: #d7dfe9; }
#block-draccess-main-menu ul.links.inline.clearfix { height: 100px; }
#block-draccess-main-menu ul li.last { margin-right: 136px; }


/* Social Media Icons */
#webProperties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}
#webProperties a.social-icon {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 36px;
  margin: 2px 0;
  flex: 0 0 36px;
  overflow: hidden;
}
#webProperties a.social-icon img {
  display: block;
  width: 36px;
  height: 36px;
}

/* normal image */
#webProperties a.social-icon img.normal {
  position: relative;
  z-index: 1;
}

/* hover image stacked on top */
#webProperties a.social-icon img.hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  pointer-events: none;
}

/* show hover state */
#webProperties a.social-icon:hover img.hover,
#webProperties a.social-icon:focus-visible img.hover {
  opacity: 1;
}

/* MOBILE: STACK INTO 2 ROWS */
@media (max-width: 720px) {
  .region-primary-menu {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 6px 8px;
    padding: 3px 10px;
  }
  #block-draccess-main-menu,
  #block-draccess-webpropertiesicons {
    flex: 0 0 100%;
    width: 100%;
  }
  #block-draccess-main-menu ul.menu {
    justify-content: flex-start;
  }
  #webProperties {
    justify-content: flex-start;
  }
}

/* VERY SMALL PHONES */
@media (max-width: 480px) {
  #block-draccess-main-menu ul.menu {
    gap: 6px 8px;
  }
  #block-draccess-main-menu ul li.menu-item a {
    font-size: 1.1rem;
    padding: 3px 6px;
  }
  #webProperties {
    gap: 6px;
  }
}



/* @ToDo ADMIN USER MENU, currently hidden in drupal */
#block-draccess-account-menu {
	position: relative;
	text-align: right;
	margin: 0 20px 10px 20px;
	padding: 0;
}
#block-draccess-account-menu ul.menu { padding: 0; display: inline; }
#block-draccess-account-menu ul.menu li.menu-item {
	float: right;
    list-style-type: none;
    list-style-image: none;
	margin: 0;
    padding: 0;
}
.region-secondary-menu {
	position: relative;
	top: 0;
	right: 0;
}
.region-secondary-menu ul li a {
	margin: 4px 0 4px 6px;
	border: 1px solid var(--tab-border);
	padding: 2px 8px;
	background-color: var(--bg);
	color: #000;
	font-size: 1em;
	line-height: 1.5;
}
.region-secondary-menu ul li a.active { color:  var(--text-muted); background-color: #d7dfe9; }
.region-secondary-menu ul li a:hover { color: var(--headers); background-color: #d7e0ea; }
.region-secondary-menu .active a:hover { color:  var(--text-muted); background-color: #d7dfe9; }
.region-secondary-menu { padding-top: 6px; }



/* SEARCH FIELD */
#block-draccess-search-form-narrow {
	position: relative;
	text-align: right;
	margin: 8px 0 0 0;
	padding: 0;
}
#block-draccess-search-form-narrow .form-type-search {
	margin: 0;
	border: 1px solid #d7dfe9;
	padding: 0;
}
#block-draccess-search-form-narrow .form-search,
#block-draccess-search-form-narrow #edit-submit {
	line-height: 1.5;
	margin: 0;
	padding: 2px 8px;
}



/* NAVIGATION - VERTICAL SIDE NAVIGATION */
#block-draccess-sidenavigation, #block-draccess-sidenavigation2, #block-draccess-sidenavigation3 {
	width: 99%;
	margin: 0 0 .7em 0;
	border-right: 1px solid var(--bg);
}
#block-draccess-sidenavigation ul, #block-draccess-sidenavigation2 ul, #block-draccess-sidenavigation3 ul {
	list-style-type: none;
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
	padding: 0;
}
#block-draccess-sidenavigation ul ul, #block-draccess-sidenavigation2 ul ul, #block-draccess-sidenavigation3 ul ul {
	font-size: .95em;
	line-height: 1.5;
}
#block-draccess-sidenavigation ul ul li a, #block-draccess-sidenavigation2 ul ul li a, #block-draccess-sidenavigation3 ul ul li a {
	text-indent: 0;
}
#block-draccess-sidenavigation ul ul ul, #block-draccess-sidenavigation2 ul ul ul, #block-draccess-sidenavigation3 ul ul ul {
	font-size: 1em;
	line-height: 1.5;
}
#block-draccess-sidenavigation ul ul ul li a, #block-draccess-sidenavigation2 ul ul ul li a, #block-draccess-sidenavigation3 ul ul ul li a {
	padding-left: 50px;
}
#block-draccess-sidenavigation ul li, #block-draccess-sidenavigation2 ul li, #block-draccess-sidenavigation3 ul li {
	padding: 0;
	margin: 0;
}
#block-draccess-sidenavigation ul li.menu__item.is-collapsed, #block-draccess-sidenavigation ul li.menu__item.is-expanded, #block-draccess-sidenavigation ul li.menu__item.is-leaf, #block-draccess-sidenavigation2 ul li.menu__item.is-collapsed, #block-draccess-sidenavigation2 ul li.menu__item.is-expanded, #block-draccess-sidenavigation2 ul li.menu__item.is-leaf, #block-draccess-sidenavigation3 ul li.menu__item.is-collapsed, #block-draccess-sidenavigation3 ul li.menu__item.is-expanded, #block-draccess-sidenavigation3 ul li.menu__item.is-leaf {
	list-style-type: none;
	list-style-image: none;
}
#block-draccess-sidenavigation ul li a, #block-draccess-sidenavigation2 ul li a, #block-draccess-sidenavigation3 ul li a {
	margin: 0;
	border-bottom: 1px solid #fff;
	padding: 7px 3px 7px 27px;
	text-indent: -15px;
	display: block;
	overflow: hidden;
}
#block-draccess-sidenavigation ul li a {
	background: #3f7055;
	background-image: url(/images/sidebar_green.png);
	background-repeat: no-repeat;
}
#block-draccess-sidenavigation2 ul li a {
	background: #32749e;
	background-image: url(/images/sidebar_blue.png);
	background-repeat: no-repeat;
}
#block-draccess-sidenavigation3 ul li a {
	background: #38727b;
	background-image: url(/images/icon_calbloom_white.png);
	background-repeat: no-repeat;
	background-size: auto 100%;
	padding-left: 52px;
}
ul.contextual-links li a { background: #fff; }
#block-draccess-sidenavigation ul li a:link, #block-draccess-sidenavigation a:visited, #block-draccess-sidenavigation2 ul li a:link, #block-draccess-sidenavigation2 a:visited, #block-draccess-sidenavigation3 ul li a:link, #block-draccess-sidenavigation3 a:visited {
	text-decoration: none;
	color: #fff;
}

#block-draccess-sidenavigation ul li a:hover {
    background: #9ccc57;
	background-image: url(/images/sidebar_green.png);
	background-repeat: no-repeat;
    color: #000;
}
#block-draccess-sidenavigation ul li.menu-item--active-trail a.active, #block-draccess-sidenavigation ul li a.is-active {
	background: #c5d4cc;
	background-image: url(/images/sidebar_green.png);
	background-repeat: no-repeat;
    color: var(--text);
}
#block-draccess-sidenavigation2 ul li a:hover {
    background: #98b9ce;
	background-image: url(/images/sidebar_blue.png);
	background-repeat: no-repeat;
    color: #000;
}
#block-draccess-sidenavigation2 ul li a.active {
	background: var(--tab-border);
	background-image: url(/images/sidebar_blue.png);
	background-repeat: no-repeat;
    color: #222;
}
#block-draccess-sidenavigation3 ul li a:hover {
    background: #9ac392;
	background-image: url(/images/icon_calbloom_teal.png);
	background-repeat: no-repeat;
	background-size: auto 100%;
	padding-left: 52px;
    color: #000;
}
#block-draccess-sidenavigation3 ul li a.active {
	background: var(--tab-border);
	background-image: url(/images/sidebar_blue.png);
	background-repeat: no-repeat;
    color: #222;
}
.region-sidebar-first { padding: 0; }
.menu-item--collapsed {
    list-style-type: none;
    list-style-image: none;
}
.menu-item--expanded {
    list-style-type: none;
    list-style-image: none;
}
#block-draccess-sidenavigation ul.menu li ul.menu {
	display: none;
}
#block-draccess-sidenavigation ul.menu li.menu-item--active-trail ul.menu {
	display: block;
}
#block-draccess-sidenavigation ul li.is-active ul {
	display: block;
}


/* DOWNLOAD PDF FIELD and External URL FIELD (Read more...) */
.field--name-field-external-url,
.field--name-field-pdf-upload {
  width: auto;
  max-width: 61%;
  border: solid 1px var(--bg);
  padding: 6px 10px 8px 10px;
  background-color: #fafcfe;
}
.field--name-field-external-url {
  float: left;
  margin: 2px 0 20px 0;
}
.field--name-field-pdf-upload {
  margin: 8px 0 26px 0;
}
.field--name-field-pdf-upload .field__items,
.field--name-field-pdf-upload .field__item,
.field--name-field-pdf-upload .field--name-field-media-document {
  overflow: hidden;
}
.field--name-field-pdf-upload .file--application-pdf {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}
.field--name-field-external-url a,
.field--name-field-pdf-upload .file--application-pdf a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
  font-weight: 600;
  border-bottom: 1px dotted #365980;
  color: #365980;
}
.field--name-field-external-url a:hover,
.field--name-field-pdf-upload .file--application-pdf a:hover {
  color: var(--link-hover);
  border-bottom: 1px dotted var(--link-hover);
}


/* LIST STYLES */
 p + ul {
  margin-top: -10px;
}


/* IMAGE STYLES */
img {
	max-width: 100%;
	border: none;
}
/* Shared framed-image treatment */
.pix,
.css_medium_pix,
.pix_lrg,
.pix_left,
.list-view-thumb img {
	border: 1px solid var(--box-border);
}

/* Shared contain sizing for right-floated images */
.pix,
.css_medium_pix,
.pix_lrg,
.list-view-thumb img {
	width: auto;
	object-fit: contain;
}

.pix,
.css_medium_pix {
	float: right;
	max-height: 100%; /* prevent overflow vertically */
	max-width: 36%;
	margin: 1px 0 8px 10px;
}
.pix_lrg {
	float: right;
	max-width: 42%;
	min-width: 320px;
	margin: 6px 0 18px 22px;
}
.pix_left {
	float: left;
	width: 38%;
	margin: 3px 10px 16px 0;
}
img.border { border: 1px solid #4e6a89; }
img.noBorder { border: 0; }
.views-body-smPix p .pix { /* @todo still needed? */
	width: 22%;
}


/* --- TABLE STYLES --- */
main table {
  width: auto;
}
main table, main td, main th {
  border: 1px solid #bdceb2;
  border-collapse: collapse;
  padding: 4px;
  vertical-align: top;
  background-color: #fff;
  white-space: normal;
  overflow-wrap: break-word;
}
main table td ul { padding: 0 0 0 2px; list-style: disc inside; }
main table td ul.indent { padding: 0 16px 0 2px; list-style: disc inside; }
main table th { font-size: 1em; font-weight: 700; line-height: 1.5; text-align: left; color: var(--text); }
table p { padding-bottom: 3px; }
main table th.header1 { background-color: #d7dfe9; vertical-align: bottom; }
main table th.header2 { background-color: #f7f8fc; vertical-align: bottom; }
main table.noBorder, table.noBorder td, table.noBorder th { border: 0; }
main th.rtecenter { text-align: center !important; }

/* Table Wrapper - Can add scrolling when table is wider than content area */
main .table-wrapper, main .table-wrapper_sm {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto; /* Enable horizontal scroll */
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1em;
  min-width: 0;
}

/* Table inside the wrapper, allowed to be wider than wrapper */
main .table-wrapper table {
  width: auto;
  max-width: none !important;
  min-width: 690px;
  display: table !important;
}
main .table-wrapper_sm table {
  width: auto;
  max-width: none !important;
  display: table !important;
}

/* Control wrapping within cells inside the wrapper */
main .table-wrapper table th,
main .table-wrapper table td {
  white-space: normal;
  overflow-wrap: normal;
}



/* WELCOME SIDEBAR */
.layout-sidebar-second {
}
#block-draccess-welcomecolumn { }
#block-draccess-welcomecolumn h2 {
	margin-top: 0;
}



/* CUSTOM PAGE STYLES */

/* BOXED TEXT AT BEGINNING OF SECTION VIEWS OR ARTICLES */
.equal_boxes, /* for showing two equal width boxed divs */
.unequal_boxes { /* for showing two divs with two-thirds and a third widths */
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 8px 0 16px 0;
}
.equal_box_item {
	flex: 1 1 45%;
	min-width: 280px;
	background-color: #fff;
	border: 1px solid #adc7d8;
	padding: .9em .9em .5em .9em;
	box-sizing: border-box;
	overflow: hidden;
}
.group_photo {
	border: 0;
	padding: 0;
}
.group_photo img {
	border: 1px solid #adc7d8;
}
.unequal_box_item--big   {
	flex: 2 1 0%;
	min-width: 200px;
	background-color: #fff;
	border: 1px solid #adc7d8;
	padding: .9em;
	box-sizing: border-box;
}
.unequal_box_item--small {
	flex: 1 1 0%;
	min-width: 200px;
	background-color: #fff;
	box-sizing: border-box;
}
.unequal_box_item--small img {
	border: 1px solid #adc7d8;
	margin-bottom: 4px;
}
.equal_box_item > p:last-child,
.unequal_box_item--small > p:last-child,
.unequal_box_item--big > p:last-child {
	padding-bottom: 0;
}
.equal_box_item > ul:last-child,
.unequal_box_item--small > ul:last-child,
.unequal_box_item--big > ul:last-child {
	margin-bottom: 0;
}


.block_intro_text { /* for showing a single div with full width at top */
	margin: 6px 0 16px 0;
	border: solid 1px var(--bg);
	padding: 14px 12px 0 16px;
	font-size: .95em;
}
.block_moreinfo_text { /* for showing a single div with full width at bottom */
	margin: 22px 0 14px 0;
	border: solid 1px var(--bg);
	padding: 6px 16px 10px 16px;
	font-size: .95em;
}

.equal_box_item.noBorder {
	border: 0;
	padding: 0;
}


#learnButtons { /* @ToDo Links on Courses and Tutorials page */
	
}



/* @ToDo PHASE THIS PART OUT */
/* BOXED TEXT and BUTTONS AT BEGINNING of POCKET RATING BOOKLET */
.reports_intro {  }
.reports_intro a img {
	margin: 6px 0 0 0;
	border: 1px solid var(--bg);
}
.reports_intro a:hover img { border: 1px solid var(--headers); cursor: pointer; }
.reports_intro a:first-child { margin-right: 30px; }
/* BUTTONS FOR SUMMARY OF DRDP MANUALS AND POCKET RATING BOOKLETS */
.download_print_buttons { }
.download_print_buttons a img {
	margin: 0;
	border: 1px solid var(--bg);
}
.download_print_buttons a:hover img { border: 1px solid var(--headers); cursor: pointer; }
.download_print_buttons a:first-child, .download_print_buttons a:nth-child(2) { margin-right: 20px; }



/* FAQs PAGE */
.question {
	background: url(/images/FAQquestionBackground.png) left top no-repeat;
	padding-left: 38px;
	padding-bottom: 3px;
	margin-top: 6px;
	margin-bottom: 0;
}
.question h6 {
	padding-top: 8px;
	cursor: pointer;
}
.question h6 a:hover {
	color: var(--link-hover);
}
.answer {
	background: url(/images/FAQanswerBackground.png) left top no-repeat;
	padding-left: 38px;
	margin-bottom: 18px;
}

/* SUBSCRIBE PAGE */
.MailingListSection {
	text-align: left;
	display: inline-block;
}
#SignupFormPreview table {
	border: 0;
}
#SignupFormPreview td {
	white-space: nowrap;
	border: 0;
}
.SignupFormPreview label {
	font-weight: 400;
}
.SignupFormPreview label {
	display: inline-block;
	text-align: right;
}
.SignupFormPreview input {
	display: inline-block;
	min-width: 180px;
	text-align: left;
}
.SignupFormPreview select {
	display: inline-block;
	width: 206px;
}
.button {
	margin: 0;
	border: 1px solid var(--tab-border);
	padding: 6px 12px;
	background-color: var(--bg);
	color: #000;
	font-size: 1.1em;
	font-weight: 500;
}
.button:hover {
	background-color: var(--tab-hover-bg);
	color: var(--link-hover);
	cursor: pointer;
}
.star {
	font-size: 1.1em;
	font-weight: 700;
	color: #ea7b23;
}
#newsletterArchiveHeading {
    display: block;
    width: 100%;
    overflow: hidden;
    height: 110px;
	margin-top: 32px;
    padding-top: 0;
    background-image: url(/images/ConnectArchiveHeader.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: auto 110px;
}
#newsletterArchiveHeading h2 {
	display: none;
}



/* =========================================================
   VIEWS SYSTEM (shared base for list view, card views grid, resource grid, video grid)
   ========================================================= */

/* ---------- Grid wrappers ---------- */
/* Applies to: Connect archive grid, generic card views, resource grid, video grid */
:is(.resource-grid, .video-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  margin: 16px 0;
}

@media (max-width: 480px) {
  :is(.resource-grid, .video-grid) {
    grid-template-columns: 1fr;
  }
}

.views-row-link {
	margin: 8px 0;
}

/* Make sure the link/card can stretch height */
.views-row-link, .resource-card-link, .video-card-link {
  height: 100%;
}

/* ---------- Clickable wrappers ---------- */
:is(.views-row-link, .resource-card-link, .video-card-link) {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ---------- Card box base ---------- */
:is(.views-row, .resource-card-link, .video-card-link, .view--cards .views-row-link) {
  border: 1px solid var(--card-border);
  background-color: var(--card-bg);
  overflow: hidden;
  border-radius: var(--card-radius);
  transition: border-color var(--card-transition), background-color var(--card-transition);
}

/* ---------- Hover/focus states ---------- */
/* List structure: link hovers card box inside */
.views-row-link:is(:hover, :focus) .views-row,
.views-row:hover,
/* Grid structure: card itself or link-as-card in view--cards */
.resource-card:hover,
.resource-card-link:is(:hover, :focus),
.video-card:hover,
.view--cards .views-row-link:is(:hover, :focus),
.video-card-link:is(:hover, :focus) {
  border-color: var(--card-border-hover);
  background-color: var(--card-bg-hover);
}

/* ---------- Titles base ---------- */
.views-row :is(h2, h3),
:is(.resource-title, .video-title) {
  color: var(--card-title);
  transition: color var(--card-transition);
  font-size: 1.2em;
  font-weight: 700;
  padding: 6px 0 0 0;
}

/* Title hover (covers list + grids + view--cards link-as-card) */
.views-row-link:hover .views-row :is(h2, h3),
.views-row:hover :is(h2, h3),
.resource-card:hover .resource-title,
.video-card:hover .video-title,
.view--cards .views-row-link:is(:hover, :focus) :is(h2, h3) {
  color: var(--link-hover);
}

/* Accessibility: visible focus ring when tabbing */
:is(.views-row-link, .resource-card-link, .video-card-link):focus-visible {
  outline: 2px solid var(--card-border-hover);
  outline-offset: 2px;
}

/* ------ Cards thumbnail + content (resource + video) ------ */
:is(.resource-thumbnail, .video-thumbnail) {
  position: relative;
  width: 100%;
  background-color: var(--thumb-bg);
  overflow: hidden;
}
:is(.resource-thumbnail) {
  padding-top: 75%; /* ~22:17 ratio, landscape page size */
}
:is(.video-thumbnail) {
  padding-top: 56.25%; /* 16:9 ratio, widescreen video size */
}
:is(.resource-thumbnail, .video-thumbnail) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid var(--card-border);
}
.list-view-thumb {
  float: right;
  margin: 10px 0 12px 16px;
  max-width: 39%;
}
.list-view-thumb img {
  display: block;
  height: auto;
  margin: 0;
}

:is(.resource-content, .video-content, .list-view-content) {
  padding: 6px 15px;
}

:is(.resource-title, .video-title) {
  margin: 0 0 8px 0;
  font-size: 1.15em;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

:is(.resource-description, .video-description) {
  margin-bottom: 8px;
  font-size: 1em;
  line-height: 1.5;
  color: var(--text-muted);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;

  /* locks the block to exactly 5 lines */
  height: calc(1.5em * 5);
  max-height: calc(1.5em * 5);
}


/* ---------- Overlays ---------- */

/* External link icon overlay (Connect archive only) */
.view-connect .resource-card-link .resource-thumbnail::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--overlay-size);
  height: var(--overlay-size);
  transform: translate(-50%, -50%);
  background: var(--overlay-bg);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.view-connect .resource-card-link .resource-thumbnail::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  background: url('/images/LinkIcon.svg') no-repeat center / contain;
  z-index: 2;
}

/* Play icon overlay for video cards */
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--overlay-size);
  height: var(--overlay-size);
  transform: translate(-50%, -50%);
  background: var(--overlay-bg);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-button::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid #fff;
  margin-left: 5px;
}

/* VIDEO LIBRARY TABS */

/* Base video tabs container */
#videotabs {
  margin: 20px 0 0 0;
}

/* Reset the ul styling */
#videotabs ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  border-bottom: 1px solid var(--tab-border);
  position: relative;
}

/* Tab items */
#videotabs ul li {
  margin: 0;
  padding: 0;
  text-align: center;
  border: 1px solid var(--tab-border);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  position: relative;
  bottom: -1px; /* Overlap the ul bottom border */
}

/* Tab links */
#videotabs ul li a {
  display: block;
  margin: 0;
  padding: 4px 12px;
  background-color: var(--bg);
  color: #000;
  font-size: 0.95em;
  line-height: 1.3;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  min-width: 80px;
  border-radius: 3px 3px 0 0;
  border-bottom: none;
}

/* Hover states */
#videotabs ul li a:hover {
  background-color: var(--tab-hover-bg);
  color: var(--link-hover);
  cursor: pointer;
}

/* Active tab */
#videotabs ul li a.active {
  color: #000;
  background-color: #fff;
  border-bottom: 1px solid #fff;
}
#videotabs ul li a.active:hover {
  cursor: default;
  color: #000;
}

/* Content boxes */
.videoboxes {
  margin: 0 0 32px 0;
  border: 1px solid var(--box-border);
  border-top: none;
  padding: 16px;
  font-size: 0.95em;
  line-height: 1.5;
}
#videobox2, #videobox3, #videobox4, #videobox5, #videobox6, #videobox7, #videobox8 {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #videotabs ul {
    gap: 2px;
  }
  #videotabs ul li a {
    padding: 4px 8px;
    font-size: 0.85em;
    min-width: 70px;
  }
}
@media (max-width: 480px) {
  /* Three-column layout for tabs on small screens */
  #videotabs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: none;
    padding: 0 1px; /* Small padding to help with alignment */
  }
  #videotabs ul li:first-child { /* First tab takes full width */
    width: 100%;
    margin-bottom: 4px;
  }
  #videotabs ul li:not(:first-child) { /* Other tabs arranged in 3 columns */
    flex: 1 1 30%;
    margin-bottom: 4px;
    min-width: 0; /* Allow shrinking below content size */
  }
  #videotabs ul li:nth-child(3n+2) { /* Adjust every 3rd item to ensure proper row alignment */
    margin-left: 0;
  }
  #videotabs ul li {
    border: 1px solid var(--tab-border);
    border-radius: 4px;
  }
  #videotabs ul li a {
    padding: 6px 2px;
    border-radius: 3px;
    min-width: unset;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.8em;
  }
  #videotabs ul li a.active {
    border-bottom: none;
  }
  .videoboxes {
    border-top: 1px solid var(--box-border);
    margin-top: 8px;
  }
}


/* Video pages */
.embed-responsive {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
}



/* ========================================
   STAFF PROFILES VIEW
   ======================================== */

.view-staff-profiles .staff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  gap: 16px;
}

/* Switch to 2 columns a bit earlier */
@media (max-width: 980px) {
  .view-staff-profiles .staff-grid {
    grid-template-columns: repeat(2, minmax(0, 300px));
  }
}

.view-staff-profiles .staff-grid .views-row,
.view-staff-profiles .staff-grid .views-row:hover,
.view-staff-profiles .staff-grid .views-row:focus {
  margin: 0;
  padding: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.view-staff-profiles .staff-card,
.view-staff-profiles .staff-card:hover,
.view-staff-profiles .staff-card:focus {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border-color, #cfd6dc);
  border-radius: 0;
  overflow: hidden;
  background-color: var(--card-bg, #fff);
  box-shadow: none;
  transform: none;
  transition: none;
}
.view-staff-profiles .staff-thumbnail {
  line-height: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.view-staff-profiles .staff-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.view-staff-profiles .staff-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}
h2.staff-name, .view-staff-profiles .views-row .staff-name,
.view-staff-profiles .staff-card .staff-name,
.view-staff-profiles .views-row:hover .staff-name,
.view-staff-profiles .staff-card:hover .staff-name {
  color: var(--text);
  font-size: 1em;
  overflow-wrap: anywhere;
  padding-top: 0;
}
.staff-job-title {
  font-size: 1rem;
  color: var(--text-muted);
}
.staff-email {
  font-size: 1rem;
  overflow: hidden;
}
.staff-email a {
  overflow-wrap: anywhere;
  overflow: hidden;
}



/* FOOTER */
footer {
	clear: both;
	background-color: #fff;
	margin: 20px 0 0 0;
	padding: 10px 2%;
	text-align: left;
}
footer p {
	font-size: .95rem;
	color: var(--text-muted);
}



/* EXTRAS */
.clear { clear: both; }
.hidden { display: none; }
.largeCheckbox { color: #666; text-align: center; font-size: 3em; line-height: 1; }
.mediumCheckbox { color: #666; font-size: 2em; line-height: 1; }
.small-text { font-size: .9rem; }
.smaller-text { font-size: .8rem; }
.smallest-text { font-size: .7rem; }
.large-text { font-size: 1.15rem; }
.larger-text { font-size: 1.3rem; }
.largest-text { font-size: 1.6rem; }
.center-text { text-align: center; }
.grey-text { color: #666; }
.boldBrown, .boldMagenta, .boldPurple, .boldGreen {
	font-weight: 600;
	font-size: 1.1rem;
}
.boldBrown {
	color: #a04a23;
}
.boldMagenta {
	color: #c51c71;
}
.boldPurple {
	color: #7d2d79;
}
.boldGreen {
	color: #3f7055;
}
.block_color_text { /* BOXED TEXT WITH COLOR BACKGROUND */
	margin: 0 0 6px 0;
	border: solid 1px var(--bg);
	padding: 6px 16px;
	background-color: #fafcfe;
}



/* RESPONSIVE LAYOUT */

/* Mobile-first: Default styles apply up to 720px */
main {
  padding: 0 10px;
  position: relative;
  overflow: hidden;
}
.left-sidebar-toggle {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  background-image: url('/images/SideNavSlide.png');
  background-size: contain;
  background-repeat: no-repeat;
}
.left-sidebar-toggle-link:hover .left-sidebar-toggle {
  background-image: url('/images/SideNavSlide_over.png');
}
.layout-sidebar-first { /* Sidebar is absolute and hidden by default */
  position: absolute;
  width: 260px;
  height: 100%;
  background-color: #fff;
  border: none;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1001;
  overflow-y: auto;
  padding: 0;
  box-sizing: border-box;
}
.layout-sidebar-first.sidebar-visible {
  transform: translateX(0); /* Slide in */
  transition: transform 0.3s ease;
  width: 100%;
  left: 0;
}
.layout-content { /* Content takes full width in block/grid layout */
  width: 100%;
  min-width: 0;
}
.left-sidebar-close {
  display: block;
  width: calc(100% - 20px);
  margin: 16px 10px 20px;
  padding: 12px 16px;
  font-size: 1rem;
  line-height: 1.2;
  border: 1px solid #ccc;
  background: #fff;
  color: #000;
  cursor: pointer;
  box-sizing: border-box;
}

@media (min-width: 721px) {
  .left-sidebar-close {
    display: none;
  }
}


.layout-sidebar-second {
  width: 100%;
  position: static;
}



/* Desktop layout: use CSS Grid (>= 960px) */
@media (min-width: 960px) {
 /* Default 3-column layout (Applies to Home page) */
 main {
    display: grid;
    grid-template-columns: 260px 48fr 29fr;
    column-gap: 20px;
    row-gap: 0;
    grid-template-areas: "sidebar-first content sidebar-second";
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  /* Inner Pages: Override to 2-column layout with stacked right side */
  body:not(.path-frontpage) main {
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "sidebar-first sidebar-second" /* Sidebar-second (search) top right */
        "sidebar-first content";      /* Content bottom right */
    padding: 0;
    row-gap: 0;
  }

  /* Left Sidebar */
  .layout-sidebar-first {
    grid-area: sidebar-first;
    position: static;
    transform: none;
    height: auto;
    z-index: auto;
    background-color: transparent;
    overflow-y: visible;
    border: none;
    padding: 0;
  }
  /* Ensure sidebar spans rows in inner page layout */
  body:not(.path-frontpage) .layout-sidebar-first {
     grid-row: 1 / span 2;
     align-self: start;
  }

  /* Center Content */
  .layout-content {
    grid-area: content;
  }

  /* Right Sidebar (Welcome) - Only styled for Home page */
  /* Applies only when main has 3 columns */
  .layout-sidebar-second {
    grid-area: sidebar-second;
    padding: 0 16px;
    border-left: 1px solid var(--bg);
    border-bottom: 1px solid var(--bg);
    overflow-x: hidden;
    align-self: start !important; /* force it to only be as tall as its content */
    display: block;
  }
  /* Place in grid and ensure visibility for inner pages */
  body:not(.path-frontpage) .layout-sidebar-second {
      grid-area: sidebar-second;
      display: block;
      align-self: start;
  }
}


/* Inner Pages Layout (Tablet: 721px - 959px) */
@media (min-width: 721px) and (max-width: 959px) {
 body:not(.path-frontpage) main {
    display: grid !important;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 40px auto;
    grid-template-areas:
      "sidebar-first search"
      "sidebar-first content";
    column-gap: 20px;
    row-gap: 0;
    margin: 0;
	padding: 0;
    align-items: start;
    overflow: visible;
  }
  body:not(.path-frontpage) .layout-sidebar-first {
    grid-area: sidebar-first;
    grid-row: 1 / span 2;
    align-self: start;
    position: static;
    transform: none;
    height: auto;
    z-index: auto;
    background-color: transparent;
    overflow-y: visible;
    border: none;
    padding: 0;
  }
  body:not(.path-frontpage) .layout-sidebar-second {
    grid-area: search;
	position: static;
  }
  body:not(.path-frontpage) .layout-content {
    grid-area: content;
  }

/* Home Page Layout (Tablet: 721px - 959px) */
  body.path-frontpage main {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto auto;
    grid-auto-rows: auto;
    column-gap: 20px;
    row-gap: 0;
    margin: 0;
	padding: 0 16px 0 0;
    align-items: start;
    position: relative;
    overflow: visible;
  }
  body.path-frontpage .layout-sidebar-first {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    position: static;
    transform: none;
    height: auto;
    z-index: auto;
    background-color: transparent;
    overflow-y: visible;
    border: none;
    padding: 0;
  }
  body.path-frontpage .layout-sidebar-second {
    grid-column: 2;
    grid-row: 1;
    background-color: #fff;
    padding: 0;
    border: none;
    box-sizing: border-box;
    position: static;
  }
  body.path-frontpage .layout-content {
    grid-column: 2;
    grid-row: 2;
  }
}



/* Tablet & Desktop Common Styles */
@media (min-width: 721px) {
   /* Logo Padding */
   .site-logo img {
        padding: 0 16px;
   }
   /* Top Menu Styling */
   #block-draccess-main-menu {
    flex: 1;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   }
   #block-draccess-webpropertiesicons {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   }
   #webProperties {
    margin: 0;
    padding: 0;
    line-height: 0;
   }
   #webProperties a img {
    margin: 0;
   }

  .left-sidebar-toggle {
    display: none;
  }

  /* Inner Page Content Padding */
  body:not(.path-frontpage) .layout-content {
     padding-right: 16px;
  }

  /* Inner Page Sidebar Second Padding & Styling */
  body:not(.path-frontpage) .layout-sidebar-second {
      padding-right: 16px; /* <<< ADDED right padding */
      border: none;
      background: none;
  }

  /* Welcome column collapse specific to tablet range */
  @media (max-width: 959px) {
      #block-draccess-welcomecolumn {
        background-color: var(--tab-hover-bg);
        margin: 16px 0 0 0;
        border: 1px solid var(--bg);
        padding: 0 10px 10px 10px;
        box-sizing: border-box;
        max-height: 46px;  /* Collapsed height – adjust as needed */
        overflow: hidden;
        transition: max-height 0.3s ease;
      }
      #block-draccess-welcomecolumn:hover {
        border: 1px solid #84abc4;
      }
      #block-draccess-welcomecolumn h2 {
        color: #365980;
        font-size: 1.4rem;
        background: url(/images/DropDown.png) right top 12px no-repeat;
        padding: 10px 0 4px 0;
        cursor: pointer;
      }
      #block-draccess-welcomecolumn h2:hover {
        color: var(--link-hover);
        background: url(/images/DropDown_over.png) right top 12px no-repeat;
      }
      #block-draccess-welcomecolumn.open {
        background-color: #fff;
        max-height: none; /* Allow full height when open */
      }
      #block-draccess-welcomecolumn.open h2 {
        color: #365980;
        font-size: 1.6rem;
        background: url(/images/RollUp.png) right top 12px no-repeat;
      }
      #block-draccess-welcomecolumn.open h2:hover {
        color: var(--link-hover);
        background: url(/images/RollUp_over.png) right top 12px no-repeat;
      }
  }
}



/* === Masthead photo on larger screens is section specific === */
@media (min-width: 820px) {
	.region-header {
		background: right bottom no-repeat url(/images/headerpics/headerpic_home.png);
	}

	body.path-about .region-header,
	body[class^="path-about"] .region-header {
		background-image: url(/images/headerpics/headerpic_about.png);
	}

	body.path-faq .region-header { background-image: url(/images/headerpics/headerpic_faq.png); }
	body.path-subscribe .region-header { background-image: url(/images/headerpics/headerpic_subscribe.png); }
	body.path-contact .region-header { background-image: url(/images/headerpics/headerpic_contact.png); }
	body.path-links .region-header { background-image: url(/images/headerpics/headerpic_links.png); }
	body.path-parent-timeline .region-header { background-image: url(/images/headerpics/headerpic_timeline.png); }
	body.path-parent-drdp2015-ps .region-header { background-image: url(/images/headerpics/headerpic_drdp2015-ps.png); }
	body.path-parent-drdp2015-it .region-header { background-image: url(/images/headerpics/headerpic_drdp2015-it.png); }
	body.path-parent-assessors .region-header { background-image: url(/images/headerpics/headerpic_assessors.png); }

	body.path-parent-learn .region-header,
	body[class^="path-recordedwebinars"] .region-header,
	body[class^="path-tutorials"] .region-header {
		background-image: url(/images/headerpics/headerpic_learn.png);
	}

	body.path-parent-families .region-header { background-image: url(/images/headerpics/headerpic_families.png); }

	body.path-parent-videolibrary .region-header,
	body[class^="path-videolibrary"] .region-header {
		background-image: url(/images/headerpics/headerpic_videolibrary.png);
	}

	body.path-parent-professionaldevelopment .region-header {
		background-image: url(/images/headerpics/headerpic_professionaldevelopment.png);
	}

	body.path-parent-policy .region-header { background-image: url(/images/headerpics/headerpic_policy.png); }
}


/* === Mobile Layout (Max Width: 720px) === */
@media (max-width: 720px) {
	.region-header {
        text-align: center;
    }
    .site-logo img {
        margin: 0 auto;
        padding: 0 3px;
    }

  /* Reflow main into a grid layout to control order */
  /* Use body main to increase specificity over homepage tablet grid */
  body main {
    display: grid; /* <<< Use grid */
    grid-template-columns: 1fr; /* Single column */
    grid-template-rows: min-content auto; /* Row 1 shrinks, Row 2 takes rest */
    grid-template-areas:
      "sidebar-second" /* Area for search/welcome */
      "content"; /* Area for main content */
    column-gap: 0;
    row-gap: 0;
	margin: 0 10px; /* Use original mobile padding */
    padding: 0; /* Remove padding from main container */
    overflow: hidden; /* Re-apply overflow hidden for mobile */
    position: relative; /* Keep relative for absolute sidebar */
  }

  /* Left Sidebar (Navigation) – absolutely positioned and hidden by default */
  /* These rules apply to BOTH home and inner pages below 720px */
  .layout-sidebar-first {
    /* Inherits absolute positioning, transform, padding, background, border from default */
    /* No overrides needed here specifically for max-width 720px */
  }
  /* When toggled (via JS), add the class "sidebar-visible" to slide it in */
  .layout-sidebar-first.sidebar-visible {
    transform: translateX(0);
	width: 100%;
	left: 0;
  }

  /* Main Content */
  .layout-content {
    grid-area: content; /* <<< Assign to grid area */
    padding: 0;
  }

  /* Right Sidebar (search/welcome) */
  .layout-sidebar-second {
    grid-area: sidebar-second; /* <<< Assign to grid area */
    padding: 0;
  }

  /* Style the welcome text container (if present) */
  #block-draccess-welcomecolumn {
	background-color: var(--tab-hover-bg);
    margin: 16px 0 0 0;
    border: 1px solid var(--bg);
    padding: 0 10px 10px 10px;
    box-sizing: border-box;
    max-height: 46px;  /* Collapsed height */
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  #block-draccess-welcomecolumn:hover {
    border: 1px solid #84abc4;
  }
  #block-draccess-welcomecolumn h2 {
	color: #365980;
	font-size: 1.4rem;
	background: url(/images/DropDown.png) right top 12px no-repeat;
	padding: 10px 0 4px 0;
	cursor: pointer;
  }
  #block-draccess-welcomecolumn h2:hover {
	color: var(--link-hover);
	background: url(/images/DropDown_over.png) right top 12px no-repeat;
  }
  #block-draccess-welcomecolumn.open {
	background-color: #fff;
    max-height: none; /* Allow full height when open */
  }
  #block-draccess-welcomecolumn.open h2 {
	color: #365980;
	font-size: 1.6rem;
	background: url(/images/RollUp.png) right top 12px no-repeat;
  }
  #block-draccess-welcomecolumn.open h2:hover {
	color: var(--link-hover);
	background: url(/images/RollUp_over.png) right top 12px no-repeat;
  }
  .videoboxes {
    border: none;
  }
}

@media (max-width: 480px) {
	.equal_boxes,
	.unequal_boxes {
		flex-direction: column;
	}
	.equal_box_item,
	.unequal_box_item--big,
	.unequal_box_item--small {
		flex: 1 1 100%;
	}
	.pix_lrg {
		float: none;
		width: 98%;
		max-width: 98%;
		margin: 12px 0 22px 0;
	}
}
}