/* ==========================================================================
   Roustabouts RV Club - Custom CSS Overrides
   Applied fixes: logo scaling, paragraph sizes, CCQ banner, social icons
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LOGO - Cap max height across all breakpoints
   The logo image is 523x477px (tall). Without constraints it overflows
   the navbar on tablets and phones.
   -------------------------------------------------------------------------- */
.logo img {
    /* WI49 Update #7 (11 Apr 2026) - Brian asked for the oval logo to be
       roughly double its previous size. Was 80/60/50/40, now 160/120/90/70. */
    max-height: 160px;
    width: auto;
}

@media only screen and (max-width: 1024px) {
    .logo img {
        max-height: 120px;
    }
}

@media only screen and (max-width: 768px) {
    .logo img {
        max-height: 90px;
    }
}

@media only screen and (max-width: 480px) {
    .logo img {
        max-height: 70px;
    }
}

/* --------------------------------------------------------------------------
   2. RESPONSIVE IMAGES - Stop banners and CCQ logo from overflowing
   -------------------------------------------------------------------------- */
.offer-request img,
.hakkimizda-bolumu-anasayfa img,
.sectionbars4 img {
    max-width: 100%;
    height: auto;
}

.offer-request .alignleft {
    max-width: 180px !important;
    height: auto !important;
    width: auto !important;
}

/* --------------------------------------------------------------------------
   3. PARAGRAPH FONT SIZE - The theme sets 3.4rem on mobile which is huge
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 56.25em) {
    .paragraf {
        font-size: 1.5rem !important;
    }
    .paragraf-info {
        font-size: 1.5rem !important;
    }
}

/* --------------------------------------------------------------------------
   4. FOOTER SOCIAL ICONS - Ensure they display on all screen sizes
   -------------------------------------------------------------------------- */
.footer .footer-social {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
}

.footer .footer-social li {
    display: inline-block !important;
}

/* --------------------------------------------------------------------------
   5. FOOTER - General mobile fixes
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
    .footer .cce,
    .footer .cce1 {
        text-align: center;
    }
    .footer .footer-social {
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   6. ABOUT US - Improve text readability
   -------------------------------------------------------------------------- */
.template-about-content p,
.about-content p,
.hakkimizda-bolumu-anasayfa .paragraf {
    font-size: 1.5rem;
    line-height: 1.8;
}

/* --------------------------------------------------------------------------
   7. NAVBAR MENU - Mobile & dropdown fixes (WI49 Review #6)
   Bootstrap 4.5 navbar with nested dropdowns. Issues reported by Neil/Mike:
   - Dropdowns overwrite menu below on mobile instead of stacking
   - Nested submenus cut off (only first 3 items visible)
   - Dropdowns clipped off right edge on smaller PC screens
   - No way to collapse an expanded dropdown on mobile
   -------------------------------------------------------------------------- */

/* Ensure dropdown-menu can grow full width on mobile */
@media (max-width: 991.98px) {
    .navbar-nav .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        border: none;
        box-shadow: none;
        padding-left: 1rem;
        background-color: #f8f9fa;
        max-height: none !important;
        overflow: visible !important;
    }
    .navbar-nav .dropdown-menu .dropdown-menu {
        padding-left: 2rem;
        background-color: #eef0f2;
    }
    .navbar-nav .dropdown-menu .dropdown-item {
        white-space: normal;
        word-wrap: break-word;
    }
    /* Nested dropdowns on mobile - stack in place, don't position absolute */
    .navbar-nav ul.dropdown-menu li > ul.dropdown-menu {
        position: static !important;
        left: 0 !important;
        top: 0 !important;
        display: none;
    }
    .navbar-nav ul.dropdown-menu li.show > ul.dropdown-menu,
    .navbar-nav ul.dropdown-menu li:hover > ul.dropdown-menu,
    .navbar-nav ul.dropdown-menu li:focus-within > ul.dropdown-menu {
        display: block;
    }
}

/* Desktop: prevent dropdowns from clipping off the right edge of the screen */
@media (min-width: 992px) {
    .navbar-nav .dropdown-menu {
        max-width: 90vw;
    }
    /* Flip nested dropdowns to the left if they'd go off-screen */
    .navbar-nav .nav-item.dropdown:nth-last-child(-n+4) .dropdown-menu .dropdown-menu {
        left: auto !important;
        right: 100% !important;
    }
    /* Allow the second-level submenu to be shown on click (mobile pattern) as well as hover */
    .navbar-nav .dropdown-menu li.show > .dropdown-menu {
        display: block;
    }
}

