/* FAQ accordion – hide collapsed panels */
.pp-faq-content[aria-hidden="true"] {
    display: none;
}

/* FAQ button – pointer cursor and hover feedback */
.pp-faq-button {
    cursor: pointer;
}

.content-font {
    font-size: 36px;
    border-radius: 14px !important;
    padding: 20px;
}


.header-font {
    font-size: 36px;
}

/* Reduce gap between banner h1 and subtitle paragraph */
#fl-main-content .fl-rich-text h1 {
    margin-bottom: 4px !important;
}

/* Reduce gap between subtitle and Contact Our Team button */
#intro .fl-rich-text p {
    margin-bottom: 6px !important;
}
.fl-node-f5rbm0j1cg27 .fl-module-content {
    margin-top: 0 !important;
}

#fl-main-content .fl-rich-text h1 + p {
    margin-top: 0 !important;
}

/* Increase body content text size */
#fl-main-content p,
#fl-main-content li,
#fl-main-content span,
#fl-main-content td,
#fl-main-content .fl-rich-text,
#fl-main-content .fl-rich-text p,
#fl-main-content .fl-rich-text li,
#fl-main-content .fl-callout-text,
#fl-main-content .fl-callout-text * {
    font-size: 20px !important;
    line-height: 1.7 !important;
}

#fl-main-content h1,
#fl-main-content .fl-heading h1 {
    font-size: 52px !important;
}

#fl-main-content h2,
#fl-main-content .fl-heading h2 {
    font-size: 42px !important;
}

/* FAQ section title – match other page section heading size and colour */
.fl-row .fl-col .fl-node-6aqotn8zsxeu h2.fl-heading,
.fl-row .fl-col .fl-node-6aqotn8zsxeu h2.fl-heading .fl-heading-text,
.fl-row .fl-col .fl-node-6aqotn8zsxeu h2.fl-heading .fl-heading-text * {
    font-size: 42px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    color: #001949 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#fl-main-content h3,
#fl-main-content .fl-heading h3 {
    font-size: 34px !important;
}

#fl-main-content h4,
#fl-main-content .fl-heading h4 {
    font-size: 28px !important;
}

/* Main navigation menu */
#menu-header-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

#menu-header-menu > li {
    position: relative;
}

#menu-header-menu > li > a {
    display: block;
    padding: 10px 18px;
    color: #333;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

#menu-header-menu > li > a:hover {
    color: #214390;
}

/* Active/current page */
#menu-header-menu > li.current-menu-item > a {
    color: #214390;
}

/* Contact Our Team button size */
#menu-header-menu > li.highlight-btn > a {
    font-size: 14px !important;
    padding: 10px 20px !important;
    line-height: 1.4 !important;
}

/* Products dropdown – remove Bootstrap caret */
#menu-header-menu .dropdown-toggle::after {
    display: none;
}

/* Products dropdown – show on hover, full positioning */
#menu-header-menu > li.dropdown > .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border: none;
    border-top: 3px solid #214390;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    padding: 4px 0;
    min-width: 220px;
    z-index: 9999;
    margin: 0;
}

#menu-header-menu > li.dropdown:hover > .dropdown-menu,
#menu-header-menu > li.dropdown > .dropdown-menu.show {
    display: block;
}

/* Dropdown items – match nav link style */
#menu-header-menu .dropdown-menu li {
    display: block;
    width: 100%;
    float: none;
}

#menu-header-menu .dropdown-menu .dropdown-item {
    display: block;
    padding: 10px 18px;
    color: #333;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    transition: color 0.2s ease;
}

#menu-header-menu .dropdown-menu .dropdown-item:hover {
    color: #214390;
    background: #f0f4ff;
}

/* Hamburger button – hidden on desktop */
.fl-menu-responsive-toggle-medium-mobile .fl-menu-mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    line-height: 1;
    color: inherit;
}

/* Hamburger SVG size */
.fl-menu-mobile-toggle .hamburger-menu {
    width: 28px;
    height: 28px;
}

