/* ===========================================================
   GolfResortReviews.com — custom overrides
   =========================================================== */

/* Popular Reviews featured header — align the title to the left margin and the
   paging dots to the right margin of the container (float layout, not flex). */
#carousel-popular-featured .section-header { display: block !important; overflow: hidden; }
#carousel-popular-featured .section-header h3 { float: left !important; margin: 3px 0 0 !important; }
#carousel-popular-featured .section-header .section-nav { float: right !important; position: static; width: auto; margin: 0; }

/* Logo sizing — the inherited VideoTube theme caps #logo at 240px
   wide with #logo img max-width:50%, which squashes a wide logo.
   On desktop, let the logo size to its natural aspect ratio by
   height instead. Mobile rules in style.css are left untouched. */
@media (min-width: 768px) {
    #logo {
        width: auto !important;
        height: auto !important;
        line-height: normal !important;
        margin: 14px 0 10px 15px !important;
    }
    #logo img {
        height: 74px !important;
        width: auto !important;
        max-width: 100% !important;
    }
}

/* Hero slider — easingslider.min.css forces width/height:auto !important on
   slide images to "keep ratio", which leaves smaller source images sitting
   at their natural size instead of filling the 1140x400 stage. Force every
   slide image to cover the full stage (higher specificity beats the plugin). */
.easingslider-golf .easingslider-viewport {
    width: 100% !important;
    height: 400px !important;
    max-height: 400px !important;
}
.easingslider-golf .easingslider-slide {
    width: 100% !important;
    height: 400px !important;
}
.easingslider-golf .easingslider-image {
    width: 100% !important;
    height: 400px !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Section "View All" button — push to the right edge of the section header
   (away from the title) and make it smaller/less chunky. Scoped to the
   section header so it does not affect the inline .viewmore links elsewhere. */
.section-header { display: flex; align-items: center; justify-content: space-between; }
.section-header h3 { float: none !important; }
.section-header .viewmore {
    float: none !important;
    margin: 0 0 0 14px !important;
    padding: 4px 11px !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: 1px !important;
    white-space: nowrap;
}

/* Sign In on the nav bar (logged out) — right side on desktop; on mobile it
   stacks inside the collapsed hamburger menu. */
@media (min-width: 768px) {
    #menu-auth { float: right; margin-left: 12px; }
}
#menu-auth .fa-user { margin-right: 4px; }

/* Logged-in account section — right side of the white header area, beside the
   logo (the blank space). Stacks/centers under the logo on mobile. */
#header-account {
    text-align: right;
    padding-top: 30px;
    font-family: Lato, sans-serif;
}
#header-account .ha-user {
    color: #1d5631;
    font-weight: 400;
    font-size: 13px;
    margin-right: 16px;
}
#header-account .ha-user .fa-user-circle { margin-right: 5px; color: #5a9e34; }
#header-account a {
    color: #1d5631;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    margin-left: 16px;
}
#header-account a:hover { color: #5a9e34; text-decoration: underline; }
@media (max-width: 767px) {
    #header-account {
        text-align: center;
        padding-top: 0;
        padding-bottom: 12px;
    }
    #header-account .ha-user { display: block; margin: 0 0 6px; }
    #header-account a { margin: 0 8px; }
}