/* Long menu item text: wrap instead of truncate */
.navbar-nav .dropdown-item {
    white-space: normal;
}

/* --------------------------------------------------------------------------
   8. WI49 Review #6 - Layout fixes
   -------------------------------------------------------------------------- */

/* Left-align the main nav tabs (was right-aligned per theme default) */
.navbar-nav {
    justify-content: flex-start !important;
    margin-right: auto !important;
}

/* Home page - left-align "Click to Login" and "Membership" headings
   over their buttons (they currently sit center/right) */
.template-home-content .cente,
.front-page h3.cente,
.countdown-item h3.cente,
h3.cente {
    text-align: left !important;
}

/* Member Login page - centre the login form on the page */
.login-form-wrap,
#loginform,
.rcp_form,
form[name="loginform"] {
    max-width: 420px;
    margin: 2rem auto !important;
    float: none !important;
}
form[name="loginform"] p {
    text-align: left;
}

/* Charity page - centre the YouTube video and RFDS Live Flight Map */
.charity-video,
.charity-content iframe,
body.page-id-12535 iframe,
body.page-id-12535 .wp-block-embed__wrapper {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100%;
}
body.page-id-12535 iframe[src*="youtube"],
body.page-id-12535 iframe[src*="rfds"],
body.page-id-12535 iframe[src*="cdn.livemap"] {
    display: block;
    margin: 1rem auto !important;
}

/* Caboolture block on Coffee Mornings - force body text below the photo
   (currently misaligned per Brian's Review #6) */
