/* =============================================================================
 * Florida Department of Health — Dental Program
 * EthosCE learning-group page (node 110)
 *
 * Custom stylesheet layered on top of the EthosCE "ce" theme. Page-specific
 * rules are scoped to `.page-node-1706`; theme-element rebrands (links, menu,
 * buttons, footer) are intentionally global.
 *
 * `!important` is used deliberately throughout to win over the theme's
 * aggregated stylesheets — it is required here, not a smell.
 *
 * Palette : Navy #112336 · Yellow #FFCF01 · Grey #F5F5F5
 * Fonts   : Inter (headings/UI) · Raleway (body)
 *
 * Contents
 *   1. Design tokens
 *   2. Base & typography
 *   3. Layout overrides (sidebar, chrome, spacing, full-bleed)
 *   4. Header & logo
 *   5. Primary navigation
 *   6. Search
 *   7. Theme element rebrand (headings, borders, buttons, tabs)
 *   8. Custom sections — hero
 *   9. Custom sections — buttons
 *  10. Custom sections — shell, grids, cards, badges
 *  11. Custom sections — welcome video
 *  12. Custom sections — available pathways
 *  13. Footer
 *  14. Responsive
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Raleway:wght@400;500;600&display=swap');


/* 1. Design tokens ========================================================= */

:root {
  --fdh-navy:    #112336;  /* primary   */
  --fdh-yellow:  #ffcf01;  /* accent    */
  --fdh-grey:    #f5f5f5;  /* surface   */
  --fdh-white:   #ffffff;
  --fdh-heading: #1f2a44;  /* slate used for section/card headings */
  --fdh-body:    #5b6470;  /* muted body copy */
  --fdh-border:  #e3e6ea;

  --fdh-font-head: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fdh-font-body: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fdh-maxw:   1040px;
  --fdh-gutter: 24px;
  --fdh-radius: 8px;
  --fdh-shadow: 0 2px 10px rgba(17, 35, 54, 0.08);
}


/* 2. Base & typography ===================================================== */

body {
  font-family: var(--fdh-font-body);
  overflow-x: hidden;                 /* contain the 100vw full-bleed bands */
}

h1, h2, h3, h4, h5, h6,
#main-menu li a {
  font-family: var(--fdh-font-head);
}

a { color: var(--fdh-navy); }

/* Theme headings */
h1, h2, h3, h4, h5,
legend,
.field-label,
table caption,
.order-review-table .pane-title-row,
.user-profile .field-name-profile-email,
.group-credits .course-credit-title,
.page-node-course-complete .course-flow-body-title {
  color: var(--fdh-navy);
}


/* 3. Layout overrides ====================================================== */

/* Hide theme chrome not present in the design */
.page-node-1706 .region-sidebar-first,
.page-node-1706 #crumbs,
.page-node-1706 #crumbs-inner,
.page-node-1706 #breadcrumb-container,
.page-node-1706 #title-container,
.page-node-1706 #page-title,
.page-node-1706 h1.title,
#block-service-links-service-links {
  display: none !important;
}

/* Content column fills the width once the sidebar is gone */
.page-node-1706 #content {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}

/* Content wrappers: grey backdrop (meets the footer), no theme borders/shadows,
   no vertical spacing between stacked sections */
.page-node-1706 #page,
.page-node-1706 #page-wrapper,
.page-node-1706 #main-wrapper,
.page-node-1706 #main,
.page-node-1706 #content,
.page-node-1706 #content-area,
.page-node-1706 .panel-display,
.page-node-1706 .panel-col-top,
.page-node-1706 .panel-col-bottom {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background-color: var(--fdh-grey) !important;
}

/* Panes: strip theme borders/shadows and inter-section spacing */
.page-node-1706 .panel-pane,
.page-node-1706 .pane-content,
.page-node-1706 .panel-panel,
.page-node-1706 .panel-col-first,
.page-node-1706 .panel-col-last {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Last pane sits flush against the footer */
.page-node-1706 .panel-col-top .panel-pane:last-child .fdh-section {
  padding-bottom: 0 !important;
}

/* Full-bleed: each band spans the viewport while its content stays centred */
.page-node-1706 .fdh-hero,
.page-node-1706 .fdh-section,
.page-node-1706 #fdh-footer {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

.page-node-1706 .fdh-hero > .fdh-container,
.page-node-1706 .fdh-section > .fdh-container,
.page-node-1706 #fdh-footer > .fdh-container {
  max-width: var(--fdh-maxw);
  margin: 0 auto;
  padding: 0 var(--fdh-gutter);
}

