/* ===================================================
   HARDTEC WordPress Theme - Additional Styles
   Styles for WordPress templates (blog, single, archive, 404)
   =================================================== */

/* Page Content Wrapper */
.page-content {
    padding-top: calc(var(--header-h) + 40px);
    padding-bottom: 80px;
    min-height: 60vh;
}

.page-content__inner {
    width: var(--width);
    max-width: var(--container);
    margin: 0 auto;
}

/* Elementor Full Width - no padding constraints */
.elementor-full-width {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Elementor Canvas - body override */
body.elementor-canvas {
    margin: 0;
    padding: 0;
}

body.elementor-canvas .header,
body.elementor-canvas .footer,
body.elementor-canvas .float-service {
    display: none;
}

/* Ensure Elementor sections display correctly within theme */
.elementor-section {
    position: relative;
}

.elementor-widget-hardtec-banner .banner,
.elementor-widget-hardtec-products .products,
.elementor-widget-hardtec-stats .stats,
.elementor-widget-hardtec-about .about,
.elementor-widget-hardtec-industry .industry,
.elementor-widget-hardtec-advantages .advantages,
.elementor-widget-hardtec-news .news,
.elementor-widget-hardtec-inquiry .inquiry {
    width: 100%;
}

/* Blog Grid (index, archive, search) */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.blog-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.blog-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    transform: translateY(-4px);
}

.blog-card__img {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.blog-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.blog-card:hover .blog-card__img img {
    transform: scale(1.05);
}

.blog-card__body {
    padding: 20px;
}

.blog-card__date {
    font-size: 13px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 8px;
}

.blog-card__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 10px;
}

.blog-card__title a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s;
}

.blog-card__title a:hover {
    color: var(--blue-primary);
}

.blog-card__excerpt {
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.6;
    margin-bottom: 12px;
}

.blog-card__link {
    font-size: 14px;
    color: var(--blue-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.blog-card__link:hover {
    color: var(--blue-hover);
}

/* Single Post */
.single-post__article {
    max-width: 900px;
    margin: 0 auto;
}

.single-post__header {
    margin-bottom: 30px;
}

.single-post__title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
    margin-bottom: 16px;
}

.single-post__meta {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.single-post__meta a {
    color: var(--blue-primary);
    text-decoration: none;
}

.single-post__thumbnail {
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
}

.single-post__thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.single-post__content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-body);
}

.single-post__content h2,
.single-post__content h3,
.single-post__content h4 {
    color: var(--text-dark);
    margin: 30px 0 15px;
    font-weight: 600;
}

.single-post__content h2 { font-size: 28px; }
.single-post__content h3 { font-size: 22px; }

.single-post__content p {
    margin-bottom: 18px;
}

.single-post__content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.single-post__content ul,
.single-post__content ol {
    margin: 0 0 18px 24px;
}

.single-post__content li {
    margin-bottom: 8px;
}

.single-post__content blockquote {
    border-left: 4px solid var(--blue-primary);
    padding: 15px 20px;
    margin: 20px 0;
    background: #f8f9fa;
    border-radius: 0 6px 6px 0;
    font-style: italic;
}

.single-post__footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.single-post__tags a {
    display: inline-block;
    padding: 4px 12px;
    background: #f5f5f5;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-body);
    text-decoration: none;
    margin: 4px;
    transition: all 0.3s;
}

.single-post__tags a:hover {
    background: var(--blue-primary);
    color: #fff;
}

/* Post Navigation */
.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.post-navigation a {
    color: var(--blue-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.post-navigation a:hover {
    color: var(--blue-hover);
}

.post-navigation__next {
    text-align: right;
    margin-left: auto;
}

/* Pagination */
.pagination {
    margin-top: 50px;
    text-align: center;
}

.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-body);
    text-decoration: none;
    background: #f5f5f5;
    transition: all 0.3s;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background: var(--blue-primary);
    color: #fff;
}

