/*
 ============================================================
 site.css — Living In Vero
 Replaces: p7affinity_02.css, p7MFT-01.css, p7DMM01.css
 Preserves current look exactly; uses CSS variables for
 future theme changes in one place.
 ============================================================
*/

/* ── Design Tokens ───────────────────────────────────────── */
:root {
    /* Colors */
    --color-nav-bg:          #7BA4C1;
    --color-nav-link:        #000000;
    --color-nav-link-hover:  #ffffff;
    --color-nav-link-border: #517186;
    --color-nav-hover-bg:    #487799;
    --color-nav-sub-bg:      rgba(255,255,255,0.5);

    --color-masthead-bg:     #FFFAF0;
    --color-masthead-shadow: #000000;

    --color-sidebar-bg-from: #FFFAF0;
    --color-sidebar-bg-to:   #7BA4C1;
    --color-sidebar-border:  #333333;

    --color-content-border:  #666666;
    --color-body-bg:         #ffffff;

    --color-footer-bg:       #EEEEE0;
    --color-footer-border:   #000000;
    --color-footer-text:     #000000;
    --color-footer-link:     #8C8C8C;
    --color-footer-link-hover: #ffffff;

    --color-link:            #002953;
    --color-link-hover:      #000000;
    --color-text:            #000000;

    /* Typography */
    --font-body:    "Segoe UI", Optima, Helvetica, Arial, sans-serif;
    --font-heading: Federo, "Segoe UI", Optima, Helvetica, Arial, sans-serif;
    --font-size-base: 1em;
    --font-size-small: 0.7em;
    --font-size-sidebar: 0.9em;

    /* Layout */
    --max-width:        1260px;
    --main-width:       69%;
    --sidebar-width:    30%;
    --main-margin:      1%;
    --content-pad:      20px 30px;
    --sidebar-pad:      20px 20px;
    --content-radius:   5px;
    --footer-height:    auto;

    /* Shadows */
    --shadow-masthead: 0px 0px 30px #000;
    --shadow-nav:      0px 0px 30px #999;
    --shadow-footer:   inset 0px 16px 2px rgba(255,255,255,.025);
}

/* ── Reset / Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family:      var(--font-body);
    color:            var(--color-text);
    background-color: var(--color-body-bg);
    background:       url(../img/background8.jpg) no-repeat center center;
    background-size:  cover;
    background-attachment: fixed;
    margin:           0;
    padding:          0 0 4em 0;
    font-size:        var(--font-size-base);
    min-height:       100%;
}

img { vertical-align: bottom; }

img.scalable {
    height:    auto !important;
    width:     auto !important;
    max-width: 100%;
    border-radius: var(--content-radius);
}

.fancy {
    border:     1px solid rgba(255,255,255,.2);
    box-shadow: 0px 0px 30px rgba(0,0,0,.65);
}

/* ── Headings ────────────────────────────────────────────── */
h1, h2, h3, h4 {
    margin:      30px 0 0 0;
    font-family: var(--font-heading);
    font-weight: normal;
}
h1 { font-size: 1.5em; }
h2 { font-size: 1.35em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.1em; }

.content h1:first-child,
.content h2:first-child,
.content h3:first-child,
.content h4:first-child { margin-top: 0; }

/* ── Masthead ────────────────────────────────────────────── */
.masthead {
    padding:          10px;
    text-align:       left;
    background-color: var(--color-masthead-bg);
    position:         relative;
    z-index:          10;
    box-shadow:       var(--shadow-masthead);
    vertical-align:   bottom;
}

/* ── Navigation ──────────────────────────────────────────── */
.top-navigation {
    background-color: var(--color-nav-bg);
    border-bottom:    1px solid #fff;
    box-shadow:       var(--shadow-nav);
    position:         relative;
    z-index:          9;
}
.top-navigation::after {
    content:    "\0020";
    font-size:  0;
    display:    inline;
    overflow:   hidden;
    line-height: 0;
    clear:      both;
}
.menu-top-wrapper {
    max-width: var(--max-width);
    margin:    auto;
}

