/* =====================================================================
   eming.e-pao.org — tableless layout
   Loads AFTER epstyle08.css. Only defines NEW classes (ep-*), so it
   never overrides shared site-wide rules used by other subdomains.
   epstyle08.css itself is not modified.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');

:root {
    --ep-navy: #254666;
    --ep-blue: #3097d1;
    --ep-purple: #a706b5;
    --ep-brown: #733f3a;
    --ep-olive: #4d6205;
    --ep-pink-bg: #fdedee;
    --ep-cream-bg: #fff6e7;
    --ep-lavender-bg: #f4f3f7;
    --ep-panel-bg: #d3e8f8;
    --ep-row-bg: #f0f9ef;
    --ep-border: #d4d3d3;
    --ep-max-width: 977px;
}

* { box-sizing: border-box; }

/* ---------- Page shell ---------- */
.ep-page {
    max-width: var(--ep-max-width);
    margin: 0 auto;
    padding: 0 8px;
    position: relative;
}

.ep-site-header {
    padding: 10px 0;
    text-align: left;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.ep-site-header-banner {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 10px;
}
.ep-site-header-banner img { max-width: 100%; height: auto; display: block; border-radius: 14px; }

@media (max-width: 768px) {
    .ep-site-header {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .ep-site-header-banner {
        width: calc(100% - 4px);
        justify-content: flex-start;
        margin: 0 2px;
    }
    .ep-site-header-banner img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}

.ep-topnav ul.ep-navlist {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 3px 8px;
}

.ep-navlist li {
    display: flex;
    align-items: center;
}

.ep-navlist li a {
    color: #fff;
    font-family: "Lucida Grande", Lucida, "Helvetica Neue", Helvetica, Verdana, sans-serif;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    padding: 4px 10px;
    white-space: nowrap;
    display: block;
}
.ep-navlist li a:hover { text-decoration: underline; }

.ep-topnav-apps {
    background: var(--ep-navy);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.ep-topnav-channels {
    background: var(--ep-blue);
    margin-top: 1px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* ---------- Mobile nav toggle (hidden entirely outside the mobile query) ---------- */
.ep-nav-toggle { display: none; }
.ep-nav-wrap { display: block; }

/* ---------- Header row: logo / ad / search (welcome page style header, if used) ---------- */
.ep-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

/* ---------- Body: sidebar + main ---------- */
.ep-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2px;
    margin-top: 12px;
    padding-bottom: 12px;
    background: #fff;
}

.ep-sidebar-col {
    flex: 0 0 157px;
    width: 157px;
}

.ep-sidebar {
    width: 100%;
}

.ep-main {
    flex: 1 1 600px;
    min-width: 0;
    background: #fff;
}

@media (max-width: 768px) {
    .ep-body { flex-direction: column; }
    .ep-sidebar-col { display: contents; }
    .ep-sidebar, .ep-main, .ep-rating-panel { flex: 1 1 100%; width: 100%; }
    .ep-sidebar { order: 1; }
    .ep-main { order: 2; }
    .ep-rating-panel { order: 3; }

    /* Collapsible hamburger nav */
    .ep-nav-toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
        min-height: 44px;
        padding: 8px;
        background: var(--ep-navy);
        color: #fff;
        border: 0;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        cursor: pointer;
        font-family: Arial, sans-serif;
        font-size: 12px;
        font-weight: bold;
    }
    .ep-nav-toggle-bar {
        width: 22px;
        height: 2px;
        background: #fff;
        display: block;
    }
    .ep-nav-toggle-label { margin-top: 2px; }

    .ep-nav-wrap { display: none; }
    .ep-nav-wrap.is-open { display: block; }

    .ep-navlist { flex-direction: column; }
    .ep-navlist li a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* Stack the user bar on narrow screens instead of squeezing side by side */
    .ep-userbar { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---------- Global mobile safety net ---------- */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; }
    .ep-namecard-photo img,
    .ep-welcome-side img,
    .ep-intro-img img {
        max-width: 100%;
        height: auto;
    }
}

/* iOS auto-zooms text inputs under 16px on focus — bump form controls up on mobile only */
@media (max-width: 600px) {
    .ep-form input[type="text"],
    .ep-form input[type="email"],
    .ep-form select,
    .ep-form textarea,
    .ep-propose-fieldset input[type="text"],
    .ep-propose-fieldset input[type="email"],
    .ep-propose-fieldset select,
    .ep-propose-fieldset textarea {
        font-size: 16px;
    }

    /* Keep the propose-name popup usable if content is taller than the viewport */
    #divProposeFrm {
        max-height: 85vh;
        overflow-y: auto;
    }
}

/* ---------- Sidebar: logo ---------- */
.ep-logo {
    display: block;
    margin: 0 0 10px 4px;
    text-align: left;
}
.ep-logo img { border: 0; max-width: 100%; height: auto; }

/* ---------- Sidebar: Browse-by list (was a <table width=157>) ---------- */
.ep-browseby-title {
    background: url(../images/eming_navheader.gif) no-repeat;
    height: 25px;
    line-height: 25px;
    padding-left: 10px;
    font-weight: bold;
    font-size: 12px;
    color: #fff;
}

.ep-browseby-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #eee2f5;
}

