@media (min-width: 576px) {
    .visual-callout.left .visual-callout-content {
        left: 50px;
        right: 40%;
    }
}

.visual-callout-title {
    margin-bottom:.3em;
    margin-top:.5em;
}

.task-bar-item {
    font-size: .85em;
    font-weight: 200;
}


.visual-callout img{
    min-height:400px;
    width: 100%
}


.menusub {
        color: #da291c;
    font-size: 1.25rem;
}

@media (min-width: 1024px) {
    .task-bar.home .task-bar-item {
        padding: 0 15px;
        height: 95px;
    }
}

.footer-nav {
    margin: 0 0 0 0;
}

input::placeholder {
  font-weight: bold;
  color: red;
}

input::-webkit-input-placeholder {
  font-weight: bold;
  color: red;
}

input:-moz-placeholder {
  font-weight: bold;
  color: red;
}

input::-moz-placeholder {
  font-weight: bold;
  color: red;
}

input:-ms-input-placeholder {
  font-weight: bold;
  color: red;
}

textarea::placeholder {
  font-weight: bold;
  color: red;
}

textarea::-webkit-input-placeholder {
  font-weight: bold;
  color: red;
}

textarea:-moz-placeholder {
  font-weight: bold;
  color: red;
}

@media (min-width: 576px) {
    .visual-callout.left .visual-callout-content {
        left: 50px;
        right: 40%;
    }
}

.visual-callout-title {
    margin-bottom:.3em;
    margin-top:.5em;
}

.task-bar-item {
    font-size: .85em;
    font-weight: 200;
}


.visual-callout img{
    min-height:400px;
    width: 100%
}

@media (min-width: 1280px) {
    .visual-callout .visual-callout-content .visual-callout-description, .visual-callout .visual-callout-content .visual-callout-label {
        margin-top: 15px;
        line-height: 1.11;
        font-size: 1.5rem;
    }
}


.menusub {
        color: #da291c;
    font-size: 1.25rem;
}

@media (min-width: 1024px) {
    .task-bar.home .task-bar-item {
        padding: 0 15px;
        height: 95px;
    }
}

.footer-nav {
    margin: 0 0 0 0;
}


@media (min-width: 1280px) {
    .context-nav-container .cnc-links-wrapper {
        padding-left: 24px;
        padding-right: 0px;
    }

    h4, .h4 {
        font-size: 1.2rem;
    }

}

@media (min-width: 576px) {
    .visual-callout.left .visual-callout-content {
        left: 30px;
        right: 55%;
    }
}

.visual-callout-title {
    margin-bottom:.3em;
    margin-top:.5em;
}

.task-bar-item {
    font-size: .55em;
    height: 55px;
    font-weight: 200;
}


.visual-callout img{
    min-height:400px;
    width: 100%
}

    .visual-callout .visual-callout-content .visual-callout-title.experience, .visual-callout .visual-callout-content .visual-callout-description.experience {
        color: #ffffff;
    }


@media (min-width: 680px) {
    .task-bar.home .task-bar-item {
        padding: 0 20px;
        font-size: .6em;
    }
}

@media (min-width: 1000px) {
    .task-bar.home .task-bar-item {
        padding: 0 20px;
        font-size: .85em;
    }
}


@media (min-width: 1280px) {
    .visual-callout .visual-callout-content .visual-callout-description, .visual-callout .visual-callout-content .visual-callout-label {
        margin-top: 15px;
        line-height: 1.11;
        font-size: 1.5rem;
    }
}


.menusub {
        color: #da291c;
    font-size: 1.25rem;
}

@media (min-width: 1024px) {
    .task-bar.home .task-bar-item {
        padding: 0 15px;
        height: 75px;
    }
}

.footer-nav {
    margin: 0 0 0 0;
}


@media (min-width: 1280px) {
    .context-nav-container .cnc-links-wrapper {
        padding-left: 24px;
        padding-right: 0px;
    }

    h4, .h4 {
        font-size: 1.2rem;
    }

    .visual-callout .visual-callout-content .visual-callout-title {
        font-size: 2.5rem;
        line-height: 1.13;
    }

        .visual-callout .visual-callout-content .visual-callout-description, .visual-callout .visual-callout-content .visual-callout-label {
        margin-top: 15px;
        line-height: 1.11;
        font-size: 1.5rem;
    }

}

