/* ==========================================================================
   About Me Look (S625) - Tom, 2026-11-07: "How did you get this all dark? ...
   I want that added into the system so anybody can do it."

   Chris's profile got its look from a <style> block typed into his About Me.
   This file is the same look as a preset any Profile Page Upgrade member can
   switch on from Configuration (system/php/locallib/profile_look.php):

   - the white About Me panel turns dark and the member's About Me runs edge
     to edge (their own top-level boxes lose their max-width);
   - text defaults to light, links and headings take the chosen accent;
   - the starter layout's .mh-about-* blocks are styled here, so a member
     gets Chris's hero / cards / buttons with no CSS of their own.

   Applies only while the About Me tab is showing: profile_new_layout.php puts
   .mh-look-on on .profile-content-area then, and takes it off for every other
   tab, the editor and Configuration (those are built for the white panel).
   The same rules style the About Me editor (body.mh-look-editor) so a member
   edits on the background visitors will see.
   ========================================================================== */

/* Accent presets - the only colours a member can choose. */
.profile-look-accent-gold  { --pl-accent: #e8bb51; --pl-accent-ink: #1a1405; }
.profile-look-accent-blue  { --pl-accent: #85ddfb; --pl-accent-ink: #06202b; }
.profile-look-accent-green { --pl-accent: #7fd67a; --pl-accent-ink: #0b2209; }
.profile-look-accent-ember { --pl-accent: #f0a24a; --pl-accent-ink: #2a1503; }

.profile-look-fulldark,
body.mh-look-editor {
    --pl-bg: #0f1218;
    --pl-surface: #171c25;
    --pl-line: #2b3342;
    --pl-text: #e6e9ee;
    --pl-text-dim: #b7bfcb;
}

/* --- The panel ----------------------------------------------------------- */
.profile-look-fulldark .profile-content-area.mh-look-on {
    background: var(--pl-bg);
    border-color: var(--pl-line);
    padding: 0;
}
.profile-look-fulldark .profile-content-area.mh-look-on #column_main > .mh-about-bio,
.profile-look-fulldark .profile-content-area.mh-look-on .mh-about-bio-inner {
    padding: 0 !important;
}
.profile-look-fulldark .profile-content-area.mh-look-on .profile-bio-edit-btn {
    z-index: 5;
}

/* --- The member's own About Me ------------------------------------------ */
.mh-look-on .mh-about-bio-inner,
body.mh-look-editor {
    color: var(--pl-text);
    background: var(--pl-bg);
    font-size: 16px;
    line-height: 1.6;
}
body.mh-look-editor { margin: 0; padding: 0; }

/* Edge to edge: top-level boxes the member drew narrower (e.g. max-width:640px;
   margin:0 auto) fill the panel. Only direct children - nothing inside them. */
.mh-look-on .mh-about-bio-inner > div,
.mh-look-on .mh-about-bio-inner > section,
.mh-look-on .mh-about-bio-inner > table,
body.mh-look-editor > div,
body.mh-look-editor > section,
body.mh-look-editor > table {
    max-width: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Plain paragraphs typed straight into the editor get side room. */
.mh-look-on .mh-about-bio-inner > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, hr, pre),
body.mh-look-editor > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, hr, pre) {
    margin-left: 36px;
    margin-right: 36px;
}
.mh-look-on .mh-about-bio-inner > :first-child:is(p, h1, h2, h3, h4, h5, h6),
body.mh-look-editor > :first-child:is(p, h1, h2, h3, h4, h5, h6) { margin-top: 32px; }
.mh-look-on .mh-about-bio-inner > :last-child:is(p, ul, ol, blockquote),
body.mh-look-editor > :last-child:is(p, ul, ol, blockquote) { margin-bottom: 32px; }

:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) :is(h1, h2, h3, h4) { color: #fff; }
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) a { color: var(--pl-accent); }
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) hr { border: 0; border-top: 1px solid var(--pl-line); }

/* --- Starter layout (mh_profile_look_starter_html) ------------------------ */
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about { font-family: Arial, Helvetica, sans-serif; }
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-hero {
    padding: 52px 40px 44px;
    background:
        radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--pl-accent) 20%, transparent), transparent 46%),
        linear-gradient(135deg, var(--pl-surface), var(--pl-bg) 75%);
    border-bottom: 1px solid var(--pl-line);
}
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-eyebrow {
    color: var(--pl-accent); font-size: 12px; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; margin: 0 0 14px;
}
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-name {
    font-size: clamp(32px, 5vw, 50px); line-height: 1.08; letter-spacing: -.03em; color: #fff; margin: 0 0 10px;
}
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-role {
    font-size: 20px; color: var(--pl-accent); font-weight: 700; margin: 0 0 24px;
}
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-lead {
    font-size: 20px; line-height: 1.5; max-width: 780px; color: #fff; margin: 0;
}
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-body { padding: 36px 40px 40px; }
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-body p { color: var(--pl-text-dim); font-size: 17px; margin: 0 0 18px; max-width: 980px; }
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-body h2 { font-size: 25px; line-height: 1.25; margin: 34px 0 16px; }
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-cards {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 32px;
}
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-card {
    background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: 12px; padding: 22px 20px;
}
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-card h3 { font-size: 17px; color: var(--pl-accent); margin: 0 0 10px; }
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-card p { font-size: 15px; margin: 0; }
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-closing {
    font-size: 18px; color: var(--pl-text); border-left: 3px solid var(--pl-accent); padding-left: 18px; margin: 28px 0;
}
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-links { margin-top: 26px; }
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) a.mh-about-btn {
    display: inline-block; padding: 11px 17px; margin: 0 8px 8px 0; border-radius: 8px; text-decoration: none;
    font-size: 14px; font-weight: 700; color: var(--pl-text); border: 1px solid var(--pl-text-dim);
}
:is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) a.mh-about-btn-primary {
    background: var(--pl-accent); color: var(--pl-accent-ink); border-color: var(--pl-accent);
}
@media (max-width: 640px) {
    :is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-hero { padding: 34px 22px; }
    :is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-body { padding: 26px 22px; }
    :is(.mh-look-on .mh-about-bio-inner, body.mh-look-editor) .mh-about-cards { grid-template-columns: 1fr; }
    .mh-look-on .mh-about-bio-inner > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, hr, pre) { margin-left: 22px; margin-right: 22px; }
}

