/* =========================================================================
   STYLE.CSS — DRAFT STANDARD
   File: src/main/resources/static/css/style.css
   Revision Date: 2026-04-14

   PURPOSE
   - Global site styles
   - Provides:
       • page background
       • typography base
       • content width control
       • optional historical SVG rotating text
       • mega menu support
       • custom heading / paragraph styling
       • professional modular footer styling

   CURRENT FOOTER DESIGN
   - Full-width footer
   - Solid French blue background: #799CAF
   - Black filler/footer text
   - Responsive columns
   - Easy to add/remove columns and links

   IMPORTANT FOOTER ADJUSTMENT NOTES
   1) HOW TO CHANGE FOOTER COLOR
      - Edit .site-footer background
      - Current full solid color:
          background:rgba(121, 156, 175, 0.42);

   2) HOW TO MAKE FOOTER MORE SHEER / TRANSLUCENT
      - Replace solid background with rgba()
      - Example:
          background:rgba(121, 156, 175, 0.92);
      - Last number = opacity / sheerness
          1.00 = fully solid
          0.95 = slightly sheer
          0.85 = more translucent
          0.70 = quite transparent

   3) HOW TO CHANGE FOOTER FONT FAMILY
      - Edit:
          .footer-col h6
          .footer-col a
          .footer-bottom

   4) HOW TO CHANGE FOOTER FONT SIZE
      - Edit:
          .footer-col h6 { font-size: ... }
          .footer-col a  { font-size: ... }
          .footer-bottom { font-size: ... }

   5) HOW TO CHANGE FOOTER FONT COLOR
      - Edit:
          .site-footer   { color: ... }
          .footer-col h6 { color: ... }
          .footer-col a  { color: ... }
          .footer-bottom { color: ... }

   6) HOW TO CHANGE FOOTER TEXT WEIGHT
      - Edit:
          font-weight: 400 / 500 / 600 / 700

   7) HOW TO CHANGE FOOTER SPACING
      - Edit:
          .site-footer     { padding: ... }
          .footer-container{ gap: ... }
          .footer-col li   { margin-bottom: ... }
          .footer-bottom   { margin-top: ... }

   8) ABOUT "STROKE" ON HTML TEXT
      - HTML text does NOT use Illustrator-style vector stroke the same way
      - Closest web options are:
          a) text-shadow
          b) -webkit-text-stroke
      - Example of subtle stroke:
          -webkit-text-stroke: 0.3px #000;
      - Use carefully; too much can look harsh on web
   ========================================================================= */


/* ==========================================================================
   GLOBAL DESIGN TOKENS — SINGLE SOURCE OF TRUTH

   PURPOSE
   - Owns shared semantic brand values once.
   - Components consume these tokens instead of repeating raw color values.
   ========================================================================== */

:root {

    --site-brand-olive-rgb: 109, 105, 40;

    --site-brand-olive: rgb(var(--site-brand-olive-rgb));

    --site-french-blue-rgb: 121, 156, 175;

    --deployment-notice-background:
            rgba(var(--site-french-blue-rgb), 0.16);

    --deployment-notice-border:
            rgba(var(--site-french-blue-rgb), 0.38);

    --deployment-notice-accent:
            rgba(var(--site-french-blue-rgb), 0.78);
}


/* -------------------------------------------------------------------------
   0) GLOBAL BACKGROUND UTILITY
   PURPOSE
   - Light cream background helper class
   ------------------------------------------------------------------------- */
.bg-custom {
    background-color: #f3f0df !important;
}


/* -------------------------------------------------------------------------
   1) SELF-HOSTED BOOGY FONT
   PURPOSE
   - Brand display font
   - Use this selectively where appropriate
   ------------------------------------------------------------------------- */
@font-face {
    font-family: 'boogy-brut-poster-test-white-italic';
    src: url('../fonts/boogy/boogy-brut-poster-test-white-italic.otf') format('opentype');
    font-style: italic;
    font-weight: normal;
    font-display: swap;
}


/* -------------------------------------------------------------------------
   2) BASE BODY STYLING
   PURPOSE
   - Sets page-wide defaults
   ------------------------------------------------------------------------- */
body {
    font-family: Arial, sans-serif;
    background-color: #f3f0df;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


/* -------------------------------------------------------------------------
   3) GLOBAL CONTENT CONTAINER
   PURPOSE
   - Keeps page content from becoming too wide on large screens
   HOW TO ADJUST
   - Increase max-width for wider content area
   - Decrease max-width for tighter content area
   ------------------------------------------------------------------------- */
.site-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}