/* Keep grids aligned to the same content edge as the hero */
.page-node-1706 .fdh-section .fdh-grid--3,
.page-node-1706 .fdh-section .fdh-grid--2 {
  max-width: var(--fdh-maxw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 var(--fdh-gutter) !important;
  box-sizing: border-box !important;
}


/* 4. Header & logo ========================================================= */

#header {
  background-color: var(--fdh-white);
  background-image: none;
}

#logo img { display: none; }

#header-inner {
  height: 75px;
  background-color: var(--fdh-white);
  background-image: url('https://remy.hosted.cloud.ethosce.com/sites/default/files/Screenshot%202026-06-02%20at%206.05.50%E2%80%AFPM.png') !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 131px center !important;  /* align logo with content edge */
}


/* 5. Primary navigation ==================================================== */

#navigation {
  background: var(--fdh-white) !important;
  background-image: none;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* Centre the menu in the same container as the content + top spacing */
#topnav-inner {
  max-width: var(--fdh-maxw);
  margin: 0 auto;
  padding: 30px var(--fdh-gutter) 0 !important;
  box-sizing: border-box;
}

#main-menu .menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#main-menu .menu > li {
  margin: 0;
  padding: 0;
  background: none !important;
}

#main-menu  > ul > li > .menu__link {
  display: inline-block;
  font-family: var(--fdh-font-head);
  font-weight: 400 !important;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--fdh-navy) !important;
  padding: 4px 0 14px;
  border-bottom: 4px solid transparent !important;  /* reserves underline space */
  background: none !important;
  text-decoration: none !important;
}

/* Hover & active: yellow underline only, no background */
#main-menu .menu > li:hover,
#main-menu .menu > li:hover > a,
#main-menu .menu__link:hover,
#main-menu .menu__link:focus,
#main-menu .menu__link.active,
#main-menu .menu__link.active-trail {
  color: var(--fdh-navy) !important;
  background: none !important;
  border-bottom-color: var(--fdh-yellow) !important;
}

#main-menu li li a, 
#main-menu li li.first a, 
#main-menu li li a.active-trail {
  padding: 6px 10px 5px;
}

/* Dropdown sub-items */
#navigation #main-menu li ul { background-color: var(--fdh-grey); }
#main-menu .menu li li a {
  font-size: 1rem;
  border-bottom: 0 !important;
}


/* 6. Search ================================================================ */

.block-ethosce-search .form-submit,
#block-ethosce-search-ethosce-search .form-submit {
  background-color: var(--fdh-yellow) !important;
  border-color: var(--fdh-yellow) !important;
  color: var(--fdh-navy) !important;
}


/* 7. Theme element rebrand ================================================= */

/* Borders */
#header,
#footer,
.item-list .pager li.pager-next a,
.item-list .pager li.pager-previous a,
.view-ethosce-calendar .date-nav-wrapper .pager li a {
  border-color: var(--fdh-navy);
}

#tabs-container .tabs-primary li a.is-active,
.horizontal-tabs ul.horizontal-tabs-list li.selected a,
.resp-tabs-list .resp-tab-active a,
#tabs-container .tabs-primary li a.is-active:hover,
.horizontal-tabs ul.horizontal-tabs-list li.selected a:hover,
.resp-tabs-list .resp-tab-active a:hover,
#main-menu li a.active-trail {
  border-top-color: var(--fdh-navy);
}

/* Buttons & rollovers — navy fill, white text */
input[type="submit"],
.action-link a,
.more-link a,
.course-take-course-link,
#pre-req-courses .item-content .right a,
#course-outline li .item-details .item-btn,
#block-course-navigation #course-nav li a,
#content-area .quiz-start-link,
#content-area .quiz-back-link,
#content-area .answer-sheet-link,
.view-ethosce-calendar .date-nav-wrapper .pager li a,
.quiz-retake-link,
div.course-flow-body-title,
#course-outline h3.main-header,
.panel-pane .pane-title,
#block-course-navigation .block-title,
.item-list .pager li.pager-next a,
.item-list .pager li.pager-previous a,
#tabs-container .tabs-primary li a:hover,
.horizontal-tabs ul.horizontal-tabs-list li a:hover,
#tabs-container .tabs-secondary li a.is-active,
#tabs-container .tabs-secondary li a.is-active:hover,
#course-outline li.completed .item-header .progress span,
#course-outline li.in-progress .item-header .progress span,
.calendar-calendar .week-view .full div.single-day div.weekview,
.calendar-calendar .day-view .full div.single-day div.dayview {
  background-color: var(--fdh-navy);
  border-color: var(--fdh-navy);
  color: var(--fdh-white);
}

