/**
 * theme-public.css — HHReps public theme
 *
 * Replaces Porto theme CSS + skin-hhreps.css with a lean compatibility layer.
 * Provides all Porto utility classes actually used in templates,
 * plus the HHReps color scheme and component styles.
 *
 * Total: ~400 lines vs Porto's 7,400+ lines in skin-hhreps.css alone.
 */

/* ══════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS (from skin-hhreps.css :root)
   ══════════════════════════════════════════════════════════════════════ */
:root {
    --hhr-primary:    #becaea;
    --hhr-secondary:  #415563;
    --hhr-tertiary:   #653024;
    --hhr-quaternary: #415563;
    --hhr-link:       #165c7d;
    --hhr-link-hover: #d1daf0;
    --hhr-dark:       #212529;
    --hhr-light:      #ffffff;
    --hhr-nav-bg:     #f8f9fa;
    --hhr-nav-border: #dee2e6;
    --hhr-footer-bg:  #1a2332;
    --hhr-footer-text:#c8d0db;
}

::selection {
    color: #777;
    background: var(--hhr-primary);
}

/* ══════════════════════════════════════════════════════════════════════
   2. BASE / TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════════ */
body.hhr-public {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    color: #777;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

a { color: var(--hhr-link); }
a:hover { color: var(--hhr-link-hover); }

@font-face {
    font-family: 'Rockwell';
    src: url('../fonts/rockwell/Rockwell.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

.rockwell { font-family: 'Rockwell', serif; font-weight: bold; }

/* ══════════════════════════════════════════════════════════════════════
   3. PORTO UTILITY CLASS COMPATIBILITY
   ══════════════════════════════════════════════════════════════════════ */

/* ── Font weights ── */
.font-weight-light       { font-weight: 300 !important; }
.font-weight-normal      { font-weight: 400 !important; }
.font-weight-medium      { font-weight: 500 !important; }
.font-weight-semibold    { font-weight: 600 !important; }
.font-weight-bold        { font-weight: 700 !important; }
.font-weight-extra-bold  { font-weight: 800 !important; }

/* ── Text sizes (Porto scale: text-1 = ~11px … text-12 = ~42px) ── */
.text-1     { font-size: 0.6875rem !important; }
.text-2     { font-size: 0.8125rem !important; }
.text-2-5   { font-size: 0.9rem !important; }
.text-3     { font-size: 0.9375rem !important; }
.text-4     { font-size: 1.0625rem !important; }
.text-4-5   { font-size: 1.125rem !important; }
.text-5     { font-size: 1.25rem !important; }
.text-5-5   { font-size: 1.375rem !important; }
.text-6     { font-size: 1.5rem !important; }
.text-7     { font-size: 1.75rem !important; }
.text-8     { font-size: 2rem !important; }
.text-9     { font-size: 2.25rem !important; }
.text-10    { font-size: 2.5rem !important; }
.text-11    { font-size: 2.75rem !important; }
.text-12    { font-size: 3.25rem !important; }
.text-md-12-13 { font-size: 3.25rem !important; }
@media (min-width: 768px) {
    .text-md-12-13 { font-size: 3.5rem !important; }
}

/* ── Text colors ── */
html .text-color-primary,
html .text-primary:not(.btn):not(.nav-link) { color: var(--hhr-link) !important; }
html .text-color-hover-primary:hover          { color: var(--hhr-primary) !important; }
html .text-color-secondary                    { color: var(--hhr-secondary) !important; }
html .text-color-tertiary                     { color: var(--hhr-tertiary) !important; }
html .text-color-quaternary                   { color: var(--hhr-quaternary) !important; }
html .text-color-dark                         { color: var(--hhr-dark) !important; }
html .text-color-hover-dark:hover             { color: var(--hhr-dark) !important; }
html .text-color-light                        { color: #fff !important; }
html .text-color-hover-light:hover            { color: #fff !important; }
html .text-color-default                      { color: #777 !important; }
html .text-color-hover-primary:hover          { color: var(--hhr-primary) !important; }

/* ── Background colors ── */
html .bg-color-primary            { background-color: var(--hhr-primary) !important; }
html .bg-color-secondary          { background-color: var(--hhr-secondary) !important; }
html .bg-color-tertiary           { background-color: var(--hhr-tertiary) !important; }
html .bg-color-quaternary         { background-color: var(--hhr-quaternary) !important; }
html .bg-color-dark               { background-color: var(--hhr-dark) !important; }
html .bg-color-light              { background-color: #fff !important; }
html .bg-color-light-scale-1      { background-color: #f7f7f7 !important; }
html .bg-color-light-scale-2      { background-color: #f4f4f4 !important; }
html .bg-color-grey-scale-1       { background-color: #f7f7f7 !important; }

/* ── Border colors ── */
html .border-color-primary        { border-color: var(--hhr-primary) !important; }
html .border-color-light          { border-color: rgba(255,255,255,.25) !important; }
html .border-color-light-2        { border-color: rgba(255,255,255,.4) !important; }

/* ── Opacity ── */
.opacity-1 { opacity: .1 !important; }
.opacity-2 { opacity: .2 !important; }
.opacity-3 { opacity: .3 !important; }
.opacity-4 { opacity: .4 !important; }
.opacity-5 { opacity: .5 !important; }
.opacity-6 { opacity: .6 !important; }
.opacity-7 { opacity: .7 !important; }
.opacity-8 { opacity: .8 !important; }
.opacity-9 { opacity: .9 !important; }

/* ── Line heights ── */
.line-height-1 { line-height: 1 !important; }
.line-height-2 { line-height: 1.2 !important; }
.line-height-3 { line-height: 1.4 !important; }
.line-height-5 { line-height: 1.5 !important; }

/* ── Letter spacing ── */
.positive-ls-1 { letter-spacing: 1px !important; }
.positive-ls-2 { letter-spacing: 2px !important; }

/* ── Positioning helpers (Porto-specific) ── */
.left-50pct            { left: 50% !important; }
.right-100pct          { right: 100% !important; }
.left-100pct           { left: 100% !important; }
.top-50pct             { top: 50% !important; }
.bottom-5              { bottom: 5px !important; }
.transform3dx-n50      { transform: translateX(-50%) !important; }
.transform3dy-n50      { transform: translateY(-50%) !important; }
.z-index-1             { z-index: 1 !important; }
.z-index-2             { z-index: 2 !important; }
.z-index-3             { z-index: 3 !important; }
.w-50pct               { width: 50% !important; }

/* ── Button extras ── */
.btn-py-3  { padding-top: .75rem !important; padding-bottom: .75rem !important; }
.btn-px-5  { padding-left: 2rem !important; padding-right: 2rem !important; }

/* Porto btn-outline: transparent bg + border (different from BS5 btn-outline-*) */
.btn.btn-outline,
.btn-light.btn-outline {
    background: transparent !important;
    border-width: 2px;
}
.btn-light.btn-outline.text-color-light {
    color: #fff !important;
    border-color: rgba(255,255,255,.4);
}
.btn-light.btn-outline.text-color-light:hover {
    background: #fff !important;
    color: var(--hhr-dark) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   4. HEADER & NAVIGATION
   ══════════════════════════════════════════════════════════════════════ */
.hhr-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
}

.header-body {
    background: #fff;
}

.hhr-nav-bar {
    background: var(--hhr-nav-bg);
    border-top: 1px solid var(--hhr-nav-border);
    padding: 0;
}

.hhr-nav-bar .navbar-toggler {
    border: 1px solid #ccc;
    padding: .4rem .75rem;
    margin: .5rem 0;
    color: #555;
}

.hhr-nav-bar .navbar-nav {
    gap: 0;
}

.hhr-nav-bar .nav-item {
    border-right: 1px solid #e0e0e0;
}
.hhr-nav-bar .nav-item:last-child {
    border-right: none;
}

.hhr-nav-bar .nav-link {
    color: #444;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .85rem 1.5rem !important;
    transition: color .2s, border-color .2s;
    border-top: 3px solid transparent;
}

.hhr-nav-bar .nav-link:hover {
    color: var(--hhr-link);
}

.hhr-nav-bar .nav-link.active {
    color: var(--hhr-link);
    border-top-color: var(--hhr-link);
}

/* ══════════════════════════════════════════════════════════════════════
   5. HOME INTRO BANNER
   ══════════════════════════════════════════════════════════════════════ */
.home-intro {
    padding: 1.25rem 0;
    color: #fff;
}

.home-intro p {
    font-size: 1.125rem;
    font-weight: 400;
    margin: 0;
}

.home-intro p strong {
    font-size: 1.25rem;
}

.home-intro p span {
    display: block;
    font-size: .9rem;
    opacity: .8;
    margin-top: .25rem;
}

.home-intro-primary    { background: var(--hhr-primary); }
.home-intro-secondary  { background: var(--hhr-secondary); }
.home-intro-tertiary   { background: var(--hhr-tertiary); }
.home-intro-quaternary { background: var(--hhr-quaternary); }
.home-intro-dark       { background: var(--hhr-dark); }
.home-intro-light      { background: #fff; color: #333; }

/* ══════════════════════════════════════════════════════════════════════
   6. SECTIONS & OVERLAYS (used on home hero)
   ══════════════════════════════════════════════════════════════════════ */
.section {
    padding: 3rem 0;
    position: relative;
}

.section-height-3 { min-height: 300px; }
.section-height-5 { min-height: 600px; padding-top: 5rem; padding-bottom: 5rem; }
.section-no-border { border: none !important; }

.section-with-shape-divider {
    overflow: hidden;
}

/* Parallax — CSS-only fallback; JS enhances */
[data-plugin-parallax],
[data-image-src] {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #2e3136;
}

/* Overlay system */
.overlay {
    position: relative;
}
.overlay.overlay-show::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(33,37,41,.45);
    z-index: 1;
}
.overlay.overlay-op-8::before { background: rgba(33,37,41,.8); }
.overlay.overlay-color-primary.overlay-show::before {
    background: rgba(190,202,234,.8);
}

.overlay > .container {
    position: relative;
    z-index: 3;
}

/* ══════════════════════════════════════════════════════════════════════
   7. CUSTOM HOME PAGE ELEMENTS
   ══════════════════════════════════════════════════════════════════════ */
.custom-font-secondary {
    font-family: 'Shadows Into Light', cursive;
}

.custom-line {
    width: 50px;
    height: 2px;
    background: var(--hhr-primary);
    display: inline-block;
    vertical-align: middle;
    margin: 0 .5rem;
    opacity: 1;
}

.custom-big-font-size-5 {
    font-size: 1.75rem;
}
@media (min-width: 768px) {
    .custom-big-font-size-5 { font-size: 2.275rem; }
}

/* Icon (Simple Line Icons replacement — we use FA instead) */
.icons.icon-arrow-down::before {
    content: "\f078"; /* fa-chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* ══════════════════════════════════════════════════════════════════════
   8. SCROLL-REVEAL ANIMATIONS
   ══════════════════════════════════════════════════════════════════════ */
[data-appear-animation] {
    opacity: 0;
    transition: opacity .6s ease, transform .6s ease, filter .6s ease;
}
[data-appear-animation].appeared {
    opacity: 1 !important;
    transform: translate(0,0) scale(1) !important;
    filter: none !important;
}

/* Pre-animation transforms */
[data-appear-animation="fadeInRightShorter"]      { transform: translateX(30px); }
[data-appear-animation="fadeInRightShorterPlus"]  { transform: translateX(30px); }
[data-appear-animation="fadeInLeftShorter"]       { transform: translateX(-30px); }
[data-appear-animation="fadeInLeftShorterPlus"]   { transform: translateX(-30px); }
[data-appear-animation="fadeInUpShorter"]         { transform: translateY(30px); }
[data-appear-animation="fadeInUpShorterPlus"]     { transform: translateY(30px); }
[data-appear-animation="fadeInDownShorter"]       { transform: translateY(-30px); }
[data-appear-animation="fadeInDownShorterPlus"]   { transform: translateY(-30px); }
[data-appear-animation="expandIn"]               { transform: scale(0.85); }
[data-appear-animation="blurIn"]                 { filter: blur(8px); transform: scale(0.95); }
[data-appear-animation="maskUp"]                 { transform: translateY(100%); }

/* ══════════════════════════════════════════════════════════════════════
   9. CAROUSEL (Owl Carousel replacement)
   ══════════════════════════════════════════════════════════════════════ */
.owl-carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 1rem 0;
}
.owl-carousel::-webkit-scrollbar { display: none; }

.owl-carousel img {
    scroll-snap-align: center;
    flex-shrink: 0;
    max-height: 80px;
    width: auto;
    object-fit: contain;
    opacity: .7;
    transition: opacity .3s;
}
.owl-carousel img:hover { opacity: 1; }

/* Auto-scroll animation via JS; these classes support the JS carousel */
.owl-carousel.hhr-auto-scroll {
    animation: hhr-scroll var(--scroll-duration, 30s) linear infinite;
}

/* Hide Porto owl-carousel chrome that's in the HTML */
.owl-carousel .owl-stage-outer,
.owl-carousel .owl-stage,
.owl-carousel .owl-item,
.owl-carousel .owl-nav,
.owl-carousel .owl-dots,
.owl-carousel-light .owl-stage-outer,
.owl-carousel-light .owl-stage,
.owl-carousel-light .owl-item,
.owl-carousel-light .owl-nav,
.owl-carousel-light .owl-dots { display: none; }

/* Carousel-center-active-item: just show images in a row */
.carousel-center-active-item {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 1rem 0;
    justify-content: center;
    flex-wrap: wrap;
}
.carousel-center-active-item::-webkit-scrollbar { display: none; }
.carousel-center-active-item img {
    scroll-snap-align: center;
    flex-shrink: 0;
    max-height: 80px;
    width: auto;
    object-fit: contain;
    opacity: .7;
    transition: opacity .3s;
}
.carousel-center-active-item img:hover { opacity: 1; }

/* Home slider (owl-carousel-light) — simplified to a static hero */
.owl-carousel-light {
    position: relative;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   10. FEATURE BOX (header phone numbers)
   ══════════════════════════════════════════════════════════════════════ */
.feature-box {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.feature-box.feature-box-style-2 {
    align-items: center;
}
.feature-box-icon {
    flex-shrink: 0;
}
.feature-box-info p {
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   11. FOOTER
   ══════════════════════════════════════════════════════════════════════ */
.hhr-footer {
    background: var(--hhr-footer-bg);
    color: var(--hhr-footer-text);
}

.hhr-footer .footer-copyright {
    border-top: 1px solid rgba(255,255,255,.08);
}

.hhr-footer p {
    color: var(--hhr-footer-text);
    font-size: .85rem;
    margin: 0;
}

.hhr-footer a {
    color: var(--hhr-footer-text);
    text-decoration: none;
    opacity: .7;
    transition: opacity .2s;
}
.hhr-footer a:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════
   12. STICKY FOOTER
   ══════════════════════════════════════════════════════════════════════ */
.body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.body > .inner-wrapper {
    flex: 1 0 auto;
}
.body > footer {
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   13. MISC UTILITIES USED IN TEMPLATES
   ══════════════════════════════════════════════════════════════════════ */
.strong   { font-weight: bold; }
.center   { margin-left: auto; margin-right: auto; }
.td-center{ text-align: center; }
.italic   { font-style: italic; }

.pagination li {
    display: inline;
    padding: 0 10px;
}

label {
    font-weight: bold !important;
    font-size: larger;
}

/* Side nav (used in some QMS pages) */
.side-nav         { padding-bottom: 8px; }
.side-nav li      { list-style: none; }
.side-nav .heading{ font-weight: bold; }

/* Login page */
.login-bg {
    background: linear-gradient(135deg, #f0f3fa 0%, #e2e7f2 100%);
    min-height: 60vh;
}
.login-card {
    border: none;
    border-top: 4px solid var(--hhr-secondary);
    border-radius: 6px;
}
.login-logo { max-width: 140px; }

.btn-login-cta {
    background-color: var(--hhr-secondary);
    border-color: var(--hhr-secondary);
    color: #fff;
    font-weight: 600;
    letter-spacing: .3px;
    transition: background-color .2s, box-shadow .2s, transform .2s;
}
.btn-login-cta:hover,
.btn-login-cta:focus {
    background-color: #344651;
    border-color: #344651;
    color: #fff;
    box-shadow: 0 4px 12px rgba(65,85,99,.35);
    transform: translateY(-1px);
}
.btn-login-cta:active {
    background-color: #2b3a44;
    border-color: #2b3a44;
    color: #fff;
    transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════════
   14. DATA-HASH smooth scroll arrow
   ══════════════════════════════════════════════════════════════════════ */
[data-hash] {
    cursor: pointer;
}

/* Western font (used on home) */
.western {
    font-family: 'Playfair Display', serif;
}