/* -------------------------------------------------------------------------
   4) MAIN TEXT CONTENT BLOCK
   PURPOSE
   - Gives readable line length for body sections
   ------------------------------------------------------------------------- */
.text-content {
    max-width: 1000px;
    margin: 0 auto;
}


/* -------------------------------------------------------------------------
   5) OPTIONAL SVG ROTATING TEXT
   PURPOSE
   - Historical / optional feature
   - Left here in case you reuse it later
   ------------------------------------------------------------------------- */
.svg-text-overlay {
    position: absolute;
    top: 53%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
}

.svg-rotating-text {
    width: 100%;
    height: 100%;
    animation: spin 20s linear infinite;
}

.svg-text {
    font-family: 'boogy-brut-poster-test-white-italic', sans-serif;
    font-size: 1.2rem;
    fill: black;
    letter-spacing: 5px;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* -------------------------------------------------------------------------
   6) GLOBAL IMAGE SAFETY
   PURPOSE
   - Prevents images from overflowing containers
   ------------------------------------------------------------------------- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* -------------------------------------------------------------------------
   7) MEGA MENU
   PURPOSE
   - Existing behavior preserved
   ------------------------------------------------------------------------- */
.explore-menu .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #f3f0df;
    z-index: 1000;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.explore-menu:hover .dropdown-menu {
    display: block;
}

.mega-menu {
    padding: 1rem 2rem;
}

.mega-top-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.mega-top-item {
    font-family: 'boogy-brut-poster-test-white-italic', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    padding-bottom: 0.25rem;
    transition: background-color 0.2s ease;
}

.mega-top-item:hover {
    background-color: rgba(163, 166, 86, 0.5);
}

.mega-menu h6 {
    font-family: 'boogy-brut-poster-test-white-italic', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
    color: #000;
}