@media (max-width: 576px) {
    .hideonmobile {
        display: none;
    }

    .banner-contents {
        font-size: .75em;
    }

    .visual-callout.left .visual-image-container {
        background-position-x: 0px;
        min-height: 130px;
        max-height: 140px;
        background-size: contain;
    }

       .visual-callout .visual-callout-content .visual-callout-title.experience, .visual-callout .visual-callout-content .visual-callout-description.experience {
           color: #4a4a4a;
    }


}

@media (max-width: 990px) {
    .banner-container.home h1 {
        font-size: 2rem;
        line-height: 1;
    }

    .banner-description {
        font-size: 1rem;
    }
}


@media (min-width: 576px) {
    .visual-callout.left .visual-image-container {
        background-position-x: -300px;
    }
}

@media (min-width: 1076px) {
    .visual-callout.left .visual-image-container {
        background-position-x: 00px;
    }
}


@media (min-width: 1024px) {
    .visual-callout .visual-callout-content .visual-callout-description, .visual-callout .visual-callout-content .visual-callout-label {
        line-height: 1.08;
        font-size: 1.25rem;
    }
}

/* Navbar toggler */
.navbar-toggler {
  border-color: rgba(200,16,46,0.5);
  padding: 4px 8px;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(200,16,46,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Desktop dropdown */
@media (min-width: 768px) {
  .navbar .dropdown-menu {
    min-width: 200px;
    padding: 0;
    margin-top: 4px;
    border: none;
    border-top: 3px solid #c8102e;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.13);
  }
  .navbar .dropdown-item {
    padding: 11px 20px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
  }
  .navbar .dropdown-item:last-child {
    border-bottom: none;
  }
  .navbar .dropdown-item:hover,
  .navbar .dropdown-item:focus {
    background-color: #c8102e;
    color: #fff;
  }
}

/* Mobile dropdown — inline inside collapsed nav */
@media (max-width: 767px) {
  .navbar-collapse {
    border-top: 2px solid #c8102e;
    margin-top: 8px;
    padding-top: 8px;
  }
  .navbar .dropdown-menu {
    border: none;
    border-left: 3px solid #c8102e;
    border-radius: 0;
    box-shadow: none;
    background: #f8f8f8;
    padding: 4px 0;
    margin: 0 0 6px 12px;
  }
  .navbar .dropdown-item {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #333;
    padding: 9px 16px;
    white-space: nowrap;
  }
  .navbar .dropdown-item:hover {
    background-color: #c8102e;
    color: #fff;
  }

  .navbar .nav-item.dropdown:hover .dropdown-menu {
    display: block;
  }
}

.navbar .nav-item.dropdown .dropdown-toggle::after {
  vertical-align: 0.12em;
}

.navbar .nav-item.dropdown .dropdown-toggle::after {
    display: inline-block !important;
    position: static !important;      /* explicitly keep it in flow */
    width: 14px !important;
    height: 14px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    content: "" !important;
    border: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
    transform-origin: center !important;
    will-change: transform !important; /* isolates compositing layer */
}

.navbar .nav-item.show .dropdown-toggle::after {
    transform: rotate(180deg) !important;
}

.navbar .nav-item.dropdown .dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
}

@media (hover: hover) {
    .navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block !important;
    }

    .navbar .nav-item.dropdown:hover > .dropdown-toggle::after {
        transform: rotate(180deg) !important;
    }

    .navbar .nav-item.dropdown:hover > .dropdown-toggle {
        color: /* your hover color here */;
    }
}
.navbar .nav-item.dropdown .dropdown-toggle::before {
    content: "" !important;
    position: absolute !important;
    bottom: -10px !important; /* match or exceed your dropdown margin/gap */
    left: 0 !important;
    width: 100% !important;
    height: 10px !important;
}

.navbar .nav-item.dropdown .dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important; /* needed for ::before to anchor correctly */
}


/* ==========================================================================
   HOME PAGE CALLOUT CARDS
   --------------------------------------------------------------------------
   Applies to every block-image block (.visual-callout) -- the cards in
   content_block1, content_block2, content_resources, content_news and
   content_faq on the home page.

   The whole card stays a single link, as before. What changes:
     1. Hovering no longer underlines the entire body paragraph.
     2. The old inline arrow (a solid disc with a triangle knocked out --
        structurally a play button) is gone.
     3. A chevron sits BELOW the copy instead of beside it. It is rendered by
        block--block-content--type--block-image.html.twig, so it appears on
        every card automatically.

   smr.css loads last in apcosmr.libraries.yml, so these override
   new/style.css without editing that 12,000-line file.

   TO REVERT: delete this block and the .callout-go markup from the Twig.
   ========================================================================== */