body.page-id-12543 .wp-block-image.alignleft + p,
body.page-id-12543 figure.alignleft + p {
    clear: left;
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   9. WI49 Update #7 (13 Apr 2026) - Fix mobile drawer whitespace
   Theme forces display:block on sidebar submenus with visibility:hidden,
   causing invisible children to reserve space (428px gaps between items).
   Override: hide with display:none, show only when .show is toggled.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .side-widget .site-menu ul li ul.dropdown-menu {
        display: none !important;
    }
    .side-widget .site-menu ul li ul.dropdown-menu.show,
    .side-widget .site-menu ul li.show > ul.dropdown-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* --------------------------------------------------------------------------
   10. WI49 Update #7 (14 Apr 2026) - Partner logos: full colour by default,
   grey on hover (reversed from theme default which greys them out)
   -------------------------------------------------------------------------- */
.sectionbars4 .marka {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
}
.sectionbars4 .marka:hover {
    opacity: 0.6 !important;
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
}

/* --------------------------------------------------------------------------
   11. WI49 Update #7 (14 Apr 2026) - Homepage layout fixes per Rick screenshot
   -------------------------------------------------------------------------- */

/* RED: Hide blank space - empty Projects Section (2nd serviceb-alani) + All Services buttons */
section.serviceb-alani + section.serviceb-alani {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}
a.custom-button[href="#"] {
    display: none !important;
}

/* GREEN: Centre the CCQ / offer-request section content */
section.offer-request .col-lg-12 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* CYAN: Move Facebook to far right in footer */
footer .footer-social.cce {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

/* PURPLE: Double the kangaroo in footer */
footer .logo img,
footer.footer .col-xl-6 .logo img {
    max-height: 160px !important;
    width: auto !important;
}



/* --------------------------------------------------------------------------
   12. WI49 Update #8 (16 Apr 2026) - Partner logos enlarge by 100%
   Brian asked for Camps, Freom, RFDS to be roughly double size.
   Theme uses col-lg-2 (max ~209px) which caps the images. Override the
   column width to col-lg-4 equivalent and enlarge the images.
   -------------------------------------------------------------------------- */
.sectionbars4 .col-lg-2 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
}
.sectionbars4 img.marka {
    max-width: 320px !important;
    width: 320px !important;
    height: auto !important;
}


/* --------------------------------------------------------------------------
   13. WI49 Update #8 (16 Apr 2026) - CCQ section centre across page
   -------------------------------------------------------------------------- */
section.offer-request .col-lg-12 {
    text-align: center !important;
}
section.offer-request .col-lg-12 img {
    display: inline-block !important;
    float: none !important;
}
section.offer-request .col-lg-12 p,
section.offer-request .col-lg-12 .paragraf {
    text-align: center !important;
}

/* --------------------------------------------------------------------------
   14. WI49 Update #8 (16 Apr 2026) - Footer: kangaroo centred above Facebook
   Replaces the far-right Facebook push from Update #7. Both now centred
   in the middle column, stacked vertically.
   -------------------------------------------------------------------------- */
footer .col-xl-6.cce1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
footer .footer-social.cce {
    justify-content: center !important;
}
footer .logo {
    text-align: center !important;
    width: 100% !important;
}
footer .logo img,
footer.footer .col-xl-6 .logo img {
    max-height: 120px !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* --------------------------------------------------------------------------
   15. WI49 Update #8/9/10 (21 Apr 2026) - WP admin bar: prevent covering
   site navbar, hamburger menu and side drawer for logged-in users on all
   viewports. Theme's .navbar is position: fixed with top: -20px, so the
   WP admin bar overlaps the top of the oval logo without an offset.
   WP admin bar: 32px on screens > 782px, 46px on <= 782px.
   Target #wpadminbar presence via :has() since the theme does not add
   body.admin-bar class.
   -------------------------------------------------------------------------- */
/* Desktop and tablet landscape (> 782px) - WP admin bar is 32px */
body:has(#wpadminbar) .navbar {
    margin-top: 32px;
}
@media (max-width: 991.98px) {
    body:has(#wpadminbar) .side-widget {
        top: 32px !important;
        height: calc(100vh - 32px) !important;
        height: calc(100dvh - 32px) !important;
    }
    .side-widget {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    body:has(#wpadminbar) .hamburger-menu {
        margin-top: 0px !important;
    }
}
/* Phone portrait (<= 782px) - WP admin bar jumps to 46px */
@media (max-width: 782px) {
    body:has(#wpadminbar) .navbar {
        margin-top: 46px;
    }
    body:has(#wpadminbar) .side-widget {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
        height: calc(100dvh - 46px) !important;
    }
}

/* --------------------------------------------------------------------------
   16. WI49 Update #8 (16 Apr 2026) - Caboolture: force text below image
   Previous rule targeted alignleft + p which depends on Gutenberg classes.
   This broader rule clears all floated images in the coffee mornings page.
   -------------------------------------------------------------------------- */
body.page-id-12543 .alignleft,
body.page-id-12543 img.alignleft {
    float: none !important;
    display: block !important;
    margin: 0 auto 1rem auto !important;
}

/* --------------------------------------------------------------------------
   17. WI49 Update #8 (16 Apr 2026) - Side drawer menu: tighten sub-menu
   font sizes and spacing. Theme default makes level 2/3 larger (18px) than
   level 1 (15px) which looks wrong and causes overlap.
   -------------------------------------------------------------------------- */
.side-widget .site-menu ul li ul.dropdown-menu a {
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 6px 12px 6px 20px !important;
}
.side-widget .site-menu ul li ul.dropdown-menu ul.dropdown-menu a {
    font-size: 13px !important;
    padding-left: 32px !important;
}

/* --------------------------------------------------------------------------
   18. WI49 Update #8 (16 Apr 2026) - Side drawer: fix level 3 overlap
   and add dropdown arrow hint on level 2 items that have children.
   -------------------------------------------------------------------------- */

/* More top padding on level 3 items to prevent overlap with level 2 parent */
.side-widget .site-menu ul li ul.dropdown-menu {
    padding-top: 4px !important;
    margin-top: 2px !important;
    border-top: 1px solid #eee !important;
}

/* WI49 Update #9 (20 Apr 2026) - Unfloat menu items in side drawer.
   Theme floats li items left which collapses the dropdown UL height to 0,
   making submenus invisible (especially in landscape). Clear floats so the
   dropdown UL expands to contain its children and the drawer can scroll. */
.side-widget .site-menu ul li {
    float: none !important;
    width: 100% !important;
}

/* Add dropdown arrow on level 2 items that have sub-menus (matching level 1 style) */
.side-widget .site-menu li.menu-item-has-children > ul > li.menu-item-has-children > a::after {
    content: " \25BE";
    font-size: 10px;
    opacity: 0.5;
}

/* --------------------------------------------------------------------------
   19. WI49 Update #9 (20 Apr 2026) - Page content headings: bold bright blue
   Brian's Review #5 typography spec: h2=30px, h3=24px, h4=20px, bold, blue.
   Theme default renders them dark/small. Override for page content area.
   -------------------------------------------------------------------------- */
.hakkimizda-bolumu-anasayfa h2,
.hakkimizda-bolumu-anasayfa h3,
.hakkimizda-bolumu-anasayfa h4,
.template-about-content h2,
.template-about-content h3,
.template-about-content h4,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    color: #0056b3 !important;
    font-weight: bold !important;
    font-family: Arial, Helvetica, sans-serif !important;
}
.hakkimizda-bolumu-anasayfa h2,
.template-about-content h2,
.entry-content h2 {
    font-size: 30px !important;
}
.hakkimizda-bolumu-anasayfa h3,
.template-about-content h3,
.entry-content h3 {
    font-size: 24px !important;
}
.hakkimizda-bolumu-anasayfa h4,
.template-about-content h4,
.entry-content h4 {
    font-size: 20px !important;
}

/* --------------------------------------------------------------------------
   20. WI49 Update #9 (20 Apr 2026) - Enlarge mobile submenu dropdown arrows
   Brian: "smaller than a full stop". Make them much more visible.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Level 1 dropdown arrows in side drawer */
    .side-widget .site-menu ul li.menu-item-has-children > a::after {
        font-size: 18px !important;
        opacity: 0.8 !important;
        margin-left: 4px !important;
    }
    /* Level 2 dropdown arrows */
    .side-widget .site-menu li.menu-item-has-children > ul > li.menu-item-has-children > a::after {
        font-size: 16px !important;
        opacity: 0.8 !important;
    }
}

/* --------------------------------------------------------------------------
   21. WI49 Update #10 (21 Apr 2026) - Oval logo: force larger size on PC
   Brian in #9: "Increased size showing on phone - PC oval logo has not
   increased." The previous rule used max-height but theme's style.css has
   `.navbar .logo a img { height: 76px; }` which wins without !important on
   height itself. Force height:120px at desktop, tapering down via media
   queries. Tablets and phones keep the max-height caps from section 1.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .navbar .logo a img,
    nav .logo a img {
        height: 120px !important;
        width: auto !important;
        max-height: 160px !important;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar .logo a img,
    nav .logo a img {
        height: 100px !important;
        width: auto !important;
    }
}

/* --------------------------------------------------------------------------
   22. WI49 Update #9 (20 Apr 2026) - Partner logos: prevent overlap on phone
   The col-lg-2 override from section 12 makes logos too wide on mobile.
   Reset to stacked single-column on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .sectionbars4 .col-lg-2 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }
    .sectionbars4 img.marka {
        max-width: 200px !important;
        width: auto !important;
    }
}

/* --------------------------------------------------------------------------
   23. WI49 Update #9 (20 Apr 2026) - Contact Us menu: prevent overlap with
   hamburger icon on PC. Push menu items slightly left.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .navbar .navbar-nav {
        padding-right: 60px !important;
    }
}

/* --------------------------------------------------------------------------
   24. WI49 Update #10 (21 Apr 2026) - CCQ section: centre on PC
   Brian: "Centre CCQ section on PC - mobile looks fine." The .dep2 column
   is a flex child pinned to the left at ~50% width. Auto margins centre
   the column within the flex row at desktop widths. Mobile is untouched
   (under 992px the row typically stacks and dep2 already reads centred).
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .offer-request .row > .dep2 {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* --------------------------------------------------------------------------
   25. WI49 Update #10 (21 Apr 2026) - Facebook icon: inline SVG for perfect
   centring. The original icon-font glyph sits ~5px left of its bounding
   box, so the Facebook tile in the footer looked off-centre vs the
   Instagram/Twitter icons and the kangaroo image above. Footer.php now
   uses an inline SVG; this rule makes the anchor flex-centre the SVG
   within the oval and keeps the visual size consistent with the icon
   font it replaced.
   -------------------------------------------------------------------------- */
.footer .footer-social li a.fb-svg-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}
.footer .footer-social li a.fb-svg-link .fb-svg-icon {
    width: 22px;
    height: 22px;
    display: block;
}
@media (max-width: 768px) {
    .footer .footer-social li a.fb-svg-link .fb-svg-icon {
        width: 18px;
        height: 18px;
    }
}