/* ── Drop Menu ───────────────────────────────────────────── */
.p7DMM01 {
    position:         relative;
    background-color: var(--color-nav-bg);
    border-bottom:    1px solid #fff;
    box-shadow:       0px 0px 30px rgba(0,0,0,.45);
}
.p7DMM01::after {
    content:     "\0020";
    clear:       both;
    font-size:   0;
    line-height: 0;
    display:     inline;
    height:      0;
}
.menu-top-wrapper .p7DMM01 {
    background-color: transparent;
    border:           none;
    box-shadow:       none;
}
.p7DMM01 ul {
    margin:  0;
    padding: 0;
    display: inline-block;
    vertical-align: bottom;
}
.p7DMM01 ul li {
    list-style-type: none;
    float:           left;
    padding:         10px 0;
    margin-right:    8px;
}
.p7DMM01 ul li:last-child { margin-right: 0; }
.p7DMM01 ul a {
    color:           var(--color-nav-link);
    font-size:       1em;
    padding:         10px 12px;
    text-decoration: none;
    border:          1px solid var(--color-nav-link-border);
    border-radius:   var(--content-radius);
    display:         block;
    transition:      background-color .35s .1s linear,
                     box-shadow .35s .1s linear,
                     border-color .35s .1s linear;
}
.p7DMM01 ul a:hover,
.p7DMM01 ul a:focus,
.p7DMM01 ul a.open,
.p7DMM01 ul a.current_mark.closed {
    outline:          none;
    border-color:     rgba(255,255,255,0.65);
    color:            var(--color-nav-link-hover);
    box-shadow:       inset 0px 12px 8px rgba(255,255,255,.2);
    background-color: var(--color-nav-hover-bg);
}
.p7dmm-sub-wrapper {
    position: absolute;
    top:      100%;
    width:    100%;
    left:     0;
    display:  none;
}
.p7DMM01 ul ul {
    margin:   0;
    display:  inline-block;
    padding:  0;
    vertical-align: bottom;
}
.p7DMM01 ul ul li { padding: 8px 0; }
.p7DMM01 ul ul a {
    background-color: var(--color-nav-sub-bg);
    border-color:     #fff;
    box-shadow:       inset 0px 0px 8px rgba(255,255,255,.15);
    font-size:        0.8em;
    padding:          8px 10px;
    color:            #000;
}
.p7DMM01 ul ul a:hover {
    background-color: rgba(255,255,255,0.6);
    border-color:     #eee;
    color:            #000;
    box-shadow:       inset 0px 12px 20px rgba(123,164,193,.2);
}
.p7DMM01 ul ul a.current_mark {
    color:       #447395;
    font-weight: normal;
}
.p7DMM-toolbar { display: none; }

/* ── Layout ──────────────────────────────────────────────── */
.content-wrapper {
    margin:   4em 1.25em 0;
    overflow: hidden;
}
.columns-wrapper {
    overflow:  hidden;
    position:  relative;
    max-width: var(--max-width);
    margin:    auto;
}
.main-content {
    float:            left;
    width:            var(--main-width);
    margin-right:     var(--main-margin);
    background-color: var(--color-body-bg);
}
.sidebar {
    width: var(--sidebar-width);
    float: left;
}

/* ── Content & Sidebar Boxes ─────────────────────────────── */
.main-content .content {
    padding:       var(--content-pad);
    font-size:     1em;
    line-height:   1.5em;
    border:        1px solid var(--color-content-border);
    border-radius: var(--content-radius);
}
.sidebar .content {
    padding:       var(--sidebar-pad);
    font-size:     var(--font-size-sidebar);
    line-height:   1.5em;
    background-color: var(--color-sidebar-bg-from);
    background-image: linear-gradient(180deg,
        var(--color-sidebar-bg-from) 0.52%,
        var(--color-sidebar-bg-to)   100%);
    border:        1px solid var(--color-sidebar-border);
    border-radius: var(--content-radius);
}
.sidebar ul, .sidebar ol {
    margin:  0 0 0 .5em;
    padding: 0 0 0 .5em;
    line-height: normal;
}
.sidebar li { margin-bottom: 4px; }

/* ── Links ───────────────────────────────────────────────── */
.content a {
    color:                var(--color-link);
    text-decoration:      none;
    border-bottom-width:  1px;
    border-bottom-style:  dotted;
}
.content a:hover,
.content a:focus {
    color:               var(--color-link-hover);
    border-bottom-style: solid;
}
.footer a       { color: var(--color-footer-link); }
.footer a:hover,
.footer a:focus { color: var(--color-footer-link-hover); }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
    background-color: var(--color-footer-bg);
    box-shadow:       var(--shadow-footer);
    border-top:       1px solid var(--color-footer-border);
    padding:          15px;
    font-size:        var(--font-size-small);
    color:            var(--color-footer-text);
    text-align:       center;
    clear:            both;
    position:         fixed;
    bottom:           0;
    width:            100%;
    z-index:          20;
}
.footer p.copyright {
    text-transform: uppercase;
    margin:         0;
}