.ep-browseby-list li a {
    display: block;
    background: url(../images/eming_bullets.gif) no-repeat;
    height: 22px;
    line-height: 22px;
    padding-left: 35px;
    font-weight: normal;
    font-size: 12px;
    color: #000;
    text-decoration: none;
}

.ep-browseby-list li a.is-selected {
    background: url(../images/eming_bullets_sel.gif) no-repeat;
    font-weight: bold;
}

.ep-browseby-footer {
    background: url(../images/eming_navheader2.gif) no-repeat;
    height: 23px;
}

/* ---------- Sidebar: rating widgets panel ---------- */
.ep-rating-panel { margin-top: 10px; }

.ep-rating-title {
    background: url(https://eming.e-paolive.net/images/eming_lemon_header1.gif) repeat-x;
    height: 22px;
    line-height: 22px;
    padding-left: 10px;
    font-weight: bold;
    font-size: 12px;
    color: var(--ep-olive);
}

.ep-rating-item {
    background-color: #f0f6e1;
    padding: 4px 10px;
    font-size: 11px;
    color: #000;
    line-height: 16px;
    text-transform: capitalize;
}

/* ---------- Mobile: Browse-by + rating entries as pill tags, logo centering ----------
   Placed AFTER the base rules above so it reliably wins the cascade —
   a mobile override declared earlier in the file than a same-specificity
   base rule loses to that base rule even inside its own media query. */
@media (max-width: 768px) {
    .ep-logo {
        margin: 0 0 10px 0;
        text-align: center;
    }
    .ep-browseby-title {
        background: none;
        height: auto;
        line-height: normal;
        padding: 4px 4px;
        color: var(--ep-brown);
    }
    .ep-browseby-footer { display: none; }
    .ep-browseby-list {
        background: none;
        background-color: transparent;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 4px;
    }
    .ep-browseby-list li a {
        background: none;
        background-color: #fff;
        background-image: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 38px;
        line-height: normal;
        padding: 8px 16px;
        border: 1.5px solid var(--ep-purple);
        color: var(--ep-purple);
        border-radius: 999px;
        font-size: 12px;
        font-weight: bold;
        white-space: nowrap;
        transition: background-color 0.15s ease, color 0.15s ease;
    }
    .ep-browseby-list li a:hover {
        background-color: var(--ep-purple);
        color: #fff;
    }
    .ep-browseby-list li a.is-selected {
        background: none;
        background-color: var(--ep-purple);
        background-image: none;
        color: #fff;
    }

    .ep-rating-panel {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .ep-rating-title { flex: 1 0 100%; }
    .ep-rating-item {
        background: none;
        background-color: #f0f6e1;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        border: 1px solid #d3e6c2;
        border-radius: 999px;
        padding: 6px 14px;
        font-size: 11px;
        line-height: normal;
        text-transform: capitalize;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }
    .ep-rating-item:hover {
        background-color: #dcecb8;
        border-color: var(--ep-olive);
    }
}

/* ---------- Main: banner + user bar ---------- */
.ep-banner img { display: block; width: 100%; height: auto; padding-top: 12px; }

.ep-userbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    font-size: 12px;
}

/* ---------- Content sections (was header_bg + content_bg table rows) ---------- */
.ep-section { margin-bottom: 10px; }

.ep-section-title {
    background: url(../images/eming_header_bg.gif) no-repeat;
    height: 32px;
    line-height: 32px;
    padding-left: 10px;
    font-weight: 800;
    font-size: 16px;
    color: var(--ep-brown);
}

.ep-section-body {
    background: url(../images/eming_content_bg.gif) repeat-x;
    padding: 10px;
    font-size: 12px;
    color: #000;
}

.ep-names-card-subtitle {
    font-size: 14px;
	font-weight: 700;
    font-style: italic;
    padding: 6px 4px;
    color: var(--ep-brown);
    border-bottom: 1px solid #c4b2d0;
    margin-bottom: 6px;
}

.ep-alphabet-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    padding: 8px 0;
}