/* ── Mobile layout (≤ 992px) ─────────────────────────────────────────── */
@media screen and (max-width: 992px) {

    /* Show hamburger button */
    .fl-menu-responsive-toggle-medium-mobile .fl-menu-mobile-toggle {
        display: block;
    }

    /* Header col-group: keep as flex row – logo left, nav col right */
    .fl-node-znhr8ufjsl4y {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    /* Logo column – shrink to its content */
    .fl-node-a2tlq5dfcp03 {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 160px !important;
    }

    /* Logo image */
    .fl-node-bkcsno9m0a6x .fl-photo-img {
        max-width: 150px !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Nav column – fill remaining space, stays in normal flow */
    .fl-node-jeg1qa45myfv {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        position: static !important;
        transform: none !important;
    }

    .fl-node-jeg1qa45myfv > .fl-col-content,
    .fl-node-jeg1qa45myfv .fl-module-content {
        padding: 0 !important;
    }

    /* Push hamburger button to the right */
    .fl-node-jeg1qa45myfv .fl-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    /* Hide BB's float-clear div – breaks flex layout */
    .fl-node-jeg1qa45myfv .fl-clear {
        display: none !important;
    }

    /* Menu – fixed overlay below the header, logo never moves */
    #menu-header-menu {
        position: fixed !important;
        top: var(--amc-header-bottom, 80px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 92vw !important;
        max-width: 600px !important;
        z-index: 9999 !important;
        background: #ffffff;
        border-top: 3px solid #214390;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        margin: 0 !important;
        padding: 8px 0 !important;
        flex-direction: column !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #menu-header-menu > li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    #menu-header-menu > li > a {
        display: block !important;
        padding: 14px 24px !important;
        border-bottom: 1px solid #eeeeee;
        font-size: 16px !important;
        color: #001949 !important;
        white-space: normal !important;
        text-align: center !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    #menu-header-menu > li > a:hover {
        background: #f0f4ff;
        color: #214390 !important;
    }

    #menu-header-menu > li.highlight-btn {
        margin: 8px 16px !important;
        padding: 0 !important;
        width: calc(100% - 32px) !important;
    }

    #menu-header-menu > li.highlight-btn > a {
        text-align: center !important;
        border-bottom: none !important;
        border-radius: 4px;
        color: #ffffff !important;
    }

    /* Products dropdown – inline stacked on mobile */
    #menu-header-menu > li.dropdown > .dropdown-menu {
        display: block;
        position: static;
        border: none;
        border-top: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        min-width: 0;
        width: 100% !important;
        background: #f8f9ff;
    }

    #menu-header-menu .dropdown-menu .dropdown-item {
        display: block !important;
        padding: 14px 18px !important;
        border-bottom: 1px solid #eeeeee;
        font-size: 16px !important;
        color: #001949 !important;
        white-space: normal !important;
        text-align: center !important;
        box-sizing: border-box !important;
        width: 100% !important;
        background: transparent !important;
    }

    #menu-header-menu > li.dropdown > .dropdown-menu li,
    #menu-header-menu > li.dropdown > .dropdown-menu li a.dropdown-item {
        width: 100% !important;
        text-align: center !important;
    }

    #menu-header-menu .dropdown-menu .dropdown-item:hover {
        background: #f0f4ff !important;
        color: #214390 !important;
    }
}

/* Prevent page scrollbar jump when overlay opens */
html {
    overflow-y: scroll;
}

