/* Noosa4Sale brand theme - design tokens and header/footer overrides
   Colors and fonts extracted directly from the live site (noosa4sale.com.au) CSS,
   see assets/n4s-import/css/style.css for the original source. */

@font-face {
    font-family: 'SeoulNamsan';
    src: url('../assets/fonts/SeoulNamsan-B.ttf') format('truetype');
    font-weight: 600 900;
    font-style: normal;
}

:root {
    --n4s-primary-blue: #37c6f3;
    --n4s-dark-grey: #333333;
    --n4s-light-bg-grey: #f1f1f1;
    --n4s-light-grey: #b3b5b7;
    --n4s-white: #ffffff;
    --n4s-title-font: "Playfair Display", serif;
    --n4s-body-font: "SeoulNamsan", "Poppins", sans-serif;
}

body {
    font-family: var(--n4s-body-font);
    color: var(--n4s-dark-grey);
}

/* The base template's own css/style.css forces every <p> to font-size:initial (browser
   default, ~16px) with line-height:1.2 !important, which silently overrides the live site's
   real body copy sizing (body{font-size:14px}, p{line-height:1.85} in css/live-site/style.css).
   Restore the live site's actual values. Plain element selector, so instance-level utility
   classes (e.g. .fz16 on the hero text) still correctly win over this by specificity. */
p {
    font-size: 14px;
    line-height: 1.85 !important;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, #footer address strong {
    font-family: var(--n4s-title-font);
}

.btn-link {
    color: var(--n4s-primary-blue);
}

.btn-primary, .btn-book-appointment {
    background-color: var(--n4s-primary-blue);
    border-color: var(--n4s-primary-blue);
    color: var(--n4s-white);
}

.btn-primary:hover, .btn-book-appointment:hover {
    background-color: #2badd9;
    border-color: #2badd9;
}

/* Header / main nav */
#menu {
    background-color: var(--n4s-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding-top: .5rem;
    padding-bottom: .5rem;
}

#menu .navbar-brand {
    padding: 0;
    margin-right: 2rem;
}

#menu .navbar-brand img {
    height: 48px;
    width: auto;
}

#menu .navbar-nav .nav-link {
    color: var(--n4s-dark-grey);
    font-weight: 500;
    padding-left: .85rem;
    padding-right: .85rem;
}

#menu .navbar-nav .nav-link:hover {
    color: var(--n4s-primary-blue);
}

#menu .header-contact {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: 1rem;
}

#menu .header-contact .header-phone {
    color: var(--n4s-dark-grey);
    font-weight: 600;
    white-space: nowrap;
}

#menu .header-contact .header-phone i {
    color: var(--n4s-primary-blue);
    margin-right: .35rem;
}

#menu .btn-book-appointment {
    border-radius: 4px;
    padding: .5rem 1.1rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Footer */
#footer.footer-dark {
    background-color: var(--n4s-dark-grey);
    color: #dcdcdc;
}

#footer.footer-dark a {
    color: #dcdcdc;
}

#footer.footer-dark a:hover {
    color: var(--n4s-primary-blue);
}

.footer-logo-img {
    max-width: 200px;
    width: 100%;
    height: auto;
}

@media (min-width: 767.98px) {
    .footer-logo-img {
        max-width: 270px;
    }
}

#footer .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .1);
    color: var(--n4s-white);
    margin-right: .5rem;
}

#footer .footer-social a:hover {
    background-color: var(--n4s-primary-blue);
}

#footer .footer-links .list-title a {
    font-family: var(--n4s-title-font);
    font-weight: 600;
    color: var(--n4s-white);
}

#footer .footer-credits {
    border-top: 1px solid rgba(255, 255, 255, .15);
    padding-top: 1rem;
    margin-top: 1.5rem;
    font-size: .875rem;
    color: #b3b5b7;
}

#footer .footer-credits a {
    color: #b3b5b7;
    text-decoration: underline;
}

/* Footer newsletter signup */
#footer .footer-subscribe h4 {
    color: var(--n4s-white);
    margin-bottom: .5rem;
}

#footer .footer-subscribe p {
    color: #b3b5b7;
    font-size: .9rem;
    margin-bottom: 1rem;
}

#footer .footer-subscribe-fields .form-control {
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    color: var(--n4s-white);
}

#footer .footer-subscribe-fields .form-control::placeholder {
    color: #b3b5b7;
}

#footer .footer-subscribe-error {
    display: block;
    color: #ff8a8a;
    font-size: .8rem;
    margin-top: .35rem;
}

/* Home page */
.hero-copy {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    color: var(--n4s-white);
    padding: 0 1rem;
}