#main-menu li.expanded > a:hover:after,
#main-menu li.expanded > a.active-trail:after,
#course-outline .course-outline-list li#complete a:before,
#content-area .ds-1col.node-course .field-type-fivestar .star.on a:after,
#content-area .ds-1col.node-course .field-type-fivestar .star .on:after {
  color: var(--fdh-navy);
}

#ethosce-footer-callout { border-color: var(--fdh-navy); }

/* Course tabs */
#content-area .resp-tabs-list li a:hover,
#content-area .resp-tabs-list li a.group-register {
  background-color: var(--fdh-navy);
}
#content-area .resp-tabs-list li.resp-tab-active a        { border-top-color: var(--fdh-navy) !important; }
#content-area .resp-tabs-list li.resp-tab-active a:hover  { background-color: transparent; }

/* Accent underline under pane/course titles */
div.course-flow-body-title,
#course-outline h3.main-header,
.panel-pane .pane-title,
#block-course-navigation .block-title {
  border-bottom-color: var(--fdh-yellow);
}

/* Secondary headers — navy fill, white text */
div.course-flow-body-title,
.group-right .group-course-summary legend,
#content-area thead th,
.course-relationships-tree-header,
#course-outline h3.main-header,
.panel-pane .pane-title,
#content-area .responsive-calendar .weekdays li,
#block-course-navigation .block-title,
.course-nav-return-menu-wrapper ul li {
  background-color: var(--fdh-navy);
  color: var(--fdh-white);
}

.group-right .group-course-summary .fieldset-wrapper { border-top-color: var(--fdh-yellow); }


/* 8. Custom sections — hero ================================================ */

.fdh-hero {
  background: var(--fdh-navy);
  color: var(--fdh-white);
  padding: 48px 0 56px;
}
.fdh-hero__title {
  margin: 0;
  font-family: var(--fdh-font-head);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  line-height: 1.12;
  color: var(--fdh-white);
}
.fdh-hero__subtitle {
  margin: 18px 0 28px;
  font-family: var(--fdh-font-body);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.78);
}
.fdh-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}


/* 9. Custom sections — buttons ============================================= */

.fdh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fdh-font-head);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 11px 22px;
  border: 2px solid transparent;
  border-radius: var(--fdh-radius);
  cursor: pointer;
  text-decoration: none !important;
  transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.fdh-btn--accent          { background: var(--fdh-yellow); color: var(--fdh-navy); }
.fdh-btn--accent:hover    { filter: brightness(0.94); color: var(--fdh-navy); }
.fdh-btn--outline         { background: transparent; color: var(--fdh-white); border-color: rgba(255, 255, 255, 0.75); }
.fdh-btn--outline:hover   { background: var(--fdh-white); color: var(--fdh-navy); }
a.fdh-btn,
a.fdh-btn:hover,
a.fdh-btn:focus           { text-decoration: none !important; }


/* 10. Custom sections — shell, grids, cards, badges ======================= */

.pane-custom .pane-content { margin: 0; padding: 0; }

.fdh-container,
.fdh-container * { box-sizing: border-box; }
.fdh-container {
  width: 100%;
  max-width: var(--fdh-maxw);
  margin: 0 auto;
  padding: 0 var(--fdh-gutter);
}

.pane-custom .pane-content .fdh-section { padding: 52px 0 !important; }
.fdh-section { background: var(--fdh-white); }
.fdh-section * { box-sizing: border-box; }
.fdh-section.fdh-section--muted { background: var(--fdh-grey); }
.fdh-section .fdh-container {
  width: 100%;
  max-width: var(--fdh-maxw);
  margin: 0 auto;
  padding: 0 var(--fdh-gutter);
}
.fdh-section__title {
  margin: 0 0 36px;
  font-family: var(--fdh-font-head);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  color: var(--fdh-heading);
  text-align: center;
}

/* Grids */
.pane-custom .pane-content .fdh-grid--3,
.fdh-section .fdh-grid,
.fdh-section .fdh-grid--3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
.pane-custom .pane-content .fdh-grid--2,
.fdh-section .fdh-grid--2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Cards — equal height */
.fdh-section .fdh-card {
  background: var(--fdh-white);
  border: 1px solid var(--fdh-border);
  border-radius: 10px;
  box-shadow: var(--fdh-shadow);
  padding: 36px 28px;
}
.fdh-section .fdh-grid--3 .fdh-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.fdh-section .fdh-card--center { text-align: center; }
.fdh-section .fdh-card__title {
  margin: 0 0 12px;
  font-family: var(--fdh-font-head);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--fdh-heading);
}
.fdh-section .fdh-card__text {
  margin: 0;
  font-family: var(--fdh-font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fdh-body);
}