/* --- The Configuration section ------------------------------------------- */
.profile-look-config { border-top: 1px solid #ddd; padding-top: 12px; margin-bottom: 20px; }
.profile-look-config h4 { margin: 0 0 6px; font-size: 14px; font-weight: bold; }
.profile-look-badge {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; vertical-align: 1px;
    background: #2f4370; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
}
.profile-look-help { margin: 0 0 10px; color: #555; font-size: 12px; line-height: 1.5; }
.profile-look-inline { display: inline-block; margin: 0 0 0 10px; max-width: 520px; vertical-align: middle; }
.profile-look-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.profile-look-label { width: 60px; font-weight: bold; font-size: 12px; color: #333; }
.profile-look-choice,
.profile-look-accent {
    display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; cursor: pointer;
    background: #fff; color: #222; border: 2px solid #ccc; border-radius: 4px;
    font-family: 'Tahoma', 'Poppins', Geneva, sans-serif; font-size: 12px;
}
.profile-look-choice.is-on,
.profile-look-accent.is-on { border-color: #3399ff; box-shadow: 0 0 10px 3px #3399ff; }  /* the Page Color Design glow */
.profile-look-choice[disabled],
.profile-look-accent[disabled],
.pl-sm-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.profile-look-swatch { width: 26px; height: 16px; border-radius: 3px; border: 1px solid #999; background: #fff; }
.profile-look-choice-full_dark .profile-look-swatch { background: linear-gradient(135deg, #2a3242, #0f1218); border-color: #0f1218; }
.profile-look-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.35); }

/* SM.BUTTON (Tom's button protocol S572-DRL-01; same skin as .mh-sm-btn in
   homepage.css, which the profile page does not load). */
.pl-sm-btn {
    display: inline-block; height: 24px; background: #6d83b4; color: #fff; border: 1px solid #121c31; border-radius: 4px;
    padding: 3px 10px; font-family: 'Tahoma', 'Poppins', Geneva, sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .4px; line-height: 1.42857; text-transform: uppercase; white-space: nowrap; cursor: pointer;
}
.pl-sm-btn:hover:not([disabled]) { filter: brightness(1.1); }
.pl-sm-btn:focus-visible { outline: 2px solid #e9bc47; outline-offset: 2px; }