/*
 * Theme Name:    HECA Construction & Painting
 * Theme URI:     https://www.heca.fi
 * Author:        HECA Rakennus ja Maalaus Oy
 * Description:   Professional WordPress theme for a construction and painting company
 *                in Varsinais-Suomi, Finland.
 * Version:       1.3
 * License:       GNU General Public License v2 or later
 * License URI:   http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:   heca
 */


/* ============================================================
   TABLE OF CONTENTS
   1.  Variables & Reset
   2.  Typography & Base
   3.  Loading Screen
   4.  Buttons
   5.  Breadcrumb
   6.  Header & Navigation
   7.  Mobile / Offcanvas
   8.  Footer
   9.  Pages
   10. Archive
   11. Single Post
   12. Showcase / Hero
   13. Services
   14. HECA Section & Cards
   15. Service Banner
   16. Contact
   17. Error 404
   18. Gallery
============================================================ */


/* ============================================================
   1. Variables & Reset
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --heca-yellow:       #E4C131;
    --heca-yellow-hover: rgba(228, 193, 49, 0);

    /* Re-expose the brand colour under the original name so existing
       partials/templates that reference --color-heca still work. */
    --color-heca: var(--heca-yellow);

    --heca-radius-sm: var(--bs-border-radius);
    --heca-radius-lg: var(--bs-border-radius-xl);

    --heca-section-padding: 70px 0;
    --heca-card-padding:    30px 0;

    --heca-icon-size:   3rem;
    --heca-icon-radius: 0.75rem;
}

html {
    height: 100%;
}


/* ============================================================
   2. Typography & Base
============================================================ */

body {
    font-family: "Archivo", sans-serif;
    font-size:   1rem;
    font-weight: 400;
    line-height: 1.5;
    display:        flex;
    flex-direction: column;
    min-height:     100%;
    padding-top:    4.7rem;  /* offset for fixed header */
}


/* ============================================================
   3. Loading Screen
============================================================ */

.loading-page {
    position:   fixed;
    inset:      0;
    z-index:    9999;
    display:    flex;
    align-items:     center;
    justify-content: center;
    background: #fff;
}

.loading-page img {
    width:     120px;
    height:    auto;
    animation: heca-pulse 1.5s ease-in-out infinite;
}

@keyframes heca-pulse {
    0%, 100% { transform: scale(1);   opacity: 0.8; }
    50%       { transform: scale(1.1); opacity: 1;   }
}


/* ============================================================
   4. Buttons
============================================================ */

.btn-custom {
    /* Layout */
    position:       relative;
    display:        inline-block;
    overflow:       hidden;
    padding:        0.9rem 2rem;

    /* Typography */
    font-family:    inherit;
    font-size:      0.938rem;
    font-weight:    500;
    letter-spacing: 0.05rem;
    text-decoration: none;

    /* Visuals */
    border:        1px solid var(--bs-border-color);
    border-radius: 500px;
    background:    var(--heca-yellow);
    color:         var(--bs-secondary);
    cursor:        pointer;
    transition:    all 0.3s ease-in-out;
}

/* Keeps text above the sliding pseudo-element */
.btn-custom span {
    position:   relative;
    z-index:    1;
    transition: color 0.4s;
}

.btn-custom:hover span {
    color: var(--bs-white);
}

/* Shared pseudo-element base */
.btn-custom::before,
.btn-custom::after {
    content:  "";
    position: absolute;
    inset:    0;
    z-index:  0;
}

/* Sliding wipe overlay */
.btn-custom::before {
    background: #f2f2f2;
    width:      120%;
    left:       -10%;
    transform:  skew(30deg);
    transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.btn-custom:hover::before {
    transform: translate3d(100%, 0, 0);
}


/* ============================================================
   5. Breadcrumb
============================================================ */

.breadcrumb-area {
    position:            relative;
    z-index:             1;
    background-repeat:   no-repeat;
    background-size:     cover;
    background-position: center;
    overflow:            hidden;
    min-height:          280px;
    display:             flex;
    flex-direction:      column;
}

/* Overlay i errët */
.breadcrumb-area::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0.5);
    z-index:    1;
}

.breadcrumb-area .container {
    position:        relative;
    z-index:         2;
    display:         flex;
    flex-direction:  column;
    flex:            1;
    justify-content: center;
    align-items:     center;
    padding-top:     40px;
    padding-bottom:  20px;
}