/* Circular icon badge */
.fdh-section .fdh-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  margin: 0 0 18px;
  border-radius: 50%;
  background: var(--fdh-navy);
  color: var(--fdh-white);
}
.fdh-section .fdh-badge .fa {
  font-size: 22px;
  line-height: 1;
  color: var(--fdh-white);
}


/* 11. Custom sections — welcome video ===================================== */

.fdh-video {
  max-width: 620px;
  margin: 0 auto;
}
.fdh-video * { box-sizing: border-box; }
.fdh-video .fdh-video__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d4d7db;
  border: 10px solid var(--fdh-navy);
  border-radius: 12px;
  box-shadow: var(--fdh-shadow);
}
.fdh-video .fdh-video__play {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--fdh-navy);
  cursor: pointer;
}
.fdh-video .fdh-video__play .fa { font-size: 34px; margin-left: 5px; }
.fdh-video .fdh-video__bar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fdh-navy);
}
.fdh-video .fdh-video__bar .fa { font-size: 13px; }
.fdh-video .fdh-video__track {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(17, 35, 54, 0.25);
  overflow: hidden;
}
.fdh-video .fdh-video__progress {
  display: block;
  width: 55%;
  height: 100%;
  background: var(--fdh-navy);
}
.fdh-video .fdh-video__dots { font-size: 0.9rem; letter-spacing: 1px; }

/* Tighter spacing for the video pane (pane-3) — out-specifies the section rule */
.pane-custom.pane-3 .pane-content .fdh-section        { padding: 20px 25px !important; }
.pane-custom.pane-3 .pane-content .fdh-section__title { margin-bottom: 20px; }


/* 12. Custom sections — available pathways ================================ */

.fdh-section .fdh-pathway {
  display: flex;
  gap: 18px;
  padding: 26px 28px;
  background: var(--fdh-white);
  border: 1px solid var(--fdh-border);
  border-radius: var(--fdh-radius);
  box-shadow: var(--fdh-shadow);
}
.fdh-section .fdh-pathway__body { flex: 1; }
.fdh-section .fdh-pathway .fdh-badge { width: 56px; height: 56px; margin: 0; }
.fdh-section .fdh-pathway .fdh-card__title { margin: 0 0 8px; font-size: 1.3rem; text-align: left; }
.fdh-section .fdh-pathway .fdh-card__text  { margin: 0; text-align: left; }
.fdh-section .fdh-pathway__btn { margin-top: 18px; float: right; }
.fdh-section .fdh-pathway__body::after { content: ""; display: block; clear: both; }


/* 13. Footer =============================================================== */

#footer {
  margin-top: 0 !important;
  padding: 32px 0;
  border: 0;
  background: var(--fdh-navy) !important;
  color: var(--fdh-white);
}
#footer a { color: var(--fdh-white); }
#footer-inner {
  max-width: var(--fdh-maxw);
  margin: 0 auto;
  padding: 0 var(--fdh-gutter);
  text-align: left;
}
#footer-inner > div { 
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}
#block-block-4 .content > div { display: none; }           /* default "© Cadmium" */
#ethosce-footer-callout       { display: none !important; } /* "Powered by EthosCE" */
#block-block-4 .content::after {
  content: "\00A9 2025\A Learning Horizons is a business offering of Innovation Horizons. Please note that all logged in users are accepting the Innovation Horizons privacy policy. Users and their information are subject to the security policies of Innovation Horizons and the EthosCE Learning Management System. By continuing to use and interact with Learning Horizons websites and by providing your personal information to us, you are accepting the terms of this Privacy Notice.";
  display: block;
  white-space: pre-line;   /* renders the \A line break */
  max-width: 900px;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--fdh-font-body);
  font-size: 0.85rem;
  line-height: 1.7;
}



/* 14. Responsive =========================================================== */

@media (max-width: 860px) {
  .pane-custom .pane-content .fdh-grid--3,
  .fdh-section .fdh-grid--3,
  .pane-custom .pane-content .fdh-grid--2,
  .fdh-section .fdh-grid--2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .fdh-section .fdh-pathway { flex-direction: column; }
  .fdh-section .fdh-pathway__btn { float: none; display: inline-flex; }
}