/* Comments */
.comments-area {
    max-width: 900px;
    margin: 40px auto 0;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.comment-list {
    list-style: none;
    padding: 0;
}

.comment-list .comment {
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
}

.comment-author {
    font-weight: 600;
    color: var(--text-dark);
}

.comment-metadata {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.comment-metadata a {
    color: var(--text-muted);
    text-decoration: none;
}

.comment-content p {
    font-size: 15px;
    line-height: 1.6;
}

.comment-reply-link {
    font-size: 13px;
    color: var(--blue-primary);
    text-decoration: none;
    font-weight: 500;
}

/* No Results */
.no-results {
    text-align: center;
    padding: 80px 20px;
}

.no-results h2 {
    font-size: 28px;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.no-results p {
    color: var(--text-body);
    margin-bottom: 24px;
}

/* Search Form */
.search-form {
    display: flex;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
}

.search-form .search-field {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.3s;
}

.search-form .search-field:focus {
    border-color: var(--blue-primary);
}

.search-form .search-submit {
    padding: 12px 24px;
    background: var(--blue-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s;
}

.search-form .search-submit:hover {
    background: var(--blue-hover);
}

/* News section - "View All" button */
.news__more {
    text-align: center;
    margin-top: 40px;
}

.news__more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    background: var(--blue-primary);
    color: #fff;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
}

.news__more-btn:hover {
    background: var(--blue-hover);
    transform: translateY(-2px);
}

/* Skip Link (Accessibility) */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--blue-primary);
    color: #fff;
    padding: 10px 20px;
    z-index: 99999;
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .single-post__title {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .single-post__title {
        font-size: 24px;
    }
    .page-content {
        padding-top: calc(var(--header-h) + 20px);
        padding-bottom: 50px;
    }
    .post-navigation {
        flex-direction: column;
    }
    .post-navigation__next {
        text-align: left;
    }
}

/* ===================================================
   WordPress menu structure fixes
   ---------------------------------------------------
   wp_nav_menu() and the theme fallback callbacks insert a wrapper that the
   static index.html (which main.css is authored against) does not have:
     - header links are wrapped in <ul class="header__nav-list">, but main.css
       makes .header__nav a flex row expecting the <a> as its direct children;
     - footer columns are wrapped in <div class="footer__nav-list">, but main.css
       makes .footer__nav a flex row expecting .footer__nav-col as direct children.
   The wrapper becomes the only flex child, so the real items stack vertically
   inside it. These rules flatten the wrappers back into horizontal rows.
   =================================================== */

/* Desktop primary nav -> horizontal row. Scoped to .header__nav so the identical
   class the fallback emits inside .mobile-nav stays a vertical slide-out list. */
.header__nav .header__nav-list {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header__nav .header__nav-list li {
    margin: 0;
    list-style: none;
}

/* header.php requests depth 2, so a nested <ul class="sub-menu"> must become a
   hover dropdown instead of pushing the top-level row out of shape. Inert while
   the fallback menu is flat (no .sub-menu is rendered). */
.header__nav .menu-item-has-children {
    position: relative;
}

.header__nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 210px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: var(--blue-header);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.header__nav .menu-item-has-children:hover > .sub-menu,
.header__nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header__nav .sub-menu a {
    display: block;
    padding: 9px 20px;
    font-size: 15px;
    line-height: 1.5;
    white-space: nowrap;
}

.header__nav .sub-menu a::after {
    display: none;
}

/* Mobile slide-out nav: the fallback emits .header__nav-list here too, but
   index.html styles this panel through .mobile-nav__links. Mirror it so links
   are centred and spaced instead of collapsing to a bare browser-default list. */
.mobile-nav .header__nav-list,
.mobile-nav .mobile-nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-nav .header__nav-list li,
.mobile-nav .mobile-nav__list li {
    margin: 0;
    list-style: none;
}

.mobile-nav .header__nav-list a,
.mobile-nav .mobile-nav__list a {
    padding: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

/* Footer nav -> horizontal columns (mirrors .footer__nav: flex / gap 60 / flex 1).
   Also covers an assigned menu, where .footer__nav-list is a <ul>. */
.footer__nav-list {
    display: flex;
    flex: 1;
    gap: 60px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 1024px) {
    .footer__nav-list {
        flex-wrap: wrap;
        gap: 30px;
    }
}

/* ===================================================
   Elementor layout fixes for HARDTEC full-width section widgets
   ---------------------------------------------------
   Two problems appear when the 8 HARDTEC widgets are dropped into Elementor:

   1) A big white gap above the banner. page.php wraps Elementor output in
      .page-content (padding-top: header-h + 40px) while .banner already carries
      margin-top: var(--header-h) to clear the fixed header, so the offset is
      applied twice (~240px). Drop .page-content padding when it holds Elementor
      content - the sections own their spacing.

   2) Sections render narrow ("not 100%", smaller than the homepage). Elementor
      puts every widget in a Boxed section/container (max-width ~1140px) with
      padding, but each HARDTEC widget renders a full-bleed <section> that owns
      its own .xxx__inner (max-width: var(--container); margin auto). Force any
      section/container holding a HARDTEC widget to true full width with no
      padding so it lays out exactly like the static homepage.
   =================================================== */

/* 1) No double header offset around Elementor content */
.page-content:has(.elementor) {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
}

/* 2a) Legacy sections */
.elementor-section:has([class*="elementor-widget-hardtec-"]) {
    width: 100%;
    max-width: 100%;
}

.elementor-section:has([class*="elementor-widget-hardtec-"]) > .elementor-container {
    width: 100%;
    max-width: 100% !important;
    padding: 0 !important;
}

.elementor-section:has([class*="elementor-widget-hardtec-"]) .elementor-column,
.elementor-section:has([class*="elementor-widget-hardtec-"]) .elementor-widget-wrap {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* 2b) Flexbox containers */
.e-con:has([class*="elementor-widget-hardtec-"]) {
    width: 100%;
    max-width: 100% !important;
    --content-width: 100% !important;
    --padding-block-start: 0px !important;
    --padding-block-end: 0px !important;
    --padding-inline-start: 0px !important;
    --padding-inline-end: 0px !important;
    padding: 0 !important;
}

.e-con:has([class*="elementor-widget-hardtec-"]) > .e-con-inner {
    width: 100%;
    max-width: 100% !important;
    padding: 0 !important;
}

/* 2c) The widget and its Elementor wrapper always span full width, no padding */
[class*="elementor-widget-hardtec-"] {
    width: 100% !important;
    max-width: 100% !important;
}

[class*="elementor-widget-hardtec-"] > .elementor-widget-container {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

/* ===================================================
   Elementor editor: .reveal scroll animations never fire
   ---------------------------------------------------
   main.css hides every .reveal (opacity:0; translateY(24px)) until main.js
   initReveal() adds .reveal--visible through an IntersectionObserver. That
   runs ONCE on load and only observes the .reveal nodes present at that time
   (its 4s safety timeout closes over that same list). Widgets dragged into the
   Elementor canvas afterwards inject fresh .reveal nodes that are never
   observed, so 7 of 8 HARDTEC widgets (all but banner) show their section
   shell while text/media stay at opacity:0 -> "content does not display".
   Frontend is unaffected: sections are server-rendered before initReveal().

   Fix: force .reveal visible whenever the Elementor editor is open. Pure CSS,
   no timing dependency, scoped to editor body classes so the live site keeps
   its scroll-reveal animation.
   =================================================== */
.elementor-editor-active .reveal,
.elementor-editor-preview .reveal {
    opacity: 1 !important;
    transform: none !important;
}
/* ===================================================
   Header vertical centering (safe for the WP ul>li nav)
   ---------------------------------------------------
   The static index.html centers the header row two fragile ways: .header__inner
   relies on align-items:center, and each .header__nav <a> relies on a giant
   line-height (~header height) to sit mid-bar. WordPress wraps the links in
   <ul class="header__nav-list"><li>, so if either assumption slips (older CSS on
   the server, or the wrapper changing the height chain) the whole row collapses
   to the top of the fixed-height bar, leaving empty blue below.

   Re-center explicitly with flex at every level instead of the line-height
   trick. height:100% + align-items/align-self center is structural, so it holds
   for both the flat index.html nav and the WP ul>li nav. min-height uses
   --header-h with a 100px fallback so it works even if the variable is missing.
   No display is set on .header__nav here, so the <=1024px display:none (mobile)
   still wins. .sub-menu is position:absolute, so making <li> a flex row does
   not pull the dropdown into the top-level row.
   =================================================== */
.header__inner {
    align-items: center;
    height: 100%;
    min-height: var(--header-h, 100px);
}

.header__logo,
.header__nav,
.header__right {
    align-self: center;
}

.header__nav {
    height: 100%;
}

.header__nav .header__nav-list {
    height: 100%;
}

.header__nav .header__nav-list > li {
    height: 100%;
    display: flex;
    align-items: center;
}

/* ===================================================
   ELEMENTOR IMG RESET COUNTERMEASURE
   Elementor frontend.css ships `.elementor img { height:auto; max-width:100% }`
   which outranks single-class rules and collapses every cover-fit image layer
   (banner slides, hero backgrounds, card media) to its natural ratio inside
   Elementor pages/editor - on narrow viewports the banner shows a big navy
   gap because the slide image no longer fills the 88vh box. Re-assert the
   main.css geometry with !important; breakpoint values mirror main.css.
   =================================================== */
.banner__slide-bg,
.product-tile__img,
.about__image img,
.industry-case__img img,
.news-card__img img,
.page-hero__bg,
.contact-card__media img,
.blog-widget__post-img img,
.blog-item__media img,
.blog-author__avatar img {
  height: 100% !important;
  object-fit: cover !important;
}

.cert-card img { height: 460px !important; object-fit: cover !important; }
.intro__media img { height: 460px !important; object-fit: cover !important; }
.quote-modal__right img { height: 300px !important; object-fit: cover !important; }

@media (max-width: 1024px) {
  .cert-card img { height: 380px !important; }
}

@media (max-width: 900px) {
  .quote-modal__right img { height: 220px !important; }
}

@media (max-width: 768px) {
  .intro__media img { height: 320px !important; }
}

@media (max-width: 640px) {
  .cert-card img { height: 340px !important; }
}