/* Breadcrumb lart majtas */
.breadcrumb-area .breadcrumb {
    position:   absolute;
    top:        70px;
    left:       15px;
    background: transparent;
    padding:    0;
    margin:     0;
    height:     auto;
    width:      auto;
}

/* Titulli qendër */
.breadcrumb-area h1 {
    color:          var(--bs-white);
    font-size:      42px;
    font-weight:    400;
    font-style:     italic;
    line-height:    1.2;
    text-transform: none;
    text-align:     center;
    margin:         0 0 12px;
    padding:        0;
}

/* Vija dekorative poshtë titullit */
.breadcrumb-area h1::after {
    content:          '';
    display:          block;
    width:            60px;
    height:           3px;
    background-color: var(--heca-yellow);
    margin:           10px auto 0;
}

.breadcrumb-area .breadcrumb a {
    color:           rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.6);
}

.breadcrumb-item.active {
    color:       var(--bs-white);
    font-weight: 600;
}


/* ============================================================
   6. Header & Navigation
============================================================ */

header {
    position:   fixed;
    top:  0;
    right: 0;
    left:  0;
    z-index:    1030;
    padding:    10px 0;
    background: var(--bs-dark);
}

header #menu-primary-menu .nav-item {
    margin-right: 1rem;
}

header #menu-primary-menu .nav-link:is(:hover, .active) {
    color: var(--heca-yellow);
}

/* Reset margin for nested dropdown items */
header #menu-primary-menu .dropdown-menu .nav-item {
    margin-right: 0;
}


/* ============================================================
   7. Mobile / Offcanvas
============================================================ */

.offcanvas-body #menu-primary-menu-1 .nav-link {
    color: var(--bs-secondary);
}

.offcanvas-body #menu-primary-menu-1 .nav-link:is(:hover, .active) {
    color: var(--heca-yellow);
}

.offcanvas-body .dropdown-menu {
    border:  0;
    padding: 0;
}

.offcanvas-body .dropdown-menu .nav-link {
    color: var(--bs-secondary);
}


/* ============================================================
   8. Footer
============================================================ */

footer {
    margin-top: auto;
}

/* ----- Top section ----- */
footer .footer-top {
    padding:          var(--heca-section-padding);
    border-top:       1px solid var(--bs-border-color);
    background-color: #f2f2f2;
}

footer .footer-top h5 {
    padding-bottom: 0.5rem;
}

footer .footer-top .nav .nav-link {
    padding-left: 0;
    color:        var(--bs-secondary);
    transition:   color 0.2s ease-in-out;
}

footer .footer-top .nav .nav-link:hover {
    color: var(--heca-yellow);
}

/* ----- Bottom bar ----- */
footer .footer-bottom {
    padding:          30px 0;
    border-top:       1px solid var(--bs-border-color);
    background-color: var(--bs-light);
}

footer .footer-bottom p {
    margin-bottom: 0;
    text-align:    center;
}

#menu-social-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin: 0;
}

#menu-social-menu .nav-item {
    padding: 0 !important;
    margin: 0;
}

#menu-social-menu .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: 1.5px solid #ccc !important;
    background: #fff !important;
    color: #666 !important;
    text-decoration: none !important;
    font-size: 18px !important;
    padding: 0 !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}

#menu-social-menu .nav-link:hover {
    background: #f5f5f5 !important;
    transform: translateY(-2px);
}

#menu-social-menu #menu-item-485 .nav-link:hover {
    color: #E1306C !important;
    border-color: #E1306C !important;
}

#menu-social-menu #menu-item-485 .nav-link:hover {
    color: #1877F2 !important;
    border-color: #1877F2 !important;
}

footer .footer-bottom {
    padding:          30px 0;
    border-top:       1px solid var(--bs-border-color);
    background-color: var(--bs-light);
}

footer .footer-bottom p {
    margin-bottom: 0;
    text-align:    center;
}


/* ============================================================
   9. Pages
============================================================ */

.pages {
    padding: var(--heca-section-padding);
}

.pages p,
.pages ul li {
    color:       var(--bs-secondary);
    line-height: 1.5;
}


/* ============================================================
   10. Archive
============================================================ */

.archive {
    padding: var(--heca-section-padding);
}

.archive-item {
    box-shadow: 0 0 20px rgba(136, 159, 229, 0.25);
}

