/* ==========================================================================
   HCPS sitepackage – additions on top of the "ABC Tots" template CSS
   ========================================================================== */

/* --- Hero (replaces the LayerSlider parallax slider with a CSS composition) ---
   LayerSlider used a 1200x800 stage centred in the viewport with absolutely positioned
   layers; we reproduce exactly that and scale the whole stage down on smaller screens. */
.hcps-hero {
    position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.hcps-hero-stage {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1200px;
    height: 800px;
    margin-left: -600px;
    transform-origin: top center;
}
.hcps-hero .hcps-hero-layer {
    position: absolute;
    max-width: none;
    pointer-events: none;
}
.hcps-hero .hcps-hero-clouds {
    top: 56px;
    left: -100px;
    animation: hcps-drift 40s ease-in-out infinite alternate;
}
.hcps-hero .hcps-hero-butterflies {
    top: 16px;
    left: 0;
    animation: hcps-float 6s ease-in-out infinite;
}
.hcps-hero .hcps-hero-sun {
    top: -190px;
    left: 650px;
    animation: hcps-sun 8s ease-in-out infinite alternate;
}
.hcps-hero .hcps-hero-child {
    top: 166px;
    left: 520px;
    animation: hcps-rise 1.1s ease-out both;
}
.hcps-hero .header-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    margin-left: 0 !important;
    z-index: 2;
}
.hcps-hero .header-text {
    margin-left: 5%;
    width: 40% !important;
    margin-top: 15%;
    text-align: center;
    white-space: normal;
    animation: hcps-rise 0.7s ease-out 0.2s both;
}
.hcps-hero .header-text .btn {
    margin: 4px 2px;
}
@keyframes hcps-drift {
    from { transform: translateX(0); }
    to { transform: translateX(-80px); }
}
@keyframes hcps-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
@keyframes hcps-sun {
    from { transform: translateY(0) rotate(0deg); }
    to { transform: translateY(16px) rotate(6deg); }
}
@keyframes hcps-rise {
    from { opacity: 0; transform: translateY(60px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1199px) {
    .hcps-hero { height: 640px; }
    .hcps-hero-stage { transform: scale(0.8); }
}
@media (max-width: 991px) {
    .hcps-hero { height: 520px; }
    .hcps-hero-stage { transform: scale(0.65); }
    .hcps-hero .header-text {
        background: rgba(255, 255, 255, 0.73);
        width: 70% !important;
        padding: 20px;
        border-radius: 20px;
        margin-top: 10%;
    }
    .hcps-hero .hcps-hero-child { left: 0; top: 260px; }
}
@media (max-width: 575px) {
    .hcps-hero { height: 400px; }
    .hcps-hero-stage { transform: scale(0.5); }
    .hcps-hero .header-text { width: 90% !important; margin-top: 8%; }
    .hcps-hero .hcps-hero-sun { display: none; }
}

/* --- Layout integration ------------------------------------------------ */
#page-content > .frame { padding-top: 90px; }
#page-content > .frame.frame-none { padding-top: 0; }
.hcps-page-content { padding-top: 30px; padding-bottom: 60px; }
.hcps-page-content > .frame.frame-default { padding-top: 60px; padding-bottom: 30px; }
.hcps-page-content > .frame.frame-default + .frame.frame-default { padding-top: 30px; }
.hcps-page-content > .frame.frame-none { padding: 0; }
.hcps-jumbotron { background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center top; margin-bottom: 0; }
.hcps-jumbotron > .row { margin: 0; }
.jumbo-heading .breadcrumb { justify-content: center; margin-bottom: 0; padding: 6px 16px; }
.jumbo-heading .breadcrumb a { color: #fff; }
.jumbo-heading .breadcrumb-item.active { color: #fff; opacity: 0.85; }

/* Navbar tweaks for the dynamically generated menu */
#main-nav > .row { margin: 0; }
#main-nav > .row > [class*="container"] { padding-left: 0; padding-right: 0; }
.navbar .dropdown-menu { display: none; }
.navbar .dropdown-menu.show { display: block; }
.nav-brand img { max-height: 60px; width: auto; }

/* Footer columns rendered from backend colPos 10/11/12 */
.hcps-footer-col .frame { padding: 0; margin: 0; }
.hcps-footer-col h5 { color: #fff; }
.hcps-footer-col ul { padding-left: 0; list-style: none; }
.hcps-footer-col .margin-icon { margin-right: 8px; }

/* Content blocks helpers */
.hcps-section-heading .subtitle { display: inline-block; }
.hcps-checklist { padding-left: 0; }
.hcps-gallery .gallery-isotope .portfolio-item { margin-bottom: 30px; }
.hcps-callout img.img-rounded { display: block; margin: 0 auto 30px; max-width: 50%; }
@media (max-width: 767px) { .hcps-callout img.img-rounded { max-width: 100%; } }
.hcps-team .team-content .social a { margin: 0 4px; }
.hcps-contact-form .form-group { margin-bottom: 1rem; }
.hcps-contact-form label { font-weight: 700; margin-bottom: 4px; }
.hcps-contact-form .required { color: #E8373D; }
.contact-map-wrap iframe { width: 100%; max-width: 100%; }
.counter .counter-value:before { content: attr(data-prefix); }
.counter .counter-value.no-prefix:before { display: none; }
.hcps-gallery.gallery-home {
    background-image: url("../img/ornaments/numbers1.png"), url("../img/ornaments/numbers2.png");
    background-repeat: no-repeat;
    background-position: left 25%, right 55%;
    background-attachment: fixed;
}
.callout-band {
    background-image: url("../img/call-to-action/callout.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.hcps-popup-close {
    position: absolute; top: 8px; right: 8px; z-index: 10; width: 36px; height: 36px;
    background: #e50914; color: #000; border: none; border-radius: 4px; font-size: 22px; font-weight: bold;
    line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* --- EXT:news ------------------------------------------------------------- */
.blogprev-home {
    background-image: url("../img/ornaments/doodlesbg.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}
.hcps-news-list .blog-box { height: 100%; }
.blog-box .image img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.hcps-news-detail .post-date, .hcps-news-detail .post-author, .hcps-news-detail .post-categories { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 14px; }
.hcps-news-detail .post-date i, .hcps-news-detail .post-author i, .hcps-news-detail .post-categories i { margin-right: 4px; }
.hcps-pagination .page-link { border-radius: 50% !important; margin: 0 4px; width: 42px; height: 42px; text-align: center; line-height: 26px; }
.hcps-contact-form button[type="submit"].btn-primary { background-color: #e4a40f; border-color: #e4a40f; }
.hcps-contact-form button[type="submit"].btn-primary:hover { background-color: #E8373D; border-color: #E8373D; }

/* --- Default content elements inside the template design ------------------- */
/* frames get the template's section spacing */
#page-content > .frame.frame-default { padding-top: 90px; padding-bottom: 90px; }
#page-content > .frame.frame-default + .frame.frame-default { padding-top: 0; }
#page-content > [class*="hcps-"] + .frame.frame-default.frame-layout-embedded { padding-top: 0; }
/* text/media beside text: 7/5 split like the original layout, image with rounded corners */
@media (min-width: 992px) {
    .textpic-right .textpic-text, .textpic-left .textpic-text, .textmedia-right .textmedia-text, .textmedia-left .textmedia-text { width: calc(58.3333% - 20px); }
    .textpic-right .textpic-gallery, .textpic-left .textpic-gallery, .textmedia-right .textmedia-gallery, .textmedia-left .textmedia-gallery { width: calc(41.6667% - 20px); }
}
.textpic .image img, .textmedia .image img { border-radius: 0.375rem; }
.textpic-text .btn, .textmedia-text .btn, .frame-type-text .btn { margin: 0 6px 6px 0; }
/* ornaments & image effects (frame options, combinable) */
.textpic-gallery, .textmedia-gallery { position: relative; }
.frame-option-ornament-rainbow .textpic-gallery::after, .frame-option-ornament-rainbow .textmedia-gallery::after {
    content: ""; position: absolute; right: -40px; bottom: -60px; z-index: 1; width: 250px; height: 113px;
    background: url("../img/ornaments/ornament3.png") no-repeat;
}
.frame-option-ornament-stars .textpic-gallery::after, .frame-option-ornament-stars .textmedia-gallery::after {
    content: ""; position: absolute; left: -20px; top: 20px; z-index: 1; width: 117px; height: 168px;
    background: url("../img/ornaments/ornament1.png") no-repeat;
}
.frame-option-ornament-bubbles .textpic-gallery::after, .frame-option-ornament-bubbles .textmedia-gallery::after {
    content: ""; position: absolute; left: -10px; bottom: -40px; z-index: 1; width: 80px; height: 200px;
    background: url("../img/ornaments/ornament2.png") no-repeat;
}
.frame-option-image-blob .textpic-gallery img, .frame-option-image-blob .textmedia-gallery img {
    border-radius: 30% 70% 70% 30% / 30% 45% 55% 70%; transition: all 0.7s ease-in-out;
}
.frame-option-image-blob .textpic-gallery img:hover, .frame-option-image-blob .textmedia-gallery img:hover { border-radius: 57% 43% 31% 69% / 54% 61% 39% 46%; }
.frame-option-image-rotate .textpic-gallery img, .frame-option-image-rotate .textmedia-gallery img { transform: rotate(-2deg); }
@media (max-width: 991px) { [class*="frame-option-ornament-"] .textpic-gallery::after, [class*="frame-option-ornament-"] .textmedia-gallery::after { display: none; } }
/* RTE "List Check" style rendered like the template's ul.checkmark */
.frame ul.list-check > li { padding: 3px 0 3px 1.5em; }
.frame ul.list-check > li::before { background-image: none; content: "\f14a"; font-family: "Font Awesome 5 Free"; font-weight: 400; color: #e4a40f; position: absolute; left: 0; top: 3px; width: auto; height: auto; }
.hcps-team-cards { padding-top: 40px; padding-bottom: 90px; }
/* Background "Notepad": lined paper (original .notepad) – usable on any frame / container */
.frame-background-notepad {
    --frame-background: repeating-linear-gradient(to bottom, transparent 0, transparent 30px, rgba(173, 216, 230, 0.31) 30px, rgba(173, 216, 230, 0.31) 32px), linear-gradient(to right, transparent 0, transparent 2rem, rgba(255, 182, 193, 0.48) 2rem, rgba(255, 182, 193, 0.48) 2.2rem, transparent 2.2rem), #f6f6f6;
    --frame-color: #6A6A71;
    --frame-link-color: #035392;
}
.frame-background-notepad.frame-layout-embedded > .frame-group-container > .frame-group-inner { box-shadow: 0 1px 4px hsla(0, 0%, 0%, .25); padding-left: 3rem; }
.frame-background-notepad:not(.frame-layout-embedded) { box-shadow: inset 0 1px 4px hsla(0, 0%, 0%, .15); }
.frame-background-notepad p { color: #3c3b3b; }
/* form + map inside the container */
.frame-type-form_formframework .form-control { border: 1px solid #e4a40f; }
.frame-type-form_formframework label { font-weight: 700; }
.frame-type-form_formframework button[type="submit"].btn-primary { background-color: #e4a40f; border-color: #e4a40f; }
.frame-type-form_formframework button[type="submit"].btn-primary:hover { background-color: #E8373D; border-color: #E8373D; }
.frame-type-html iframe { width: 100%; max-width: 100%; border: 0; }
/* footer column 1: default Image element (logo) + HTML element (newsletter form) */
.hcps-footer-col .frame-type-image .gallery-row { justify-content: center; }
.hcps-footer-col .frame-type-image .gallery-item { max-width: 230px; margin: 0 auto; }
.hcps-footer-col .frame-type-image img { width: 100%; height: auto; }
.hcps-footer-col #mc_embed_signup .input-group { margin-top: 10px; }
/* left/right aligned subheaders look like the template's .h7 */
.frame-header .element-subheader { color: #949393; font-family: 'Nunito', sans-serif; font-size: 0.95em; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; }
/* RTE "List Pencil": the template's ul.custom */
.frame ul.list-pencil, .highlight-text ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.frame ul.list-pencil > li { padding: 5px 0; }
.frame ul.list-pencil > li::before { content: "\f303"; font-family: "Font Awesome 5 Free"; font-weight: 900; padding-right: 7px; color: #035392; }
/* bootstrap_package accordion in the template's look (red open / blue collapsed headers with +/- icon) */
.frame .accordion { --bs-accordion-border-width: 0; --bs-accordion-bg: transparent; }
.frame .accordion-item { background: transparent; border: 0; margin-bottom: 8px; }
.frame .accordion-button {
    background-color: #E8373D; color: #fff; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.7px;
    border-radius: 5px !important; padding: 12px 20px; box-shadow: none; transition: all 0.8s;
}
.frame .accordion-button.collapsed { background-color: #035392; }
.frame .accordion-button::after { display: none; }
.frame .accordion-button::before { content: "\f068"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 14px; }
.frame .accordion-button.collapsed::before { content: "\f067"; }
.frame .accordion-body { padding: 20px 10px; color: #3c3b3b; }
/* counters block: full-width band; background image from the Appearance tab (dark overlay), grey fallback */
#page-content .frame.frame-type-hcps_counters { padding-top: 90px; padding-bottom: 90px; }
.frame-type-hcps_counters.frame-no-backgroundimage { --frame-background: #7d7d7d; }
.frame-type-hcps_counters .frame-backgroundimage-container::after { content: ""; position: absolute; inset: 0; background: rgba(41, 41, 41, 0.42); }
.frame-type-hcps_counters .frame-backgroundimage-behaviour-cover { background-attachment: fixed; }
@media (hover: none) { .frame-type-hcps_counters .frame-backgroundimage-behaviour-cover { background-attachment: initial; } }
/* RTE contact list: icons via li classes (Contact: E-mail / Phone / Address) */
.frame ul.list-contact { list-style: none; padding-left: 0; margin-top: 1rem; }
.frame ul.list-contact > li { padding: 6px 0; }
.frame ul.list-contact > li.contact-mail, .frame ul.list-contact > li.contact-phone { font-size: 1.35rem; font-weight: 700; font-family: 'Nunito', sans-serif; }
.frame ul.list-contact > li::before { font-family: "Font Awesome 5 Free"; font-weight: 900; color: #e4a40f; margin-right: 10px; }
.frame ul.list-contact > li.contact-mail::before { content: "\f0e0"; }
.frame ul.list-contact > li.contact-phone::before { content: "\f095"; }
.frame ul.list-contact > li.contact-address::before { content: "\f3c5"; }
/* form element with notepad background inside a container column */
.frame-type-form_formframework.frame-background-notepad .frame-container { padding: 0; }
.contact-map-full iframe { width: 100%; display: block; }
/* links inside default frames: template blue (bootstrap_package defaults to $primary = red) */
.frame.frame-background-none, .frame.frame-background-notepad { --frame-link-color: #035392; --frame-link-hover-color: #E8373D; }
/* CKEditor 5 wraps list item text in <p>: keep the icon on the same line */
.frame ul.list-contact > li > p { display: inline; margin: 0; }
.frame ul.list-contact > li > p.text-center { display: inline; }
/* contact list items: center when the editor set "center" on the item text */
.frame ul.list-contact > li:has(> p.text-center), .frame ul.list-contact.text-center > li { text-align: center; }

/* --- Careers -------------------------------------------------------------- */
.hcps-jobs .hcps-job-card { padding: 30px; border: 0; border-radius: 8px; }
.hcps-jobs .hcps-job-card h5 { font-family: 'Nunito', sans-serif; font-weight: 700; }
.hcps-jobs .hcps-job-card h6 { font-weight: 700; margin-top: 1rem; }
.hcps-jobs .job-requirements ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.hcps-jobs .job-requirements ul li { padding: 3px 0 3px 1.6em; position: relative; }
.hcps-jobs .job-requirements ul li::before { content: "\f14a"; font-family: "Font Awesome 5 Free"; font-weight: 400; color: #e4a40f; position: absolute; left: 0; top: 3px; }
.hcps-jobs .job-meta { color: #949393; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 14px; padding-left: 0; }
.hcps-jobs .job-meta li { margin-right: 18px; }
.hcps-jobs .job-meta i { color: #e4a40f; margin-right: 5px; }
.hcps-apply-form { padding: 30px 20px 30px 40px; border-radius: 8px; }
.hcps-apply-form .form-control { border: 1px solid #e4a40f; }
.hcps-apply-form label { font-weight: 700; }
.hcps-apply-form button[type="submit"].btn-primary { background-color: #e4a40f; border-color: #e4a40f; }
.hcps-apply-form button[type="submit"].btn-primary:hover { background-color: #E8373D; border-color: #E8373D; }
.hcps-apply-form input[readonly] { background-color: #efefef; }
.hcps-jobs > h3, .hcps-jobs > h2 { margin-top: 2rem; }
