/* Pink (beta) profile theme - work in progress.
   Loaded after base.css, and only on the profile page of a user who picked this theme (see lib/Themes.php),
   so these rules override the default dark look without needing to be scoped.

   Cartoony look: flat colours, thick dark outlines and chunky offset shadows on everything that sits
   on the page (modules, panels, buttons, the profile picture). */

:root {
    --pink-outline: #4c4c4c;
    --pink-shadow: 9px 4px 10px -1px #000000;       /* modules, panels, popup */
    --pink-shadow-small: 4px 3px 5px -1px #000000;  /* buttons, profile picture */
    --pink-shadow-pressed: 1px 1px 2px -1px #000000;
    --pink-heading: #46614a;
    --pink-link: #008986;
    --pink-link-visited: #005f5d; /* same aqua, darker */
    --pink-text: #4e1901;
}

html, body {
    background: #cd7474;
    color: #000000;
}

body {
    background-color: #f9d8d8;
    padding: 0 0px;
    border-radius: 56px;
}

main {
    padding: 20px;
}

/* Links everywhere on the page, so they don't fall back to the browser's blue/purple */
a {
    color: var(--pink-link);
}

a:visited {
    color: var(--pink-link-visited);
}

nav {
    border-bottom: none;
}

nav a, nav a:visited {
    margin-right: 16px;
    color: #2f4232;
}

nav>a::after {
    content: "|";
    color: #000000;
    margin-left: 16px;
}

nav > a:last-child::after {
    content: none !important;
}

header#site-nav {
    border-bottom: 1px solid rgb(0 0 0 / 40%);
}

/* The spacer <br> under the nav isn't needed with the border above */
#site-nav > br {
    display: none;
}

hr {
    height: 3px;
    border-radius: 999px;
    background-color: var(--pink-outline);
}

h3, p, li {
    color: #000000;
}

/* Profile header - name, welcome message, age and location. .welcome is listed separately because
   base.css colours it with a more specific selector. */
.profile-details-text h1,
.profile-details-text p,
.profile-details-text .welcome {
    color: #000000;
}

.profile-pic {
    border: 3px solid var(--pink-outline);
    box-shadow: var(--pink-shadow-small);
}

/* --- Modules --- */

.module {
    border: 3px solid var(--pink-outline);
    border-radius: 38px;
    background-color: #e48686;
    box-shadow: var(--pink-shadow);
}

/* Headings inside a module's content (e.g. Markdown headings in a text module) - a little smaller than
   the title bar so they don't compete with it */
.module-content h1, .module-content h2, .module-content h3,
.module-content h4, .module-content h5, .module-content h6 {
    color: var(--pink-heading);
    font-size: 1rem;
}

.module p, .module li {
    color: var(--pink-text);
}

.module a {
    color: var(--pink-link);
}

/* A darker shade of the same aqua, so a module's links don't mix two different colours.
   (Browsers ignore transparency on visited links, so a faded colour isn't an option.) */
.module a:visited {
    color: var(--pink-link-visited);
}

/* Blockquotes as a lighter pink speech-bubble-ish box, outlined like everything else, with green marks */
.module-content blockquote {
    background: #f4b3b3;
    border: 2px solid var(--pink-outline);
    border-radius: 18px;
    box-shadow: var(--pink-shadow-small);
}

.module-content blockquote::before,
.module-content blockquote::after {
    color: var(--pink-heading);
}

/* Side padding is wider than base.css's 15px so the text clears the large rounded corners - title and
   content use the same value so they stay lined up. */
.module-content {
    border-radius: 0 0 24px 24px;
    padding-left: 24px;
    padding-right: 24px;
}

.module-title {
    padding: 8px 24px;
    background: #d97474;
    border-bottom: 3px solid var(--pink-outline);
    border-radius: 35px 35px 0 0; /* just inside .module's 38px corners and 3px border */
}

.module .module-title h3 {
    color: #2f4232;
}

.module.manage-mode .module-title {
    padding-right: 90px;
}

.module-manage-overlay {
    right: 22px;
}