.hero-copy h1 {
    font-size: 2.75rem;
    color: var(--n4s-white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
    margin-bottom: 1rem;
}

.hero-copy p {
    font-size: 1.1rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
    margin-bottom: 1.5rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.btn-outline-light {
    border: 1px solid var(--n4s-white);
    color: var(--n4s-white);
    background: transparent;
    border-radius: 4px;
    padding: .5rem 1.1rem;
    font-weight: 600;
}

.btn-outline-light:hover {
    background-color: var(--n4s-white);
    color: var(--n4s-dark-grey);
}

.btn-outline-dark {
    border: 1px solid var(--n4s-dark-grey);
    color: var(--n4s-dark-grey);
    background: transparent;
    border-radius: 4px;
    padding: .5rem 1.25rem;
    font-weight: 600;
}

.btn-outline-dark:hover {
    background-color: var(--n4s-dark-grey);
    color: var(--n4s-white);
}

.welcome-section .main-title,
.services-section .main-title,
.news-section .main-title {
    text-align: center;
    font-family: var(--n4s-title-font);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.welcome-lead {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 1.5rem;
    font-size: 1.15rem;
}

.services-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 1rem;
}

.services-subtitle {
    text-align: center;
    font-family: var(--n4s-title-font);
    margin-bottom: 2rem;
}

.service-card {
    text-align: center;
    padding: 1.5rem;
}

.service-card .service-number {
    font-family: var(--n4s-title-font);
    font-size: 2rem;
    color: var(--n4s-primary-blue);
    font-weight: 700;
}

.stats-section {
    background-color: var(--n4s-dark-grey);
    padding: 3rem 0;
}

.stats-section .stat-number {
    font-family: var(--n4s-title-font);
    font-size: 2.25rem;
    color: var(--n4s-primary-blue);
    font-weight: 700;
}

.stats-section .stat-label {
    color: var(--n4s-white);
    font-size: .95rem;
}

.testimonials-lead {
    max-width: 700px;
    margin: 0 auto 1.5rem;
}

.news-card {
    background-color: var(--n4s-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.news-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news-card-body {
    padding: 1.25rem;
}

.news-card .news-date {
    font-size: .8rem;
    color: var(--n4s-light-grey);
    text-transform: uppercase;
    margin-bottom: .35rem;
}

.appraisal-cta {
    padding: 4rem 0;
}

.appraisal-cta h2,
.appraisal-cta p {
    color: var(--n4s-white);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

/* About page */
.about-intro {
    padding: 3rem 0 1rem;
    font-size: 1.05rem;
}

.differentiator-list {
    list-style: none;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
}

.differentiator-list li {
    position: relative;
    padding: .5rem 0 .5rem 2rem;
    font-size: 1.05rem;
}

.differentiator-list li::before {
    content: "\f00c";
    font-family: "FontAwesome";
    color: var(--n4s-primary-blue);
    position: absolute;
    left: 0;
    top: .5rem;
}

.about-team {
    padding: 3rem 0;
}

.team-lead {
    color: var(--n4s-light-grey);
    margin-bottom: 2rem;
}

.team-card {
    text-align: center;
    margin-bottom: 2rem;
}

.team-card img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.team-card h4 {
    margin-bottom: .15rem;
}

.team-card .team-role {
    color: var(--n4s-light-grey);
    font-size: .9rem;
}

.about-cta a {
    color: var(--n4s-white);
}

/* Testimonials page */
.testimonials-page {
    padding: 2rem 0 3rem;
}

.testimonials-lead {
    max-width: 700px;
    margin: 0 auto 2rem;
    color: var(--n4s-light-grey);
}

.testimonial-card {
    background-color: var(--n4s-light-bg-grey);
    border-radius: 4px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    height: calc(100% - 1.5rem);
}

.testimonial-quote-mark {
    font-family: var(--n4s-title-font);
    font-size: 2.5rem;
    color: var(--n4s-primary-blue);
    line-height: 1;
}

.testimonial-card h4 {
    margin-bottom: .5rem;
}

.testimonial-author {
    margin-top: 1rem;
    font-weight: 600;
    color: var(--n4s-dark-grey);
}

/* Sell page */
.sell-intro {
    padding: 3rem 0 1rem;
}

.sell-kicker {
    font-family: var(--n4s-title-font);
    font-size: 1.4rem;
    color: var(--n4s-primary-blue);
}

.sell-why {
    padding: 3rem 0;
}

.sell-why-lead {
    max-width: 800px;
    margin: 0 auto 2rem;
}

.why-item {
    margin-bottom: 1.75rem;
}

.why-item h4 {
    color: var(--n4s-dark-grey);
}

.sell-quote {
    padding: 4rem 0;
}

.sell-quote blockquote {
    max-width: 800px;
    margin: 0 auto;
    font-family: var(--n4s-title-font);
    font-size: 1.4rem;
    font-style: italic;
    color: var(--n4s-white);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
    border: none;
}

.sell-quote .quote-author {
    color: var(--n4s-white);
    font-weight: 600;
    margin-top: 1rem;
}

.sell-process {
    padding: 3rem 0;
}

.process-step {
    text-align: center;
    padding: 1.5rem;
}

.process-step .process-number {
    font-family: var(--n4s-title-font);
    font-size: 2rem;
    color: var(--n4s-primary-blue);
    font-weight: 700;
}

/* Suburb Profiles */
.suburb-tile-col {
    padding: 4px 4px 2.5rem;
}

.suburb-profile a {
    display: block;
    color: inherit;
}

.suburb-profile .suburb-tile-image {
    position: relative;
    overflow: hidden;
    padding-bottom: 66.6%;
    background: #efefef no-repeat center center;
    background-size: cover;
}

.suburb-profile .suburb-tile-description {
    position: relative;
    padding-top: .5rem;
}

.suburb-profile .suburb-tile-description h3 {
    font-family: var(--n4s-title-font);
    margin: 0 0 .5rem;
}

.suburb-profile .suburb-tile-description .category {
    color: var(--n4s-primary-blue);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .8rem;
}

.suburb-profile .suburb-tile-description p {
    color: var(--n4s-light-grey);
}

.suburb-profile .suburb-tile-description p em {
    font-style: normal;
    color: var(--n4s-primary-blue);
}

.suburb-profile-detail {
    color: var(--n4s-dark-grey);
}

.suburb-profile-detail h1 {
    font-family: var(--n4s-title-font);
}

.suburb-profile-detail p.lead {
    color: var(--n4s-light-grey);
}

.suburb-description p {
    padding-bottom: 1.25em;
}

.suburb-profile-banner {
    margin-bottom: 2em;
}

.suburb-profile-banner img {
    width: 100%;
    height: auto;
}

.suburb-sidebar h4 {
    font-family: var(--n4s-title-font);
    padding-top: .5em;
    padding-bottom: .75em;
}

.suburb-sidebar .btn-container {
    padding: .5rem 0;
}

.suburb-sidebar .btn-container > div {
    display: block;
    padding: .35rem 0;
}

/* Calculators */
.calculators-page {
    padding: 3rem 0;
}

.calculator-card {
    background-color: var(--n4s-light-bg-grey);
    border-radius: 4px;
    padding: 2rem;
    margin-bottom: 2rem;
    height: calc(100% - 2rem);
}

.calculator-card h3 {
    font-family: var(--n4s-title-font);
}

.calculator-intro {
    color: var(--n4s-light-grey);
    margin-bottom: 1.5rem;
}

.calculator-card .form-group label {
    font-weight: 600;
    font-size: .9rem;
}

.calculator-result {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: var(--n4s-white);
    border-left: 3px solid var(--n4s-primary-blue);
    border-radius: 2px;
}

.calculator-disclaimer {
    font-size: .8rem;
    color: var(--n4s-light-grey);
    margin-top: 1rem;
}

/* Live-site nav/home page fixes: Font Awesome 4.7.0 (bundled with this template) has no
   "Font Awesome 6 Pro" font, so the ported dropdown-arrow/icon glyphs need to point at the
   font that's actually loaded (lib/font-awesome). Icon names/prefixes in ported markup were
   also updated to FA4 (fa fa-x instead of fas/fab fa-x), but a few icons render via CSS
   content codes rather than markup, so the font-family needs overriding here too. */
.ace-responsive-menu > li > a > .arrow:before,
.ace-responsive-menu li ul.sub-menu li > a > .arrow:before {
    font-family: "FontAwesome" !important;
    font-weight: normal !important;
}

/* Root cause of the "underline" under nav items and section headings: this template's own
   css/style.css has a generic ".title { border-bottom: 1px solid #ddd; padding-bottom: 15px;
   ... }" rule (a legacy "heading with divider" style) that every element using class="title"
   picks up - including the nav's <span class="title">, and every ported section heading that
   reuses the live site's own "title" class name. It's not text-decoration at all, which is
   why targeting that never fixed it. Neutralise just the divider itself - NOT margin-top/
   margin-bottom, since those need to fall through to whatever spacing utility class
   (mb30, mb-1, etc.) the live site's own markup applies to a given heading. This previously
   forced margin-bottom:0 !important on every .title, which (loading after ud-custom-spacing.css)
   beat those utility classes' own !important and silently killed the gap under headings like
   "Why Noosa4Sale?" that rely on mb30 for their spacing. */
.title {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* The nav's own <span class="title"> menu-item text inherits the same base-template
   font-size:18px described above, which is why it renders larger than the phone number
   (.login-info, 14px) and the Book An Appointment button (.ud-btn, 15px) next to it.
   Scope this down to the nav only, so it doesn't affect the heading-size overrides below. */
.ace-responsive-menu > li > a .title,
.ace-responsive-menu li ul.sub-menu li > a .title {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* The base template's own .title class (see css/style.css) also hardcodes font-size:18px,
   which - being a class selector - outranks the live site's own bare h1/h2/h3 element rules
   regardless of stylesheet order. That silently shrank every ported "title" heading (Welcome,
   Why Noosa4Sale?, testimonials lead, Latest News) down to 18px. Restore the live site's real
   per-level sizes (css/live-site/style.css .h1-.h6 rules) for headings using this class.
   Excludes anything that already carries an fz## utility class (e.g. the "Why Noosa4Sale?"
   tile headings use fz30) - those already win their own size via normal cascade order and
   must not be clobbered by this higher-specificity element+class selector. */
h1.title:not([class*="fz"]) { font-size: 40px !important; }
h2.title:not([class*="fz"]) { font-size: 35px !important; }
h3.title:not([class*="fz"]) { font-size: 24px !important; }
h4.title:not([class*="fz"]) { font-size: 20px !important; }
h5.title:not([class*="fz"]) { font-size: 18px !important; }
h6.title:not([class*="fz"]) { font-size: 15px !important; }

@media (max-width: 575.98px) {
    h2.title:not([class*="fz"]) { font-size: 30px !important; }
}

.ace-responsive-menu a,
.apartment-style2,
h1, h2, h3, h4, h5, h6 {
    text-decoration: none !important;
}

/* The hero "Book An Appointment" button needs a bit more vertical breathing room than this
   template's .ud-btn default (13px top/bottom) to match the live site. */
.home-banner-style3 .ud-btn {
    padding-top: 18px;
    padding-bottom: 18px;
}

/* The <a> wrapping each "Why Noosa4Sale?" tile needs to be a block that fills its column
   for the tile's own height:100% (and its image/overlay) to resolve against anything - an
   inline default-display anchor collapses to content height instead. */
.apartment-tile-link {
    display: block;
    height: 100%;
    text-decoration: none;
}

/* The contact page embeds the existing ctlContactEmail control (also used on
   rental-application.aspx, so it isn't edited directly) inside the live site's boxed
   "Have questions? Get in touch!" card - hide the control's own <hr>/header here only,
   since the box already provides its own heading. */
.contact-page-form-embed > hr,
.contact-page-form-embed header {
    display: none;
}

/* nav-innerpage-style (every page but the home page) always has a solid white background,
   so it should always show the "scrolled" logo variant (logo2) - the live site's own CSS
   only defines this logo1/logo2 swap for .nav-homepage-style, so both logos would otherwise
   render at once here. */
header.nav-innerpage-style .header-logo.logo1 {
    display: none;
}
header.nav-innerpage-style .header-logo.logo2 {
    display: block;
}

/* The "Looking To Sell Your Property?" CTA image (.cta-img, position:absolute;bottom:0) is
   meant to anchor to the .our-cta section itself (which has position:relative from the base
   template's generic "section{position:relative}" rule), bleeding upward past its own short
   column - exactly like the live site. But the live site actually runs Bootstrap 5.1.3, whose
   grid columns are position:static by default, while this template bundles Bootstrap 4.0.0,
   whose columns default to position:relative - making OUR column (not the section) the
   nearest positioned ancestor, so bottom:0 anchors 60px too high (the section's own bottom
   padding never gets consumed). Force this specific column combination back to static so it
   defers to the section, matching the live site's actual computed layout - used identically
   for this CTA image column on every page that has this section (home, sell, team, etc). */
.col-lg-5.col-xl-4.offset-xl-2.d-lg-block {
    position: static;
}

/* Every inner-page hero (.breadcumb-section2, e.g. team.aspx/sell.aspx/testimonials.aspx)
   sits over a dark background-image overlay, so its heading and breadcrumb links need to be
   white - on the live site this is applied per-page via an inline <style> block, ported here
   once since every page using this section needs the identical override. */
.breadcumb-section2 .title {
    color: var(--white-color);
}
.breadcumb-section2 .breadcumb-style1 .breadcumb-list a {
    color: var(--white-color);
}

/* On the live site, blog images are pre-cropped server-side (Rails ActiveStorage
   resize_to_fill: 570x370) before being served, so every card lines up at the same height
   regardless of the source photo's own aspect ratio. Our images are served as originally
   downloaded, so force the same fixed crop here with CSS instead. */
.blog-style1 .blog-img img {
    aspect-ratio: 570 / 370;
    object-fit: cover;
    width: 100%;
}