@media screen and (max-width: 480px) {
    /* Logo column – further reduce on small phones */
    .fl-node-a2tlq5dfcp03 {
        max-width: 120px !important;
    }

    /* Logo image – further reduce on small phones */
    .fl-node-bkcsno9m0a6x .fl-photo-img {
        max-width: 110px !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* Author page – reduce text size */
.author-tanujastory22-co-uk #fl-main-content p,
.author-tanujastory22-co-uk #fl-main-content li,
.author-tanujastory22-co-uk #fl-main-content span,
.author-tanujastory22-co-uk #fl-main-content td,
.author-tanujastory22-co-uk #fl-main-content .fl-rich-text,
.author-tanujastory22-co-uk #fl-main-content .fl-rich-text p,
.author-tanujastory22-co-uk #fl-main-content .fl-rich-text li {
    font-size: 16px !important;
    line-height: 1.6 !important;
}
.author-tanujastory22-co-uk #fl-main-content h1,
.author-tanujastory22-co-uk #fl-main-content .fl-heading h1 { font-size: 36px !important; }
.author-tanujastory22-co-uk #fl-main-content h2,
.author-tanujastory22-co-uk #fl-main-content .fl-heading h2 { font-size: 28px !important; }
.author-tanujastory22-co-uk #fl-main-content h3,
.author-tanujastory22-co-uk #fl-main-content .fl-heading h3 { font-size: 22px !important; }
.author-tanujastory22-co-uk #fl-main-content h4,
.author-tanujastory22-co-uk #fl-main-content .fl-heading h4 { font-size: 18px !important; }

/* Blog post page – reduce text size */
.postid-5125 #fl-main-content p,
.postid-5125 #fl-main-content li,
.postid-5125 #fl-main-content span,
.postid-5125 #fl-main-content td,
.postid-5125 #fl-main-content .fl-rich-text,
.postid-5125 #fl-main-content .fl-rich-text p,
.postid-5125 #fl-main-content .fl-rich-text li {
    font-size: 16px !important;
    line-height: 1.6 !important;
}
.postid-5125 #fl-main-content h1,
.postid-5125 #fl-main-content .fl-heading h1 { font-size: 36px !important; }
.postid-5125 #fl-main-content h2,
.postid-5125 #fl-main-content .fl-heading h2 { font-size: 28px !important; }
.postid-5125 #fl-main-content h3,
.postid-5125 #fl-main-content .fl-heading h3 { font-size: 22px !important; }
.postid-5125 #fl-main-content h4,
.postid-5125 #fl-main-content .fl-heading h4 { font-size: 18px !important; }


/* =============================================================================
   Contact Us page – section backgrounds (alternating)
   Sequence: blue gradient → white → blue gradient → white
   ============================================================================= */

/* 1. Opening Hours – white background, matching Get in Touch layout */
.fl-node-opening-hours > .fl-row-content-wrap {
    background-image: none;
    background-color: #ffffff;
}

.fl-node-opening-hours .fl-row-content {
    max-width: 1250px;
}

/* Opening Hours – navy text on white */
.fl-node-opening-hours .fl-rich-text h2,
.fl-node-opening-hours .fl-rich-text p,
.fl-node-opening-hours .fl-rich-text strong,
.fl-node-opening-hours .fl-rich-text td {
    color: #001949;
}

/* Opening Hours – box matching Get in Touch (double border, same colour, same padding) */
.fl-node-oh-col {
    width: 100%;
}

.fl-node-oh-col > .fl-col-content {
    border-style: double;
    border-color: #7393d1;
    border-top-width: 3px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-left-width: 3px;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
}