.archive-image {
    position: relative;
    overflow: hidden;
}

.archive-image img {
    width:  100%;
    height: 100%;
}

/* Date badge */
.archive .archive-date {
    position:   absolute;
    top:  0;
    left: 0;
    padding:    12px 17px;
    background: var(--heca-yellow);
    color:      var(--bs-white);
    text-align: center;
}

.archive .archive-date h6 {
    font-size:      14px;
    font-weight:    700;
    padding-bottom: 3px;
    text-transform: uppercase;
}

.archive .archive-date h5 {
    font-size:   27px;
    font-weight: 700;
}

/* Content area */
.archive-content {
    padding: 30px 25px 25px;
}

.archive-content .archive-title {
    display:         block;
    margin-bottom:   1rem;
    color:           var(--bs-black);
    font-size:       1rem;
    font-weight:     600;
    line-height:     1.6;
    text-decoration: none;
    text-transform:  uppercase;
    transition:      color 0.2s ease-in-out;
}

.archive-content .archive-title:hover {
    color: var(--heca-yellow);
}

.archive-content .archive-category {
    display:         block;
    color:           var(--bs-secondary);
    font-size:       0.875rem;
    font-weight:     400;
    text-decoration: none;
    text-transform:  capitalize;
}


/* ============================================================
   11. Single Post
============================================================ */

.single {
    margin-top: 100px;
    padding:    30px 0;
}

.single .single-post-title {
    color:       var(--bs-dark);
    line-height: 1.6;
    text-align:  center;
}

.single .single-post-date {
    color:      var(--bs-secondary);
    text-align: center;
}

.single .single-thumb img {
    width:         100%;
    height:        100%;
    border-radius: var(--heca-radius-sm);
}

.single .single-post-content {
    padding:     40px 0;
    line-height: 1.6;
}


/* ============================================================
   12. Showcase / Hero
============================================================ */


.showcase {
    position:            relative;
    display:             flex;
    align-items:         center;
    min-height:          600px;
    padding:             100px 20px;
    margin-bottom:       30px;
    border-bottom:       1px solid #ccc;
    color:               #fff;
    text-align:          left;
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
}

.showcase .overlay {
    position:   absolute;
    inset:      0;
    z-index:    1;
    background: var(--heca-yellow-hover);
}

.showcase .content {
    position: relative;
    z-index:  2;
    width:    100%;
}

.showcase h1 {
    margin-bottom: 20px;
    color:         #fff;
    font-size:     clamp(2rem, 5vw, 3.5rem);
    font-weight:   700;
    line-height:   1.2;
    word-break:    break-word;
    overflow-wrap: break-word;
}

.showcase p {
    max-width:     700px;
    margin-bottom: 40px;
    color:         #f1f1f1;
    font-size:     clamp(1rem, 2.5vw, 1.25rem);
    line-height:   1.6;
}

/* --- Mobile: ≤ 576px --- */
@media (max-width: 576px) {
    .showcase {
        min-height: 420px;
        padding:    60px 16px;
        text-align: left;
    }

    .showcase h1 {
        font-size:     1.75rem;
        margin-bottom: 12px;
    }

    .showcase p {
        font-size:     0.95rem;
        margin-bottom: 24px;
    }
}

/* --- Tablet: 577px – 768px --- */
@media (min-width: 577px) and (max-width: 768px) {
    .showcase {
        min-height: 500px;
        padding:    80px 24px;
    }

    .showcase h1 {
        font-size: 2.25rem;
    }
}




/* ============================================================
   13. Services
============================================================ */

.services .service-item {
    padding: var(--heca-card-padding);
}

/* ----- Shared icon style (used by services & contact) ----- */
.services .service-icon,
.contact-information .contact-icon,
.heca-card-icon {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           var(--heca-icon-size);
    height:          var(--heca-icon-size);
    margin-bottom:   1rem;
    border:          1px solid var(--bs-border-color);
    border-radius:   var(--heca-icon-radius);
    background:      var(--bs-tertiary-bg);
    color:           var(--heca-yellow);
}

.services .service-image {
    width:         100%;
    height:        200px;
    margin-bottom: 1rem;
    object-fit:    cover;
}

.services .service-image img {
    width:         100%;
    height:        100%;
    object-fit:    cover;
    border:        1px solid var(--bs-border-color);
    border-radius: var(--heca-radius-lg);
}