/* --- 1. Stop the whole paragraph underlining on hover ------------------- */
/* Overrides `.visual-callout:hover .visual-callout-content
   .visual-callout-description { text-decoration: underline }` at
   new/style.css line 11739. */
.visual-callout:hover .visual-callout-content .visual-callout-description {
    text-decoration: none;
}

/* Keep SOME hover feedback -- the card is clickable, so it needs to react.
   The title underlines; the paragraph does not. If you want zero underline
   anywhere, delete this rule and the chevron alone carries the hover. */
.visual-callout:hover .visual-callout-content .visual-callout-title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* --- 2. Retire the old inline arrows ------------------------------------ */
/* These <span class="link-icon"> elements are hand-written into each block's
   body field. Hiding them here means you do not have to edit every block,
   though cleaning them out of the body HTML is still worth doing eventually.

   Specificity is deliberate: new/style.css sets
   `.visual-callout .visual-callout-content .visual-callout-description
   .link-icon { display: inline-block }` inside a min-width:576px media query
   (0,4,0). A shorter selector here would lose. These match at (0,4,0) and win
   on source order. That is also why no !important is needed. */
.visual-callout .visual-callout-content .visual-callout-title .link-icon,
.visual-callout .visual-callout-content .visual-callout-description .link-icon {
    display: none;
}

/* --- 3. The new chevron, below the copy --------------------------------- */
/* PURE CSS ON PURPOSE -- DO NOT MOVE THIS INTO THE TWIG TEMPLATE.
   An earlier revision rendered this as an inline <svg> in
   block--block-content--type--block-image.html.twig. It never appeared on the
   live site, and neither did a previous template change, while CSS edits to
   this file applied immediately. Whatever the cause -- Twig cache, or the
   .twig files not reaching the server -- this file is the delivery path that
   demonstrably works, so the icon is generated here as a ::after
   pseudo-element and needs no template change at all.

   It hangs off .visual-callout-description rather than a wrapper because that
   element is already display:block (set in new/style.css), so a block-level
   ::after naturally falls onto its own line below the copy. That also lets the
   white-on-photo variant key off .experience directly, with no :has() and no
   sibling combinator. */
/* COLOR: the chevron is drawn as a MASK filled with `currentColor`, not as a
   background-image with a baked-in stroke color. It therefore takes the color
   of whatever text it sits under, per block, automatically:

     - Resources / Latest News and any other default card -> #4a4a4a, the
       inherited .visual-callout-description color from new/style.css.
     - The Cook "experience" card -> #ffffff above 576px and #4a4a4a below,
       because the .experience rules further up this file already flip the
       description color at that breakpoint. No separate variant needed.
     - Any card later given .white or .dark-blue (both already defined in
       new/style.css but currently unused) -> follows those too, for free.

   A hardcoded red was the original problem: it fit the Cook card and clashed
   with everything else. Masking removes the whole class of mismatch -- there
   is now no way for the icon to disagree with its own block. */
/* Wrapped in @supports deliberately. Without mask support, a
   `background-color: currentColor` box with no mask applied renders as a solid
   34px filled square -- a worse result than no icon at all. This way
   unsupported browsers simply get no chevron and the card still works. */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {

.visual-callout .visual-callout-content .visual-callout-description::after {
    content: "";
    display: block;
    width: 34px;
    height: 34px;
    margin-top: 18px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17' cy='17' r='15.5'/%3E%3Cpolyline points='14.5 11 20.5 17 14.5 23'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17' cy='17' r='15.5'/%3E%3Cpolyline points='14.5 11 20.5 17 14.5 23'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: transform 0.18s ease;
}

/* Hover cue is the nudge plus the title underline above. The icon no longer
   shifts color on hover, because it has no color of its own to shift. */
.visual-callout:hover .visual-callout-content .visual-callout-description::after {
    transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
    .visual-callout .visual-callout-content .visual-callout-description::after {
        transition: none;
    }
    .visual-callout:hover .visual-callout-content .visual-callout-description::after {
        transform: none;
    }
}

} /* end @supports mask-image */
.h2_red a {
    color: #af2218;
}