/* CADIR Bootstrap Sass entry point. */
/* CADIR Bootstrap Sass variables. */
/* Drupal Bootstrap commerce variables. */
/* ---------------------------------------------------------
 * External Links (extlink) email icon
 *
 * extlink draws the icon after mailto: links as a 14px SVG
 * whose viewBox ("0 10 70 20") crops the envelope, so only a
 * sliver of it shows. Let the drawing show outside that box,
 * and size it to the link text.
 * --------------------------------------------------------- */
svg.mailto {
  width: 1.5em;
  height: 1em;
  overflow: visible;
  vertical-align: -0.05em;
}

/* ---------------------------------------------------------
 * CADIR Utility Header (State Header block)
 *
 * cagov.core.css styles .utility-header. These rules apply the
 * DIR Figma "Mega Header" top bar: DIR Dark Blue background,
 * white text and CA.gov logo, and 18px links with a DIR Light
 * Blue icon. Colors use the State Template's own variables
 * where it has them.
 *
 * Hover is not in Figma. The State Template's dark gray hover
 * color would be unreadable on the dark bar, so links stay
 * white and gain an underline on hover and focus.
 * --------------------------------------------------------- */
.utility-header {
  --utility-header-background: #10115e;
  --utility-link: #fff;
  --utility-link-hover: #fff;
  min-height: 43px;
  color: #fff;
  /* The State Template sets sizes and spacing inside .flex-row, so these
     rules use the same selectors to win. */
}
.utility-header .flex-row {
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.utility-header .flex-row .social-media-links,
.utility-header .flex-row .settings-links {
  min-height: 0;
}
.utility-header .flex-row {
  /* Keeps the logo link to the logo's 24px height. */
}
.utility-header .flex-row .social-media-links .header-cagov-logo,
.utility-header .flex-row .social-media-links .header-cagov-logo a {
  line-height: 0;
}
.utility-header .flex-row {
  /* The full-color CA.gov logo, shown in white on the dark bar. */
}
.utility-header .flex-row .social-media-links .header-cagov-logo .ca-gov-logo-svg {
  width: 43px;
  filter: brightness(0) invert(1);
}
.utility-header .flex-row .social-media-links .official-tag {
  color: #fff;
  font-size: 0.875rem;
  line-height: 26px;
}
.utility-header .flex-row .settings-links {
  gap: 0.25rem 1.25rem;
}
.utility-header .flex-row .settings-links .utility-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
  text-decoration: none;
}
.utility-header .flex-row .settings-links .utility-link:hover, .utility-header .flex-row .settings-links .utility-link:focus {
  text-decoration: underline;
}
.utility-header .utility-link-icon {
  flex-shrink: 0;
  color: #4d6eb4;
  font-size: 1rem;
  vertical-align: middle;
}
.utility-header .utility-link-svg {
  width: 1rem;
  height: 1rem;
}

/* ---------------------------------------------------------
 * Phones and tablets (below 992px, where the menu drawer is
 * used): the DIR Figma "Mega Header Mobile" has no dark top
 * bar, so it is hidden, and js/global.js copies its links into
 * the menu drawer as .mobile-utility-links.
 * --------------------------------------------------------- */
.mobile-utility-links {
  display: none;
}

@media (width <= 991px) {
  .utility-header {
    display: none;
  }
  .navigation-search .mobile-utility-links {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }
  .navigation-search .mobile-utility-links .utility-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 1.125rem;
    line-height: 1.5;
    text-decoration: none;
  }
  .navigation-search .mobile-utility-links .utility-link:hover, .navigation-search .mobile-utility-links .utility-link:focus {
    text-decoration: underline;
  }
  .navigation-search .mobile-utility-links .utility-link-icon {
    flex-shrink: 0;
    color: #4d6eb4;
    font-size: 1rem;
  }
  .navigation-search .mobile-utility-links .utility-link-svg {
    width: 1rem;
    height: 1rem;
  }
}
/* ---------------------------------------------------------
 * Aligned media in body text
 *
 * CKEditor's Align left / Align right wraps embedded media in
 * .align-left / .align-right. Drupal core's align.module.css
 * only floats them, so text wrapped against the image. Add
 * 1em of space on the side the text wraps.
 *
 * Below 576px the text beside the image is only a few words
 * wide, so the image stops floating and the text starts below
 * it. The image's own bottom margin spaces it from the text.
 * --------------------------------------------------------- */