.services .service-title {
    margin-bottom: 0.5rem;
    font-weight:   500;
    line-height:   1.2;
}

.services .service-description {
    margin-top:  0.5rem;
    color:       var(--bs-secondary);
    line-height: 1.5;
}


/* ============================================================
   14. HECA Section & Cards
============================================================ */

.heca-section {
    padding: var(--heca-section-padding);
}

.heca-section-header .heca-section-title {
    color:      var(--heca-yellow);
    text-align: center;
}

.heca-section-header .heca-section-description {
    text-align: center;
}

.heca-card {
    padding: var(--heca-card-padding);
}

/* .heca-card-icon is consolidated into the shared icon rule above (§13) */

.heca-card-title {
    margin-bottom: 0.5rem;
    font-weight:   500;
    line-height:   1.2;
}

.heca-card-description {
    margin-top:  0.5rem;
    color:       var(--bs-secondary);
    line-height: 1.5;
}


/* ============================================================
   15. Service Banner
============================================================ */

.service-banner {
    position:      relative;
    overflow:      hidden;
    height:        100%;
    padding:       2rem;
    border:        1px solid var(--bs-border-color);
    border-radius: var(--heca-radius-lg);
    background:    #fff;
    transition:    all 0.4s ease-in-out;
}

/* Hover overlay */
.service-banner::before {
    content:    "";
    position:   absolute;
    inset:      0;
    z-index:    0;
    background: transparent;
    transition: background-color 0.4s ease-in-out;
}

.service-banner:hover {
    background: url("https://demo.bravisthemes.com/bizznep/wp-content/themes/bizznep/assets/img/h5-service-bg.png")
    no-repeat center center / cover;
    color: #fff;
}

.service-banner:hover::before {
    background-color: var(--heca-yellow);
    opacity: 0.7;
}

/* Keep all children above the overlay */
.service-banner .service-title,
.service-banner .service-description,
.service-banner a,
.service-banner i {
    position:   relative;
    z-index:    1;
    transition: color 0.3s ease;
}

.service-banner:hover :is(.service-title, .service-description, a, i) {
    color: #fff;
}

.service-banner a {
    color:           var(--bs-dark);
    text-decoration: none;
}


/* ============================================================
   16. Contact
============================================================ */

.contact-information {
    padding: var(--heca-section-padding);
}

.contact-information .contact-item {
    padding: var(--heca-card-padding);
}

/* .contact-icon is consolidated into the shared icon rule above (§13) */

.contact-information .contact-title {
    margin-bottom: 0.5rem;
    font-weight:   500;
    line-height:   1.2;
}

.contact-information .contact-link {
    margin-bottom:   0.5rem;
    color:           var(--heca-yellow);
    text-decoration: none;
    transition:      border-bottom 0.2s ease-in-out;
}

.contact-information .contact-link:is(:hover, :active) {
    border-bottom: 1px solid var(--heca-yellow);
}

.contact-information .contact-link i {
    margin-left: 0.5rem;
}

.contact-information .contact-description {
    margin-top:  0.5rem;
    color:       var(--bs-secondary);
    line-height: 1.5;
}

.contact-form {
    padding: var(--heca-section-padding);
}


/* ============================================================
   17. Error 404
============================================================ */

.error-404 {
    padding:    var(--heca-section-padding);
    text-align: center;
}

.error-code {
    margin-bottom: 1.5rem;
    color:         var(--heca-yellow);
}

.error-title {
    margin-bottom: 1.5rem;
    color:         var(--bs-dark);
}

.error-message {
    margin-bottom: 1.5rem;
    color:         var(--bs-secondary);
}


/* ============================================================
   18. Gallery
============================================================ */

.gallery {
    display:   flex;
    flex-wrap: wrap;
    gap:       1rem;
}

.gallery-item {
    flex:      0 0 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
}

@media (max-width: 768px) {
    .gallery-item {
        flex:      0 0 calc(50% - 1rem);
        max-width: calc(50% - 1rem);
    }
}

@media (max-width: 576px) {
    .gallery-item {
        flex:      0 0 100%;
        max-width: 100%;
    }
}

.gallery-item img {
    width:         100%;
    border-radius: 8px;
    box-shadow:    0 4px 10px rgba(0, 0, 0, 0.1);
    transition:    transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}