/* ── Utility ─────────────────────────────────────────────── */
#row        { vertical-align: bottom; }
#label      { display: inline-block; }
.textbottom { vertical-align: text-bottom; }
.style5     { font-size: 14px; }
.style6     { font-size: 11px; }
.hide-it    { font-size: inherit; }

/* ── Mobile-Friendly Tables (p7MFT) ─────────────────────── */
table.mft-adaptive {
    border-collapse: separate;
    width:           100% !important;
    table-layout:    fixed;
    border-spacing:  5px;
}
td img { vertical-align: bottom; }
table.mft-adaptive td,
table.mft-adaptive th {
    padding:        5px;
    vertical-align: top;
    text-align:     left;
}
table.mft-adaptive.mft-scalable {
    width:     auto;
    height:    auto;
    max-width: 100%;
}
table.mft-scalable img {
    width:     auto !important;
    height:    auto !important;
    max-width: 100% !important;
}

/* ── Responsive — Mobile (max 700px) ────────────────────── */
@media only screen and (max-width: 700px) {
    .content-wrapper,
    .columns-wrapper { margin: 0; border: none; }

    .sidebar,
    .main-content {
        width:    auto;
        float:    none;
        position: static;
    }
    .main-content .content,
    .sidebar .content {
        padding:       20px 10px;
        border-radius: 0;
        border:        none;
        height:        auto !important;
        max-height:    888678px;
    }

    /* Nav mobile */
    .p7DMM01.responsive { padding: 0; margin: 0; }
    .p7DMM01.responsive ul li { margin: 0; padding: 0; }
    .p7DMM01.responsive ul,
    .p7DMM01.responsive ul ul { display: block; padding: 0; margin: 0; }
    .p7DMM01.responsive ul li,
    .p7DMM01.responsive ul ul li { float: none; display: block; margin: 0; padding: 0; }
    .p7DMM01.responsive ul li a {
        border:        none;
        border-radius: 0;
        padding:       8px 18px;
        border-bottom: 1px solid rgba(255,255,255,.15) !important;
    }
    .p7DMM01.responsive ul li:last-child a { border-bottom: none; }
    .p7DMM01.responsive .p7dmm-sub-wrapper {
        width:    100%;
        position: relative;
        padding:  0;
        margin:   0;
        top:      0;
    }
    .p7DMM01.responsive .p7DMM-toolbar {
        position:         relative;
        z-index:          999;
        display:          block;
        background-color: #222;
        text-align:       right;
        padding:          6px;
        cursor:           pointer;
    }
    .p7DMM01.responsive ul.opened { display: block; }
    .p7DMM01.responsive ul.closed { display: none; }
    .p7DMM01.responsive .p7DMM-toolbar a {
        color:            #999;
        text-transform:   uppercase;
        font-size:        .8em;
        background-color: transparent !important;
        border:           none !important;
        text-decoration:  underline;
    }
    .p7DMM01.responsive .p7DMM-toolbar a::before  { content: "Hide Menu"; }
    .p7DMM01.responsive .p7DMM-toolbar.closed a::before { content: "Show Menu"; }
    .p7DMM01.responsive .p7DMM-toolbar.closed a { color: #eee; }
    .p7DMM01 ul a,
    .p7DMM01 ul a:hover,
    .p7DMM01 ul a:focus,
    .p7DMM01 ul a.open {
        border-bottom: 1px solid;
        border-color:  #89AEC9;
    }
    .p7DMM01 ul li:last-child a { border-bottom: none; }

    /* MFT tables mobile */
    .hide-it { display: none !important; }
    table.mft-normal {
        table-layout: fixed;
        width:        100%;
        margin:       auto;
        border:       none;
    }
    table.mft-normal th,
    table.mft-normal td,
    table.mft-normal tr { display: block; text-align: left; width: auto; }
    table.mft-normal th,
    table.mft-normal td { padding: 1em; border: none; }
}

/* ── Responsive — Tablet (700px–1280px) ─────────────────── */
@media only screen and (min-width: 700px) and (max-width: 1280px) {
    .main-content .content,
    .sidebar .content  { padding: 20px 15px; }
    .top-navigation    { padding: 0 10px; }
    .content-wrapper   { margin-left: 10px; margin-right: 10px; }
}

/* ── Landscape Phone ─────────────────────────────────────── */
@media only screen and (max-device-width: 480px) and (orientation: landscape) {
    .p7DMM01.responsive ul a     { font-size: 1.35em; padding: .35em .75em; }
    .p7DMM01.responsive ul ul a  { font-size: 1em;    padding: .3em 1em; }
}