.mega-menu a {
    display: block;
    padding: 0.25rem 0;
    font-family: 'boogy-brut-poster-test-white-italic', sans-serif;
    font-size: 0.95rem;
    font-weight: normal;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.mega-menu a:hover {
    background-color: rgba(163, 166, 86, 0.5);
}


/* -------------------------------------------------------------------------
   8) CUSTOM LARGE HEADINGS
   PURPOSE
   - Large branded page heading style
   HOW TO ADJUST
   - font-family
   - font-size
   - font-style
   - font-weight
   - color
   - text-shadow
   ------------------------------------------------------------------------- */
.custom-heading {
    font-family: 'boogy-brut-poster-test-white-italic', sans-serif;
    font-size: 5rem;
    font-style: italic;
    font-weight: bold;
    color: #000;
    text-shadow:
            -0.5px -0.5px 0 #000,
            0.5px -0.5px 0 #000,
            -0.5px  0.5px 0 #000,
            0.5px  0.5px 0 #000;
    margin-top: 2rem;
    margin-bottom: 1rem;
}


/* -------------------------------------------------------------------------
   9) CUSTOM PARAGRAPH
   PURPOSE
   - Body paragraph styling for custom sections
   ------------------------------------------------------------------------- */
.custom-paragraph {
    font-family: Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 2.5rem;
}


/* -------------------------------------------------------------------------
   10) BOTTOM MENU
   PURPOSE
   - Existing behavior preserved
   ------------------------------------------------------------------------- */
.bottom-menu .bottom-dropdown-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f3f0df;
    z-index: 1000;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.bottom-menu:hover .bottom-dropdown-menu {
    display: block;
}

.bottom-dropdown-menu h6 {
    font-family: 'boogy-brut-poster-test-white-italic', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
    color: #000;
}

.bottom-dropdown-menu a {
    display: block;
    padding: 0.25rem 0;
    font-family: 'boogy-brut-poster-test-white-italic', sans-serif;
    font-size: 0.95rem;
    font-weight: normal;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.bottom-dropdown-menu a:hover {
    background-color: rgba(163, 166, 86, 0.5);
}


/* -------------------------------------------------------------------------
   11) FOOTER — MAIN WRAPPER
   PURPOSE
   - Full-width professional footer
   - Current background is full solid French blue
   - Current text is black filler/testing text

   HOW TO CHANGE TO SOLID COLOR
   - Keep:
       background:#799CAF;

   HOW TO CHANGE TO SHEER / TRANSLUCENT COLOR
   - Replace with:
       background:rgba(121, 156, 175, 0.92);
   - Lower last number for more transparency
   - Raise last number for less transparency

   EXAMPLES
   - More sheer:
       background:rgba(121, 156, 175, 0.80);
   - Slightly sheer:
       background:rgba(121, 156, 175, 0.92);
   - Fully solid:
       background:#799CAF;
   ------------------------------------------------------------------------- */
.site-footer{
    width:100%;

    /* CURRENT FOOTER COLOR — FULL SOLID FRENCH BLUE */
    background:rgba(121, 156, 175, 0.42);

    /* CURRENT FOOTER DEFAULT TEXT COLOR */
    color:#000000;

    /* FOOTER OUTER SPACING
       top | left-right | bottom */
    padding:60px 20px 20px;
}


/* -------------------------------------------------------------------------
   12) FOOTER CONTENT CONTAINER
   PURPOSE
   - Centers footer content
   - Controls spacing between columns
   HOW TO ADJUST
   - Increase gap for more space between columns
   - Decrease gap for tighter layout
   ------------------------------------------------------------------------- */
.footer-container{
    max-width:1200px;
    margin:0 auto;

    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:40px;
}


/* -------------------------------------------------------------------------
   13) FOOTER COLUMN
   PURPOSE
   - Each footer column can grow, shrink, and wrap
   HOW TO ADJUST
   - flex-basis controls approximate width
   ------------------------------------------------------------------------- */
.footer-col{
    flex:1 1 200px;
}


/* -------------------------------------------------------------------------
   14) FOOTER COLUMN HEADINGS
   PURPOSE
   - Footer section titles such as About / Buy / Sell / Legal

   HOW TO CHANGE FONT FAMILY
   - Replace font-family below

   HOW TO CHANGE FONT SIZE
   - Edit font-size below

   HOW TO CHANGE FONT COLOR
   - Edit color below

   HOW TO CHANGE FONT WEIGHT
   - Edit font-weight below
   ------------------------------------------------------------------------- */
.footer-col h6{
    margin-bottom:15px;
    font-size:1.1rem;
    letter-spacing:1px;
    color:#000000;
    font-weight:600;
    font-family: Arial, sans-serif;

    /* OPTIONAL WEB TEXT STROKE EXAMPLE
       Uncomment only if needed and use lightly
       -webkit-text-stroke: 0.2px #000000;
    */
}


/* -------------------------------------------------------------------------
   15) FOOTER LIST RESET
   PURPOSE
   - Removes bullets and default browser spacing
   ------------------------------------------------------------------------- */
.footer-col ul{
    list-style:none;
    padding:0;
    margin:0;
}


/* -------------------------------------------------------------------------
   16) FOOTER LIST ITEM SPACING
   PURPOSE
   - Controls vertical spacing between links
   HOW TO ADJUST
   - Increase margin-bottom for more breathing room
   - Decrease margin-bottom for tighter links
   ------------------------------------------------------------------------- */
.footer-col li{
    margin-bottom:8px;
}


/* -------------------------------------------------------------------------
   17) FOOTER LINKS
   PURPOSE
   - Footer link styling
   - Current filler/testing text is black

   HOW TO CHANGE FONT FAMILY
   - Edit font-family

   HOW TO CHANGE FONT SIZE
   - Add or edit font-size

   HOW TO CHANGE FONT COLOR
   - Edit color

   HOW TO CHANGE FONT WEIGHT
   - Edit font-weight

   HOW TO ADD SUBTLE TEXT STROKE
   - Example:
       -webkit-text-stroke: 0.2px #000000;

   HOW TO ADD TEXT SHADOW
   - Example:
       text-shadow: 0 1px 1px rgba(255,255,255,0.20);
   ------------------------------------------------------------------------- */
.footer-col a{
    text-decoration:none;
    color:#000000;
    opacity:0.88;
    transition:opacity 0.2s ease;
    font-family: Arial, sans-serif;
    font-weight:400;
}

.footer-col a:hover{
    opacity:1;
}


/* -------------------------------------------------------------------------
   18) FOOTER BOTTOM STRIP
   PURPOSE
   - Copyright / licensing / disclosure area

   HOW TO CHANGE FONT SIZE
   - Edit font-size below

   HOW TO CHANGE FONT COLOR
   - Edit color below

   HOW TO CHANGE SPACING ABOVE STRIP
   - Edit margin-top below
   ------------------------------------------------------------------------- */
.footer-bottom{
    margin-top:40px;
    text-align:center;
    font-size:0.85rem;
    color:#000000;
    opacity:0.85;
    font-family: Arial, sans-serif;
    font-weight:400;
}

/* -------------------------------------------------------------------------
   IDX / SMARTMLS DISCLAIMER — SITE-WIDE
   PURPOSE
   - Small compliance text shown before the footer.
   - Safe for every page because IDX teaser listings may appear site-wide.
   ------------------------------------------------------------------------- */
.idx-disclaimer-section {
    max-width: 1200px;
    margin: 2rem auto 1rem;
    padding: 0 20px;
}

.idx-disclaimer {
    font-size: 0.68rem;
    line-height: 1.5;
    color: #000000;
    opacity: 0.78;
    text-align: center;
}


/* -------------------------------------------------------------------------
   19) MOBILE TWEAKS
   PURPOSE
   - Stacks footer columns on smaller screens
   - Centers footer text for cleaner mobile presentation

   HOW TO ADJUST
   - If mobile feels too compressed, reduce gap or footer padding
   ------------------------------------------------------------------------- */
@media (max-width:768px){

    .footer-container{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

}

/* -------------------------------------------------------------------------
   CTA BUTTON — SAFE OVERRIDE
   PURPOSE
   - Styles only the "Send Mary a message here" button
   - Does NOT touch page background, footer, or menu background
   - Keep this block at the VERY BOTTOM of style.css

   BRAND COLORS
   - Background: #011640
   - Text: #F3F0DF
   - Hover: #173F73

   IMPORTANT
   - This block must be pasted after all other CSS rules
   - Do not place inside another selector or inside a media query
   ------------------------------------------------------------------------- */
.contact-cta .btn-primary{
    background:#011640 !important;
    border-color:#011640 !important;
    color:#F3F0DF !important;
}

.contact-cta .btn-primary:hover,
.contact-cta .btn-primary:focus{
    background:#173F73 !important;
    border-color:#173F73 !important;
    color:#F3F0DF !important;
}
/* ==========================================================================
   MY LIFE EDITORIAL IMAGE STYLES
   Static/editorial page image presentation.
   Image metadata remains in EditorialImageService.java.
   ========================================================================== */

.editorial-image {
    margin: 2rem 0;
}

.editorial-image__img {
    border-radius: 0.5rem;
    height: auto;
}

.editorial-image__caption {
    margin-top: 0.5rem;
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.4;
}

.editorial-image--hero {
    max-width: 420px;
}

.editorial-image--standard {
    max-width: 760px;
}

.editorial-image--wide {
    max-width: 920px;
}

.editorial-image--small {
    max-width: 420px;
}

.editorial-image-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin: 2rem 0;
}

.editorial-image--grid-item {
    margin: 0;
}

/* =========================================================================
   CONTACT MARY LINK AND STATIC MEGA MENU ITEM
   SOT: Contact values come from application.properties via ${site}.
   Button color reuses existing .contact-cta .btn-primary site rule.
   ========================================================================= */

.contact-mary-link,
.contact-mary-link:visited {
    color: inherit;
    font-family: inherit;
    text-decoration: none;
}

.contact-mary-link:hover,
.contact-mary-link:focus {
    color: inherit;
    text-decoration: underline;
}

.mega-menu .mega-menu-static-item {
    color: inherit;
    font-family: "boogy-brut-poster-test-white-italic", sans-serif;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Contact Mary office block
   Keeps appointment-note spacing in CSS instead of inline template styling. */
.contact-mary-appointment-note {
    display: inline-block;
    margin-top: 0.45rem;
}

/* ==========================================================================
   DEPLOYMENT NOTICE BANNER
   ========================================================================== */

.deployment-notice-wrapper {
  max-width: 1120px;
  margin: 1.5rem auto 0;
  padding: 0 1rem;
}

.deployment-notice-card {
  background: var(--deployment-notice-background);
  border: 1px solid var(--deployment-notice-border);
  border-left: 0.35rem solid var(--deployment-notice-accent);
  border-radius: 1rem;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.06);
  padding: 1rem 1.25rem;
}

.deployment-notice-heading {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0 0 0.35rem;
}

.deployment-notice-message {
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0;
}