/* Keep the scrollbar inside the rounded module instead of running along its edge and through the
   corners: the track stops short of the bottom curve, and a transparent border (not painted,
   because of background-clip) moves the 6px visible thumb in from the right edge. */
.module-content::-webkit-scrollbar {
    width: 14px;
}

.module-content::-webkit-scrollbar-track {
    margin: 4px 0 20px; /* only the bottom corners are rounded now - the title bar covers the top */
}

.module-content::-webkit-scrollbar-thumb {
    background-color: var(--pink-outline);
    border: 3px solid transparent;
    border-right-width: 5px;
    background-clip: padding-box;
}

/* --- Buttons ---
   Outlined with a small chunky shadow, and pushed "into" the page while clicked. */

.button,
#save-details-btn {
    background-color: var(--pink-heading);
    color: #ffffff;
    border: 2px solid var(--pink-outline);
    border-radius: 999px;
    box-shadow: var(--pink-shadow-small);
}

/* .button is also used on links (e.g. Manage Page) - keep their text white once visited */
.button:visited {
    color: #ffffff;
}

.button:hover {
    background-color: #5b7d60;
}

.button:active,
#save-details-btn:active:not(:disabled),
.edit-btn:active,
.delete-btn:active {
    transform: translate(2px, 2px);
    box-shadow: var(--pink-shadow-pressed);
}

.button.secondary,
.remove-pic-btn {
    background-color: var(--pink-outline) !important;
    color: #ffffff !important;
}

.button.secondary:hover {
    background-color: #666666 !important;
}

/* Details Save button has no .button class, so it would otherwise be the browser's default grey */
#save-details-btn {
    font-weight: bold;
    cursor: pointer;
}

.form-actions button:disabled {
    color: #ffffff;
    opacity: 0.4;
    box-shadow: none;
}

.edit-btn {
    background: var(--pink-outline);
    color: #ffffff;
}

.edit-btn,
.delete-btn {
    box-shadow: var(--pink-shadow-small);
}

/* --- Manage mode ---
   The edit panel, module popup and inputs are dark in base.css, which leaves this theme's black text
   unreadable on them - restyle them to match the pink modules instead. */

.manage-profile-form {
    background: #e48686;
    border: 3px dashed var(--pink-outline);
    border-radius: 38px;
    padding: 24px;
    box-shadow: var(--pink-shadow);
}

.manage-profile-form label,
#file-chosen {
    color: var(--pink-text);
}

.back-to-profile-link,
.add-link-line {
    color: var(--pink-link);
}

/* Every text box and dropdown in the edit panel and module popup */
.manage-profile-form input[type="text"],
.manage-profile-form input[type="number"],
.manage-profile-form textarea,
.manage-profile-form .appearance-picker select,
.form-group input,
.form-group select,
.link-item input,
#text-editor textarea {
    background: #f9d8d8;
    border: 2px solid var(--pink-outline);
    border-radius: 8px;
    color: #000000;
    padding: 4px 8px;
}

.manage-profile-form input[disabled],
.manage-profile-form textarea[disabled] {
    color: #8a5a5a;
}

.module.manage-mode {
    border-color: var(--pink-outline);
    border-style: dashed;
}

.modal-content {
    background: #f9d8d8;
    border: 3px solid var(--pink-outline);
    border-radius: 38px;
    padding: 24px 28px;
    color: var(--pink-text);
    box-shadow: var(--pink-shadow);
}

.modal-header,
.modal-footer {
    border-color: rgb(0 0 0 / 20%);
}

.modal-header h3 {
    color: var(--pink-heading);
}

.add-module-permanent {
    border: 3px dashed var(--pink-outline);
    border-radius: 38px;
    background: rgb(255 255 255 / 25%);
    box-shadow: var(--pink-shadow);
}

.add-module-permanent:hover {
    border-color: var(--pink-heading);
    background: rgb(255 255 255 / 45%);
}

.empty-state-message h3 {
    color: var(--pink-heading);
}

.empty-state-message p {
    color: var(--pink-text);
}

#placement-ghost {
    border-color: var(--pink-heading);
    background: rgb(70 97 74 / 12%);
    border-radius: 38px;
}