/* 2. Find Us (map) – blue gradient */
.fl-node-dc5zlnxvotfe > .fl-row-content-wrap {
    background-color: transparent;
    background-image: linear-gradient(0deg, #001949 0%, #214390 100%);
    border-top-width: 0;
    border-bottom-width: 0;
}

/* Find Us – heading and body text white on blue background */
.fl-node-dc5zlnxvotfe .fl-rich-text h2,
.fl-node-dc5zlnxvotfe .fl-rich-text p,
.fl-node-dc5zlnxvotfe .fl-rich-text strong {
    color: #ffffff;
}

/* Find Us – remove semi-transparent white box from map column */
.fl-node-4n0fxkv69mp7 > .fl-col-content {
    background-color: transparent !important;
}

/* 3. Bottom callouts – white background */
.fl-node-dgyb1s59jxql > .fl-row-content-wrap {
    background-image: none;
    background-color: #ffffff;
}

/* Bottom callouts – navy text on white */
.fl-node-dgyb1s59jxql .fl-callout-title,
.fl-node-dgyb1s59jxql .fl-callout-title span,
.fl-node-dgyb1s59jxql .fl-callout-text,
.fl-builder-content .fl-node-dgyb1s59jxql *:not(.fl-icon):not(i) {
    color: #001949 !important;
}

/* Bottom callouts – blue icons on white */
.fl-node-dgyb1s59jxql .fl-icon i {
    color: #214390 !important;
}

/* Bottom callouts – column divider border in brand blue */
.fl-node-dgyb1s59jxql .fl-col-content {
    border-color: #214390 !important;
}

/* =============================================================================
   Footer – increased font sizes
   ============================================================================= */

/* Footer column headings (h3) */
footer .fl-heading,
footer .fl-heading span {
    font-size: 20px !important;
}

/* Footer body text, links, and icon text */
footer .fl-rich-text p,
footer .fl-rich-text a,
footer .fl-rich-text span,
footer .fl-icon-text p,
footer .fl-icon-text a {
    font-size: 16px !important;
    line-height: 1.7 !important;
}

/* Footer copyright bar */
footer .fl-row:last-child .fl-rich-text p {
    font-size: 15px !important;
}

/* Footer address – remove underline on hover */
#fl-icon-text-xgibnzeh5lq4 a {
    text-decoration: none !important;
}

/* Header – prevent shrink on scroll */
.fl-builder-content[data-type="header"] .fl-row-content-wrap,
.fl-builder-content[data-type="header"] .fl-col-content,
.fl-builder-content[data-type="header"] .fl-photo-img {
    transition: none !important;
    height: auto !important;
    max-height: none !important;
}

/* =============================================================================
   Hero / Banner background images – CSS fallback for all pages
   The Beaver Builder YUI slideshow loads images via JavaScript. On mobile the
   JS may be too slow or fail completely, leaving the banner blank. Setting the
   same image directly on .fl-row-content-wrap guarantees it always appears.
   Paths are relative to this stylesheet (root of the project).
   ============================================================================= */

/* --- Home page --- */
.page-id-4973 .fl-node-ua1dem3jwfzo > .fl-row-content-wrap {
    background-image: url('wp-content/uploads/2023/09/IMG_E44171-scaled.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- About Us --- */
.page-id-5144 .fl-node-ua1dem3jwfzo > .fl-row-content-wrap {
    background-image: url('wp-content/uploads/2023/12/Untitled-design-7.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- Contact Us --- */
.page-id-5040 .fl-node-ngmswz4va83k > .fl-row-content-wrap {
    background-image: url('wp-content/uploads/2023/09/IMG-4434-scaled.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- Cold Forged Steel Nuts --- */
.page-id-5023 .fl-node-opwi3bxa48dt > .fl-row-content-wrap {
    background-image: url('wp-content/uploads/2023/09/IMG-4434-scaled.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- Downloads --- */
.page-id-5049 .fl-node-b5shnlevczjd > .fl-row-content-wrap {
    background-image: url('wp-content/uploads/2023/08/AdobeStock_345683738-scaled.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- Latest News & Blogs --- */
.page-id-5129 .fl-node-ua1dem3jwfzo > .fl-row-content-wrap {
    background-image: url('wp-content/uploads/2023/11/Untitled-design-3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- High Quality Cold Forged Fasteners --- */
.page-id-5120 .fl-node-ua1dem3jwfzo > .fl-row-content-wrap {
    background-image: url('wp-content/uploads/2023/09/AMC.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* =============================================================================
   Mobile – fix background-attachment: fixed (broken on iOS Safari)
   Beaver Builder's fl-row-bg-fixed rows use background-attachment: fixed which
   iOS does not support, rendering photo backgrounds invisible. Override to scroll.
   ============================================================================= */
@media screen and (max-width: 992px) {
    .fl-row-bg-fixed .fl-row-content-wrap {
        background-attachment: scroll !important;
    }
}