/*
Theme Name: My Family Log
Theme URI: https://myfamilylog.com
Author: My Family Log
Description: Every story, safely kept. A private family archive and curated-sharing platform.
Version: 2.80.2
Text Domain: mfl
*/

:root{
    --mfl-primary: #5C3A21;      /* deep walnut brown */
    --mfl-primary-dark: #3E2716;
    --mfl-accent: #B8863B;       /* antique gold */
    --mfl-accent-light: #D9B87A;
    --mfl-bg: #FBF7F1;
    --mfl-card: #FFFFFF;
    --mfl-ink: #2B211A;
    --mfl-ink-soft: #6B5D4F;
    --mfl-border: #E4D9C8;
    --mfl-success: #4C7A51;
    --mfl-danger: #A23B2E;
    --mfl-font-head: 'Playfair Display', Georgia, serif;
    --mfl-font-body: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    --mfl-radius: 10px;
    --mfl-shadow: 0 4px 18px rgba(43,33,26,0.10);
    --mfl-max-width: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; overflow-x: hidden; }

body{
    margin:0;
    font-family: var(--mfl-font-body);
    color: var(--mfl-ink);
    background: var(--mfl-bg);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
}

/* Prevent any form control (especially <select> with long option text) from
   forcing horizontal overflow on narrow screens -- a very common, easy-to-miss
   cause of mobile pages looking "broken" with a horizontal scrollbar. */
input, select, textarea, button{ max-width: 100%; min-width: 0; }

h1,h2,h3,h4,h5{
    font-family: var(--mfl-font-head);
    color: var(--mfl-primary-dark);
    line-height: 1.25;
    margin: 0 0 .5em;
}

a{ color: var(--mfl-primary); }
a:hover{ color: var(--mfl-accent); }

img{ max-width:100%; display:block; }

.mfl-container{
    max-width: var(--mfl-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* Accessibility */
.skip-link{
    position:absolute; left:-999px; top:auto;
    background:var(--mfl-primary); color:#fff; padding:10px 16px;
    z-index: 10000; border-radius: 0 0 6px 0;
}
.skip-link:focus{ left:0; top:0; }

:focus-visible{
    outline: 3px solid var(--mfl-accent);
    outline-offset: 2px;
}

.screen-reader-text{
    position:absolute!important; width:1px;height:1px;overflow:hidden;
    clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* Buttons */
.mfl-btn{
    display:inline-block;
    font-family: var(--mfl-font-body);
    font-weight:600;
    padding: 12px 26px;
    border-radius: 999px;
    border: 2px solid var(--mfl-primary);
    background: var(--mfl-primary);
    color:#fff;
    text-decoration:none;
    cursor:pointer;
    font-size: 15px;
    transition: all .15s ease;
}
.mfl-btn:hover{ background: var(--mfl-primary-dark); border-color: var(--mfl-primary-dark); color:#fff; }
.mfl-btn-outline{ background:transparent; color: var(--mfl-primary); }
.mfl-btn-outline:hover{ background: var(--mfl-primary); color:#fff; }
.mfl-btn-gold{ background: var(--mfl-accent); border-color: var(--mfl-accent); color:#fff; }
.mfl-btn-gold:hover{ background:#9C6F2C; border-color:#9C6F2C; }
.mfl-btn-sm{ padding:8px 16px; font-size:13px; }
.mfl-btn-xs{ padding:5px 12px; font-size:12px; border-width:1px; }
.mfl-btn-danger{ background: var(--mfl-danger); border-color: var(--mfl-danger); }
.mfl-box-divider{ border:none; border-top:1px solid var(--mfl-border); margin:0 0 16px; }

/* Locket / keepsake card motif -- signature visual element */
.mfl-locket-card{
    background: var(--mfl-card);
    border-radius: var(--mfl-radius);
    box-shadow: var(--mfl-shadow);
    position: relative;
    padding: 28px;
    border: 1px solid var(--mfl-border);
}
@media (max-width:600px){
    .mfl-locket-card{ padding: 18px; }
}
.mfl-locket-card::before{
    content: none;
}
.mfl-locket-card::after{
    content:"";
    position:absolute; inset: 6px;
    border: 1px solid var(--mfl-accent-light);
    border-radius: calc(var(--mfl-radius) - 3px);
    pointer-events:none;
    opacity:.5;
}

@media (max-width: 782px){
    .mfl-container{ padding: 0 16px; }
}