.align-left {
  padding-right: 1em;
}

.align-right {
  padding-left: 1em;
}

@media (max-width: 575.98px) {
  .align-left,
  .align-right {
    float: none;
    padding: 0;
  }
}
/* ---------------------------------------------------------
 * CADIR Global Container
 *
 * Use the California State Template container widths
 * throughout the entire site instead of Bootstrap's
 * desktop container widths.
 * --------------------------------------------------------- */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: var(--breakpoint-xm);
  }
}
@media (min-width: 768px) {
  .container {
    max-width: var(--breakpoint-sm);
  }
}
@media (min-width: 992px) {
  .container {
    max-width: var(--breakpoint-md);
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: var(--breakpoint-lg);
  }
}
/* ---------------------------------------------------------
 * CADIR global styles
 * --------------------------------------------------------- */
.toolbar-button--icon--dots {
  background-color: #ffdd00 !important;
  border-radius: 4px;
}

.top-bar__content .toolbar-dropdown {
  background-color: #fff9db !important;
}

/* ---------------------------------------------------------
 * Drupal Bootstrap search form integration
 * --------------------------------------------------------- */
#Search .form-item-keys {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

#Search .form-actions {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.ui-autocomplete .ui-menu-item-wrapper .ca-gov-icon {
  display: inline-block;
  width: 1.5rem;
  margin-right: 0.5rem;
  text-align: center;
  font-size: 1.25rem;
}

.ui-autocomplete .ui-menu-item-wrapper .cadir-icon-autocomplete-label {
  display: inline-block;
}

/* ---------------------------------------------------------
 * CADIR Page Layout
 * --------------------------------------------------------- */
html,
body {
  min-height: 100%;
}

#page-wrapper {
  min-height: 100vh;
}

#page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#main-wrapper {
  flex: 1 0 auto;
}

/* ---------------------------------------------------------
 * CADIR Header Backdrop
 * --------------------------------------------------------- */
/*
 * The State Template uses #header::after as the navigation
 * backdrop. When the menu is closed, the backdrop is hidden
 * but its viewport-sized box still contributes to document
 * overflow. Collapse it in the closed state.
 */
#header::after {
  height: 1px;
  bottom: auto;
}

@media (width <= 991px) {
  #Search .search-textfield {
    height: 38px;
  }
}
/* ---------------------------------------------------------
 * CADIR Skip Link Target
 * --------------------------------------------------------- */
/*
 * The skip link moves focus to #main-content, which sits below
 * the sticky header and the breadcrumb. Without a scroll margin
 * the browser scrolls the target to the top of the viewport; any
 * scroll over 40px triggers the State Template's hide-on-scroll,
 * which hides the utility header. The margin covers the header,
 * breadcrumb, and spacing so using the skip link (or reloading
 * with #main-content in the URL) does not scroll the page.
 *
 * This code is on the CDT live site (https://www.cdt.ca.gov/,
 * which sets scroll-margin-top on its #main-content) but is not
 * included in the CA.gov State Template.
 */
#main-content {
  scroll-margin-top: 280px;
}

@media (width <= 991px) {
  #main-content {
    scroll-margin-top: 200px;
  }
}
/* ---------------------------------------------------------
 * CADIR Meeting Links
 * --------------------------------------------------------- */
/*
 * A meeting's Agenda, Notices and Recordings links are State
 * Template buttons (btn btn-primary, added in
 * cadir_preprocess_field()). Show them side by side, wrapping on
 * narrow screens.
 */
.field--name-field-agenda-from-pdf,
.field--name-field-agenda-page,
.field--name-field-notices-from-pdf,
.field--name-field-meeting-notices,
.field--name-field-meeting-recording {
  display: inline-block;
  margin: 0 0.5rem 0.5rem 0;
}