/* ============================================================
   FoodJot — About / Contact / Legal shared styles
   ============================================================ */

.fjp-section { padding: 72px 0; }
.fjp-section:nth-of-type(even) { background: #F8F5F1; }
.fjp-section__eyebrow {
    display: inline-block;
    font: 800 11px/1 Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase;
    color: #F07A24; margin-bottom: 14px;
}

/* ─── Shared hero ─── */
.fjp-hero {
    position: relative; overflow: hidden;
    background: #0F0F0F;
    width: 100vw; margin-left: calc(50% - 50vw);
    min-height: 58vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 90px 20px;
}
.fjp-hero__bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    animation: fjp-kenburns 12s ease-out forwards;
    will-change: transform;
}
@keyframes fjp-kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }
.fjp-hero__bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}
.fjp-hero__veil {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(15,15,15,.78), rgba(15,15,15,.28) 55%, rgba(15,15,15,.35));
}
.fjp-hero--legal { min-height: 42vh; }
.fjp-hero__content { position: relative; z-index: 2; max-width: 760px; }
.fjp-hero__eyebrow {
    display: inline-block;
    font: 800 11px/1 Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase;
    color: #FDB843; margin-bottom: 16px;
}
.fjp-hero__title {
    font: 700 clamp(2.4rem, 5vw, 3.8rem)/1.08 Georgia, serif;
    color: #fff; margin: 0 0 16px;
}
.fjp-hero__title em { color: #FDB843; font-style: italic; }
.fjp-hero__sub { font: 15px/1.75 Arial, sans-serif; color: rgba(255,248,238,.78); margin: 0 auto; max-width: 560px; }

/* ─── About: story ─── */
.fjp-story__grid {
    display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr);
    gap: 48px; align-items: center;
}
.fjp-story__text h2 { font: 700 clamp(1.8rem,3vw,2.5rem)/1.18 Georgia, serif; color: #0F0F0F; margin: 0 0 18px; }
.fjp-story__text h2 em { color: #F07A24; font-style: italic; }
.fjp-story__text p  { font: 15px/1.8 Arial, sans-serif; color: #57534F; margin: 0 0 14px; }
.fjp-story__sig { font: italic 700 15px Georgia, serif; color: #0F0F0F !important; margin-top: 22px !important; }
.fjp-story__media img { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 18px 44px rgba(15,15,15,.14); }

/* ─── About: team grid ─── */
.fjp-team__head { text-align: center; margin-bottom: 44px; }
.fjp-team__head h2 { font: 700 clamp(1.8rem,3.2vw,2.5rem)/1.15 Georgia, serif; color: #0F0F0F; margin: 0; }
.fjp-team__grid {
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px;
}
.fjp-team__card {
    background: #fff; border: 1px solid #E5E0D8; border-radius: 14px;
    padding: 26px 22px; text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.fjp-team__card:hover { border-color: #FDB843; }
.fjp-team__photo {
    width: 132px; height: 132px; object-fit: cover; border-radius: 50%;
    margin: 0 auto 16px; display: block;
    border: 3px solid #F8F5F1; box-shadow: 0 8px 22px rgba(15,15,15,.12);
    background: #F0EDE8;
}
.fjp-team__card { display: block; text-decoration: none !important; color: inherit !important; }
.fjp-team__photo-wrap { display: block; }
.fjp-team__mono {
    width: 132px; height: 132px; border-radius: 50%;
    margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #FDB843, #F07A24);
    border: 3px solid #F8F5F1; box-shadow: 0 8px 22px rgba(15,15,15,.12);
    font: 700 52px/1 Georgia, serif; color: #0F0F0F;
    transition: transform .3s ease;
}
.fjp-team__card:hover .fjp-team__mono { transform: scale(1.06); }
.fjp-team__view {
    display: inline-block; margin-top: 12px;
    font: 800 10.5px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase;
    color: #F07A24;
}
.fjp-team__card:hover .fjp-team__view { color: #0F0F0F; }
.fjp-team__name { font: 700 17px Georgia, serif; color: #0F0F0F; margin: 0 0 4px; }
.fjp-team__role {
    display: inline-block;
    font: 800 9.5px/1 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase;
    color: #0F0F0F; background: linear-gradient(135deg, #FDB843, #F07A24);
    padding: 4px 9px; border-radius: 3px; margin-bottom: 12px;
}
.fjp-team__bio { font: 13px/1.65 Arial, sans-serif; color: #7A7A7A; margin: 0; }

/* ─── Numbers (about) ─── */
.fjp-numbers { text-align: center; }
.fjp-numbers__row { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; margin-top: 18px; }
.fjp-stat__label {
    display: block;
    font: 700 11px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase;
    color: #7A7A7A; margin-top: 8px;
}

/* ─── Contact page ─── */
.fjp-contact-grid {
    display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 36px; align-items: start;
}
.fjp-contact-form-wrap {
    background: #fff; border: 1px solid #E5E0D8; border-radius: 16px;
    padding: 36px; box-shadow: 0 4px 24px rgba(0,0,0,.04);
}
.fj-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.fjp-alert {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px 20px; border-radius: 12px; margin-bottom: 24px;
    font: 15px/1.55 Arial, sans-serif;
    animation: fj-fadeInUp .5s ease-out;
}
.fjp-alert--ok  { background: rgba(253,184,67,.12); border: 1px solid rgba(253,184,67,.4); color: #222; }
.fjp-alert--err { background: rgba(192,57,43,.08);  border: 1px solid rgba(192,57,43,.25); color: #c0392b; }

.fjp-contact-side { display: flex; flex-direction: column; gap: 22px; }
.fjp-info-card {
    background: #fff; border: 1px solid #E5E0D8; border-radius: 15px; padding: 26px;
    transition: transform .3s ease, box-shadow .3s ease;
}
.fjp-info-card h3 { font: 700 18px Georgia, serif; color: #0F0F0F; margin: 0 0 10px; }
.fjp-info-card p { font: 14px/1.7 Arial, sans-serif; color: #57534F; margin: 0 0 6px; }
.fjp-info-card a { color: #F07A24; }
.fjp-muted { color: #7A7A7A !important; font-size: 12.5px !important; }
.fjp-socials { display: flex; gap: 10px; margin-top: 10px; }
.fjp-socials a {
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #F0EDE8; color: #222; text-decoration: none;
    transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.fjp-socials a:hover { background: #FDB843; color: #0F0F0F; transform: translateY(-3px); box-shadow: 0 6px 14px rgba(253,184,67,.35); }
.fjp-quick { list-style: none; margin: 0; padding: 0; }
.fjp-quick li { margin: 7px 0; }
.fjp-quick a { font: 14px/1.5 Arial, sans-serif; color: #222; text-decoration: none; }
.fjp-quick a::before { content: '→'; color: #F07A24; margin-right: 8px; font-weight: 700; }

/* contact form */
.fj-contact-form { display: flex; flex-direction: column; gap: 18px; }
.fj-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fj-form-group { display: flex; flex-direction: column; gap: 7px; }
.fj-form-group label { font: 700 11.5px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #222; }
.fj-req { color: #F07A24; }
.fj-form-group input,
.fj-form-group select,
.fj-form-group textarea {
    font: 15px/1.5 Arial, sans-serif; color: #222;
    padding: 13px 15px;
    border: 1.5px solid #E5E0D8; border-radius: 10px;
    background: #fff; outline: none; transition: border-color .25s ease, box-shadow .25s ease;
    appearance: none; webkit-appearance: none;
}
.fj-form-group select { background-image: linear-gradient(45deg, transparent 50%, #F07A24 50%), linear-gradient(135deg, #F07A24 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 14px) calc(50% - 3px); background-size: 6px 6px; background-repeat: no-repeat; }
.fj-form-group input:focus,
.fj-form-group select:focus,
.fj-form-group textarea:focus { border-color: #FDB843; box-shadow: 0 0 0 3px rgba(253,184,67,.16); }
.fj-form-group textarea { resize: vertical; min-height: 140px; }
.fj-btn-submit {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 10px;
    font: 800 13px/1 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase;
    color: #0F0F0F; background: linear-gradient(135deg, #FDB843, #F07A24);
    padding: 16px 28px; border: 0; border-radius: 10px; cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}
.fj-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(240,122,36,.35); }
.fj-btn-submit:disabled { cursor: not-allowed; transform: none; box-shadow: none; }

/* ─── FAQ ─── */
.fjp-faq__head { text-align: center; margin-bottom: 36px; }
.fjp-faq__head h2 { font: 700 clamp(1.7rem,3vw,2.3rem)/1.15 Georgia, serif; color: #0F0F0F; margin: 0; }
.fjp-faq__list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.fj-faq__item {
    background: #fff; border: 1px solid #E5E0D8; border-radius: 12px; overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.fj-faq__item.open { border-color: #FDB843; box-shadow: 0 8px 22px rgba(15,15,15,.06); }
.fj-faq__q {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 18px 20px; background: none; border: 0; cursor: pointer; text-align: left;
    font: 700 15px/1.4 Georgia, serif; color: #0F0F0F;
}
.fj-faq__q svg { flex-shrink: 0; transition: transform .3s ease; color: #F07A24; }
.fj-faq__item.open .fj-faq__q svg { transform: rotate(180deg); }
.fj-faq__a {
    max-height: 0; overflow: hidden;
    transition: max-height .45s ease, padding .3s ease;
    padding: 0 20px;
}
.fj-faq__item.open .fj-faq__a { max-height: 320px; padding: 0 20px 18px; }
.fj-faq__a p { font: 14px/1.75 Arial, sans-serif; color: #57534F; margin: 0 0 6px; }

/* ─── Legal page ─── */
.fjp-legal__grid {
    display: grid; grid-template-columns: minmax(0,3fr) minmax(0,8fr); gap: 36px; align-items: start;
}
.fj-toc {
    position: sticky; top: 96px;
    background: #fff; border: 1px solid #E5E0D8; border-radius: 14px; padding: 22px;
    display: flex; flex-direction: column; gap: 2px;
}
.fj-toc__title {
    font: 800 10.5px/1 Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase;
    color: #F07A24; margin-bottom: 12px;
}
.fj-toc a {
    display: block; font: 600 13.5px/1.5 Arial, sans-serif; color: #57534F; text-decoration: none;
    padding: 8px 10px; border-left: 3px solid transparent; border-radius: 6px;
    transition: color .2s, background-color .2s, border-color .2s;
}
.fj-toc a:hover { color: #F07A24; background: #F8F5F1; }
.fj-toc a.active { color: #F07A24; border-left-color: #FDB843; background: #F8F5F1; font-weight: 800; }
.fjp-legal__card {
    background: #fff; border: 1px solid #E5E0D8; border-radius: 14px;
    padding: 30px 32px; margin-bottom: 22px;
    transition: background-color .3s ease, border-color .3s ease;
}
.fjp-legal__card:hover { background: #F8F5F1; border-color: #E0D8CC; }
.fjp-legal__card-title { font: 700 22px Georgia, serif; color: #0F0F0F; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid #F8F5F1; border-image: linear-gradient(90deg,#FDB843,#F07A24) 1; border-image-slice: 0 0 0 1 0; }
.fjp-legal__card-body { font: 15px/1.85 Arial, sans-serif; color: #3a3632; }
.fjp-legal__card-body p { margin: 0 0 14px; }
.fjp-legal__card-body li { margin-bottom: 8px; }
.fjp-legal__card-body a { color: #F07A24; }
.fjp-legal__meta {
    display: flex; flex-wrap: wrap; gap: 26px;
    font: 13.5px/1.7 Arial, sans-serif; color: #7A7A7A;
    padding: 18px 4px 4px; border-top: 1px solid #E5E0D8; margin-top: 6px;
}
.fjp-legal__meta a { color: #F07A24; }

/* ─── Responsive ─── */
@media (max-width: 991px) {
    .fjp-story__grid, .fjp-contact-grid, .fjp-legal__grid { grid-template-columns: 1fr; }
    .fjp-legal__toc { position: static; }
    .fjp-team__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .fjp-section { padding: 54px 0; }
    .fjp-team__grid { grid-template-columns: 1fr; }
    .fj-form-row { grid-template-columns: 1fr; }
    .fjp-contact-form-wrap, .fjp-legal__card { padding: 22px; }
    .fjp-numbers__row { gap: 28px; }
}


/* Hide broken legacy images hosted on offline postgeniuspro server */
img[src*='postgeniuspro.com'] { display: none !important; }