/* --------------------------------------------------------------------------
   9. WI49 Update #11 - Submenu font test (Brian, 25 Apr 2026)
   Reduce desktop submenu font to 13px (uniform across both nesting levels)
   so long titles like "2026 SQ Towns and Bush Tagalong" don't wrap to 3-4
   lines. Mobile/tablet rules in section 7 are scoped to .side-widget so
   this desktop-only rule won't carry through to phone/tablet.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* !important needed to beat existing .side-widget .site-menu ul li ul.dropdown-menu a {font-size:14px !important} rule (section 7) */
    .navbar-nav .dropdown-menu .dropdown-item,
    .side-widget .site-menu ul li ul.dropdown-menu a,
    .side-widget .site-menu ul li ul.dropdown-menu ul.dropdown-menu a {
        font-size: 13px !important;
    }
}

/* --------------------------------------------------------------------------
   10. WI49 Update #11 - Page-header banner transparency (Brian, 25 Apr 2026)
   The Octa theme's inc/custom-style.php applies a stacked inset box-shadow
   (#ffffffbf 75% + #ffffffa6 65% = ~91% white overlay) to header.page-header,
   which makes header banner photos look "almost 100% transparent" on every
   page where one is set. Brian asked for 50% to make the photos noticeable
   without being stark. Single inset shadow at white 50%.
   -------------------------------------------------------------------------- */