/* ---------- Data tables (real tabular data — kept as <table>, just restyled) ---------- */
.ep-datatable {
    width: 100%;
    border-collapse: collapse;
    border: solid 1px #c4b2d0;
    background-color: #fff;
    font-size: 11px;
}

.ep-datatable th {
    background: url(../images/eming_table_header.gif) repeat-x;
    height: 23px;
    padding-left: 5px;
    font-weight: bold;
    font-size: 11px;
    color: var(--ep-brown);
    text-align: left;
    vertical-align: middle;
}

.ep-datatable td {
    vertical-align: top;
    padding: 5px;
    font-family: Arial;
    font-weight: normal;
    font-size: 11px;
    color: #000;
    background-color: var(--ep-row-bg);
}

.ep-datatable tfoot td {
    background: url(../images/eming_table_footer.gif) repeat-x;
    height: 40px;
    padding-left: 5px;
    font-weight: bold;
    font-size: 11px;
    color: #000;
    vertical-align: middle;
}

.ep-datatable a { font-size: 14px; font-weight: bold; font-family: "Trebuchet MS", Arial, sans-serif; color: var(--ep-purple); }

@media (max-width: 600px) {
    .ep-datatable, .ep-datatable thead, .ep-datatable tbody, .ep-datatable tfoot, .ep-datatable tr, .ep-datatable th, .ep-datatable td {
        display: block;
        width: 100%;
    }
    .ep-datatable thead { display: none; }
    .ep-datatable tr { border-bottom: 2px solid #c4b2d0; padding: 6px 0; }
    .ep-datatable td { padding: 4px 8px; }
    .ep-datatable td::before {
        content: attr(data-label);
        display: block;
        font-weight: bold;
        color: var(--ep-brown);
        font-size: 10px;
        text-transform: uppercase;
    }
    .ep-datatable tfoot td::before { content: none; }
}

/* ---------- Welcome page layout ---------- */
.ep-welcome-grid {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.ep-welcome-grid .ep-welcome-side img { max-width: 100%; height: auto; }

.ep-welcome-text {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
}
.ep-welcome-text .ep-intro-img img { max-width: 100%; height: auto; }

@media (max-width: 600px) {
    .ep-welcome-grid, .ep-welcome-text {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------- Forms (quick search / propose name) ---------- */
.ep-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: center;
    margin-bottom: 10px;
}

.ep-field-group { display: flex; flex-direction: column; gap: 4px; }
.ep-field-group label { font-size: 12px; }

.ep-form input[type="text"],
.ep-form input[type="email"],
.ep-form select,
.ep-form textarea {
    font-size: 12px;
    font-family: Arial;
}

@media (max-width: 600px) {
    .ep-form-row { flex-direction: column; align-items: stretch; }
}

.ep-required { color: #ff0000; }

/* ---------- Propose name fieldset ---------- */
.ep-propose-fieldset {
    border: 1px solid #ccc;
    padding: 10px 15px;
}
.ep-propose-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    padding: 6px 0;
}
.ep-propose-row label { min-width: 180px; font-size: 12px; }
@media (max-width: 600px) {
    .ep-propose-row { flex-direction: column; align-items: stretch; }
    .ep-propose-row label { min-width: 0; }
}

/* ---------- Name detail card ---------- */
.ep-namecard {
    display: flex;
    gap: 15px;
    padding: 10px;
    align-items: flex-start;
}
.ep-namecard--female { background-color: var(--ep-pink-bg); }
.ep-namecard--male { background-color: var(--ep-cream-bg); }
.ep-namecard--both { background-color: var(--ep-lavender-bg); }

.ep-namecard-photo img { display: block; max-width: 169px; height: auto; }

.ep-namecard-body { flex: 1 1 auto; min-width: 0; }

.ep-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px dotted rgba(0,0,0,0.08);
}
.ep-field dt {
    flex: 0 0 160px;
    font-weight: bold;
    font-size: 12px;
    color: var(--ep-brown);
}
.ep-field dd { margin: 0; flex: 1 1 auto; font-size: 12px; }

.ep-name-value {
    font-size: 28px;
    font-weight: normal;
    font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    color: var(--ep-purple);
}

@media (max-width: 600px) {
    .ep-namecard { flex-direction: column; align-items: center; text-align: center; }
    .ep-field { flex-direction: column; gap: 2px; }
    .ep-field dt { flex: none; }
    #dv2356 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 4px;
        text-align: center;
    }
}

/* ---------- Star rating widget (was <ul class=srating>) ---------- */
.ep-stars {
    position: relative;
    width: 100px;
    height: 20px;
    display: inline-block;
    background: url(../images/babyrating.gif) top left repeat-x;
}
.ep-star {
    position: absolute;
    top: 0;
    height: 20px;
    width: 20px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    text-indent: -9000px;
    overflow: hidden;
    cursor: pointer;
    z-index: 2;
}
.ep-star:hover {
    background: url(../images/babyrating.gif) 0 -20px repeat-x;
    z-index: 3;
}
.ep-star--1 { left: 0; }
.ep-star--1:hover { width: 20px; }
.ep-star--2 { left: 20px; }
.ep-star--2:hover { width: 40px; }
.ep-star--3 { left: 40px; }
.ep-star--3:hover { width: 60px; }
.ep-star--4 { left: 60px; }
.ep-star--4:hover { width: 80px; }
.ep-star--5 { left: 80px; }
.ep-star--5:hover { width: 100px; }

@media (max-width: 600px) {
    .ep-stars { width: 150px; height: 30px; background-size: 150px auto; }
    .ep-star { height: 30px; width: 30px; }
    .ep-star--1 { left: 0; } .ep-star--1:hover { width: 30px; }
    .ep-star--2 { left: 30px; } .ep-star--2:hover { width: 60px; }
    .ep-star--3 { left: 60px; } .ep-star--3:hover { width: 90px; }
    .ep-star--4 { left: 90px; } .ep-star--4:hover { width: 120px; }
    .ep-star--5 { left: 120px; } .ep-star--5:hover { width: 150px; }
}

/* ---------- Google sign-in button (moved out of nameDetail.php inline <style>) ---------- */
.ep-google-btn-wrap { position: relative; width: 170px; height: 26px; margin-top: 4px; }
.ep-google-btn {
    width: 170px; height: 26px; background: var(--ep-purple); color: #ffffff;
    border: 1px solid #1b3550; border-radius: 999px;
    font-family: Verdana, Arial, sans-serif; font-size: 11px;
    cursor: pointer; text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ep-google-btn-wrap:hover .ep-google-btn { background: #fd6734; border-color: #e0551f; }
.ep-google-btn-wrap:active .ep-google-btn { background: #d94a1b; border-color: #c94319; }
.ep-google-btn-real {
    position: absolute; top: 0; left: 0; opacity: 0;
}

@media (max-width: 600px) {
    .ep-google-btn-wrap { margin-left: auto; margin-right: auto; }
    #divGoogleLogin { text-align: center; }
}

/* ---------- Footer ---------- */
.ep-footer {
    text-align: center;
    margin-top: 15px;
    padding-bottom: 15px;
}

/* ---------- Propose/login popups ---------- */
#divProposeFrm {
    position: absolute;
    visibility: hidden;
    width: 90%;
    max-width: 600px;
    left: 5%;
    top: 50px;
    background-color: #FFFFFF;
    border: 1px dashed #CCCCCC;
    padding: 10px;
}
#divLoginFrm {
    position: absolute;
    visibility: hidden;
    width: 85%;
    max-width: 250px;
    background-color: #eadef1;
    padding: 10px 0 10px 20px;
}
@media (max-width: 600px) {
    #divProposeFrm { left: 5%; top: 40px; }
}