header.page-header {
    box-shadow: inset 0px 0px 0px 500px rgba(255, 255, 255, 0.25) !important;
}


/* --------------------------------------------------------------------------
   11. WI49 Update #14 (27 Apr 2026) - Always-on white navbar (Brian)
   PC menu read black-on-photo against header.page-header banner photos at
   page open, only flipping to white-bg when scrolled past 100px (theme's
   js/scripts.js .navbar.sticky toggle). Brian asked for the post-scroll
   appearance to be the default. Mirror the inline .sticky rule on .navbar
   directly so the menu is legible at first paint, regardless of scroll
   position. Keep scoped to >= 992px (PC) - phone/tablet drawer pattern was
   not affected and Brian explicitly said "the black on a picture doesn't
   happen on the phone".
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .navbar {
        background: #fff !important;
        transition: 0.9s !important;
    }
    .navbar li a {
        color: #000 !important;
    }
    .navbar .logo img.h { display: none !important; }
    .navbar .logo img.s { display: block !important; }
}

/* --------------------------------------------------------------------------
   12. WI49 Update #14 (27 Apr 2026) - Home page hero CTA: Member Login +
   Membership buttons visible at first paint (Brian)
   The "Members" + "Membership" buttons in the About section sit ~1326px
   down the page, well below the fold on the 900px hero. Brian's reference
   was the live site where login+membership are visible at home open.
   Inject buttons via custom.js into header.slider, position them as an
   absolute overlay below the existing "Read More" CTA so they sit above
   the slider photo and below the title block. Hidden on phone (drawer
   pattern serves the same need).
   -------------------------------------------------------------------------- */
header.slider .hero-cta {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100px;
    z-index: 9;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}
header.slider .hero-cta .btn-3 {
    margin: 0;
}
@media (max-width: 991px) {
    header.slider .hero-cta {
        bottom: 70px;
        gap: 10px;
    }
    header.slider .hero-cta .btn-3 {
        padding: 10px 22px;
        font-size: 14px;
    }
}

/* --------------------------------------------------------------------------
   13. WI49 Update #14b (27 Apr 2026) - Banner photo crop fix (Brian)
   The Section 11 always-white navbar (introduced earlier today) made the
   navbar opaque, which on interior pages with a header.page-header banner
   meant the top ~94px of the banner photo got hidden under the white block
   - cropping faces/heads in group photos. Push page-header down by the
   visible navbar height so the banner sits below the navbar instead of
   behind it. PC only - mobile drawer pattern is unchanged.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    header.page-header {
        margin-top: 94px !important;
    }
}