/* =========================================================
   WILD STORIES
   Base styles shared by Public and Members
   ========================================================= */

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

:root {
    --ws-background: #111111;
    --ws-text: #ffffff;

    /* Normal links */
    --ws-link: #ffffff;

    /* Hover / interactive state */
    --ws-hover: #bdbdbd;

    /* Special content accent:
       client quotes, selected Custom Monitor statuses */
    --ws-accent: #ffff99;

    --ws-border: rgba(255, 255, 255, 0.25);
  
  --ws-status-green: #9fcf8f;
  
}

/* Typography */
body,
input,
textarea,
select,
button {
    font-family: "Special Elite", cursive;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.card-header {
    font-family: "Special Elite", cursive;
    font-weight: 400;
}

/* Page */
body {
    background-color: var(--ws-background);
    color: var(--ws-text);
}

/* Main content */
.site-grid,
.grid-child,
main {
    color: var(--ws-text);
}

/* Links */
a {
    color: var(--ws-link);
}

a:hover,
a:focus {
    color: var(--ws-hover);
}

/* Sidebar modules */
.container-sidebar-right .card,
.container-sidebar-left .card {
    background: rgba(0, 0, 0, 0.45);
    color: var(--ws-text);
    border-color: var(--ws-border);
}

/* Module headings */
.container-sidebar-right .card-header,
.container-sidebar-left .card-header {
    background: rgba(0, 0, 0, 0.35);
    color: var(--ws-text);
    border-color: var(--ws-border);
}

/* Module body */
.container-sidebar-right .card-body,
.container-sidebar-left .card-body {
    background: transparent;
    color: var(--ws-text);
}

/* Article information */
.article-info,
.article-info dd,
.article-info dt {
    color: var(--ws-text);
}

.article-info a {
    color: var(--ws-link);
}

.article-info a:hover,
.article-info a:focus {
    color: var(--ws-hover);
}

/* Current breadcrumb item */
.breadcrumb-item.active {
    color: var(--ws-text);
}

/* Menu links */
.mod-menu a {
    color: var(--ws-text);
}

.mod-menu a:hover,
.mod-menu a:focus {
    color: var(--ws-hover);
}

/* =========================================================
   SUBMENU TOGGLES
   ========================================================= */

.mod-menu .mod-menu__toggle-sub {
    color: var(--ws-hover) !important;
}

.mod-menu .mod-menu__toggle-sub .icon-chevron-down,
.mod-menu .mod-menu__toggle-sub .icon-chevron-down::before {
    color: var(--ws-hover) !important;
}

.mod-menu .mod-menu__toggle-sub:hover,
.mod-menu .mod-menu__toggle-sub:focus,
.mod-menu .mod-menu__toggle-sub:hover .icon-chevron-down,
.mod-menu .mod-menu__toggle-sub:focus .icon-chevron-down,
.mod-menu .mod-menu__toggle-sub:hover .icon-chevron-down::before,
.mod-menu .mod-menu__toggle-sub:focus .icon-chevron-down::before {
    color: var(--ws-text) !important;
}

/* =========================================================
   BREADCRUMBS
   ========================================================= */

.breadcrumb {
    width: fit-content;
    max-width: 100%;

    background: rgba(0, 0, 0, 0.25);
    color: var(--ws-text);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.65rem 1rem;
    margin-bottom: 1.25rem;
}

.breadcrumb a {
    color: var(--ws-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
    color: var(--ws-hover);
}

.breadcrumb-item.active {
    color: var(--ws-text);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.55);
}

/* =========================================================
   JOOMLA SYSTEM MESSAGES
   ========================================================= */

.alert {
    background: rgba(0, 0, 0, 0.72);
    color: var(--ws-text);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

.alert a {
    color: var(--ws-link);
    text-decoration: underline;
}

.alert a:hover,
.alert a:focus {
    color: var(--ws-hover);
}

/* Information */
.alert-info {
    background: rgba(20, 28, 32, 0.82);
    border-color: rgba(180, 205, 215, 0.40);
}

/* Success */
.alert-success {
    background: rgba(20, 34, 24, 0.82);
    border-color: rgba(170, 205, 175, 0.40);
}

/* Warning */
.alert-warning {
    background: rgba(42, 36, 18, 0.86);
    border-color: rgba(200, 195, 155, 0.42);
}

/* Error */
.alert-danger {
    background: rgba(42, 22, 22, 0.86);
    border-color: rgba(205, 180, 180, 0.42);
}

/* =========================================================
   JOOMLA SYSTEM MESSAGE COMPONENT
   ========================================================= */

#system-message-container joomla-alert {
    background: rgba(0, 0, 0, 0.88);
    color: var(--ws-text);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: none;
}

/* Warning messages */
#system-message-container joomla-alert[type="warning"] {
    background: rgba(38, 31, 19, 0.92);
    border-color: rgba(180, 130, 65, 0.65);
}

/* Success / normal message */
#system-message-container joomla-alert[type="success"],
#system-message-container joomla-alert[type="message"] {
    background: rgba(20, 34, 24, 0.92) !important;
    color: var(--ws-text) !important;
    border-color: rgba(120, 170, 125, 0.55) !important;
}

/* Error / danger */
#system-message-container joomla-alert[type="error"],
#system-message-container joomla-alert[type="danger"] {
    background: rgba(42, 22, 22, 0.92) !important;
    color: var(--ws-text) !important;
    border-color: rgba(190, 100, 100, 0.60) !important;
}

/* Information / notice */
#system-message-container joomla-alert[type="info"],
#system-message-container joomla-alert[type="notice"] {
    background: rgba(20, 28, 32, 0.92) !important;
    color: var(--ws-text) !important;
    border-color: rgba(150, 170, 180, 0.50) !important;
}

/* Keep inner message area transparent */
#system-message-container joomla-alert .alert-wrapper,
#system-message-container joomla-alert .alert-message {
    background: transparent !important;
    color: var(--ws-text) !important;
}

/* Message text */
#system-message-container joomla-alert .alert-message,
#system-message-container joomla-alert .alert-wrapper {
    color: var(--ws-text) !important;
}

/* Links inside Joomla messages */
#system-message-container joomla-alert a {
    color: var(--ws-text) !important;
}

#system-message-container joomla-alert a:hover,
#system-message-container joomla-alert a:focus {
    color: var(--ws-hover) !important;
}

/* Close X */
#system-message-container joomla-alert .joomla-alert--close {
    color: var(--ws-text);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    font-family: "Special Elite", cursive;
    border-radius: 3px;
    box-shadow: none;
}

.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
    background: rgba(0, 0, 0, 0.72);
    color: var(--ws-text);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: rgba(35, 35, 35, 0.92);
    color: var(--ws-hover);
    border-color: var(--ws-hover);
    box-shadow: none;
}

/* =========================================================
   WILD STORIES CONTENT BUTTONS
   Legacy .button3 + migrated action links
   ========================================================= */

a.button3,
a.ws-button {
    display: inline-block;
    padding: 0.55rem 0.9rem;

    font-family: "Special Elite", cursive;
    line-height: 1.2;

    background: rgba(0, 0, 0, 0.72);
    color: var(--ws-text);

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 3px;

    text-decoration: none;
    box-shadow: none;
}

a.button3:hover,
a.button3:focus,
a.ws-button:hover,
a.ws-button:focus {
    background: rgba(35, 35, 35, 0.92);
    color: var(--ws-hover);
    border-color: var(--ws-hover);
    text-decoration: none;
}

/* =========================================================
   PUBLIC / MEMBERS BACKGROUNDS
   ========================================================= */

/* Public area */
body:has(.ws-public-marker) {
    background-image: url("../images/wildstories-public-background.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* Members area */
body:has(.ws-members-marker) {
    background-image: url("../images/wildstories-members-background.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* Section headers */
.ws-section-header {
    text-align: center;
}

.ws-section-header img {
    display: block;
    width: 100%;
    max-width: 1050px;
    height: auto;
    margin: 0 auto;
}

/* =========================================================
   FORMS
   ========================================================= */

/* Labels */
.form-label,
fieldset legend {
    color: var(--ws-text);
}

/* Text fields, email, password, textarea, selects */
.form-control,
.form-select {
    background-color: rgba(0, 0, 0, 0.62);
    color: var(--ws-text);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 3px;
}

/* Placeholder text */
.form-control::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

/* Focus */
.form-control:focus,
.form-select:focus {
    background-color: rgba(0, 0, 0, 0.78);
    color: var(--ws-text);
    border-color: var(--ws-hover);
    box-shadow: 0 0 0 0.15rem rgba(189, 189, 189, 0.15);
}

/* Help / description text */
.form-text,
.form-text.text-muted {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Checkboxes */
.form-check-input {
    background-color: rgba(0, 0, 0, 0.62);
    border-color: rgba(255, 255, 255, 0.45);
}

.form-check-input:checked {
    background-color: #777777;
    border-color: var(--ws-hover);
}

.form-check-input:focus {
    border-color: var(--ws-hover);
    box-shadow: 0 0 0 0.15rem rgba(189, 189, 189, 0.15);
}

/* Disabled / readonly fields */
.form-control:disabled,
.form-control[readonly] {
    background-color: rgba(40, 40, 40, 0.65);
    color: rgba(255, 255, 255, 0.65);
}

/* Browser autofill */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ws-text);
    caret-color: var(--ws-text);
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.72) inset;
    border-color: rgba(255, 255, 255, 0.35);
}

.form-control:-moz-autofill {
    color: var(--ws-text);
    caret-color: var(--ws-text);
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.72) inset;
    border-color: rgba(255, 255, 255, 0.35);
}

/* =========================================================
   LOGIN OPTIONS
   ========================================================= */

.com-users-login__options {
    margin-top: 1.5rem;
}

.com-users-login__options .list-group-item {
    background: rgba(0, 0, 0, 0.58);
    color: var(--ws-link);
    border-color: rgba(255, 255, 255, 0.18);
}

.com-users-login__options .list-group-item:hover,
.com-users-login__options .list-group-item:focus {
    background: rgba(25, 25, 25, 0.78);
    color: var(--ws-hover);
}



/* =========================================================
   ARTICLE PREVIEW IMAGES
   ========================================================= */

.blog-featured .blog-item .item-image img,
.com-content-category-blog .blog-item .item-image img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 480px;
    height: auto;
}

/* =========================================================
   ARTICLE INFO
   Wild Stories does not display Joomla article metadata
   ========================================================= */

.article-info {
    display: none !important;
}

/* =========================================================
   GLOBAL TYPOGRAPHY SCALE
   ========================================================= */

html {
    font-size: 17px;
}

body {
    line-height: 1.6;
}

/* =========================================================
   ARTICLE TYPOGRAPHY
   ========================================================= */

.com-content-article,
.blog-item {
    letter-spacing: 0.01em;
}

.com-content-article p,
.blog-item p {
    line-height: 1.7;
    margin-bottom: 1.3rem;
}

.com-content-article li,
.blog-item li {
    line-height: 1.65;
    margin-bottom: 0.45rem;
}

.com-content-article h2,
.blog-item h2 {
    line-height: 1.25;
    margin-top: 2.2rem;
    margin-bottom: 0.9rem;
}

.com-content-article h3,
.blog-item h3 {
    font-size: 1.35rem;
    line-height: 1.3;
    margin-top: 1.9rem;
    margin-bottom: 0.8rem;
}

.com-content-article h4,
.blog-item h4 {
    line-height: 1.35;
    margin-top: 1.6rem;
    margin-bottom: 0.7rem;
}

.com-content-article ul,
.com-content-article ol,
.blog-item ul,
.blog-item ol {
    margin-bottom: 1.3rem;
}

/* Responsive images inside articles */
.com-content-article img {
    max-width: 100%;
    height: auto;
}

/* =========================================================
   CUSTOM MONITOR
   ========================================================= */

.ws-monitor {
    max-width: 900px;
}

/* One customer/project */
.ws-monitor-project {
    margin: 0 0 1.5rem;
    padding: 1.1rem 1.25rem;

    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 3px solid rgba(255, 255, 255, 0.38);

    border-radius: 3px;
}

.ws-monitor-project h3 {
    margin: 0 0 0.8rem;
    font-size: 1.35rem;
    line-height: 1.25;
}

.ws-monitor-project p {
    margin-bottom: 0.65rem;
}

/* Labels such as Cast, Project */
.ws-monitor-label {
    font-weight: bold;
}

/* Production status */
.ws-monitor-status {
    color: var(--ws-accent);
    margin-top: 0.8rem;
}

.ws-monitor-status strong {
    color: var(--ws-text);
}

/* Project has reached scheduled shooting or a later stage */
.ws-monitor-status--green {
    color: var(--ws-status-green);
}

/* Button inside project card */
.ws-monitor-project .button3,
.ws-monitor-project .ws-button {
    margin-top: 0.35rem;
}

/* Section headings */
.ws-monitor > h2 {
    margin-top: 2.3rem;
    margin-bottom: 1rem;
}

/* =========================================================
   MEMBERS NAVIGATION UNDER HEADER
   ========================================================= */


/* Main navigation area */

body:has(.ws-members-marker) .container-top-a {
    width: calc(100% - 2rem);
    max-width: 1050px;

    margin: .8rem auto 1.4rem;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 0;
}

/* =========================================================
   PUBLIC NAVIGATION
   ========================================================= */

body:has(.ws-public-marker) .container-top-a {
    width: calc(100% - 2rem);
    max-width: 1050px;

    margin: .8rem auto 1.4rem;
    padding: 0;
}


/* =========================================================
   PUBLIC MENU
   ========================================================= */

body:has(.ws-public-marker) .ws-public-menu {
    width: 100%;
    margin: 0;
    padding: .45rem .65rem;

    background: rgba(0, 0, 0, .25);

    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .35rem;
}


/* Navbar */

body:has(.ws-public-marker) .ws-public-menu .navbar {
    width: 100%;
    margin: 0;
    padding: 0;
}

body:has(.ws-public-marker) .ws-public-menu .navbar-collapse {
    width: 100%;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 992px) {

    body:has(.ws-public-marker) .ws-public-menu .navbar-collapse {
        display: flex !important;
        justify-content: center;
    }

    body:has(.ws-public-marker) .ws-public-menu .mod-menu {
        width: 100%;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;

        justify-content: center;
        align-items: center;

        gap: .2rem 1rem;

        margin: 0;
        padding: 0;
    }

    body:has(.ws-public-marker) .ws-public-menu .mod-menu > li,
    body:has(.ws-public-marker) .ws-public-menu .mod-menu > .metismenu-item {
        width: auto;
        flex: 0 0 auto;

        margin: 0;
    }
}


/* =========================================================
   PUBLIC MENU TYPOGRAPHY
   ========================================================= */

body:has(.ws-public-marker) .ws-public-menu .mod-menu > li > a,
body:has(.ws-public-marker) .ws-public-menu .mod-menu > li > span {
    display: flex;
    align-items: center;

    padding: .45rem .75rem;

    color: var(--ws-text);
    text-decoration: none;

    font-size: 1.08rem;
    text-transform: uppercase;
    letter-spacing: .035em;

    border-radius: .2rem;
}


/* Hover */

body:has(.ws-public-marker) .ws-public-menu .mod-menu > li > a:hover,
body:has(.ws-public-marker) .ws-public-menu .mod-menu > li > a:focus {
    color: var(--ws-hover);

    background: rgba(255, 255, 255, .05);
}


/* Active */

body:has(.ws-public-marker) .ws-public-menu .mod-menu > li.current > a,
body:has(.ws-public-marker) .ws-public-menu .mod-menu > li.active > a {
    color: var(--ws-text);

    background: transparent;

    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .35);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991.98px) {

    body:has(.ws-public-marker) .container-top-a {
        width: calc(100% - 1rem);

        margin-top: .6rem;
        margin-bottom: 1rem;
    }

    body:has(.ws-public-marker) .ws-public-menu .navbar-toggler {
        display: block;

        margin: .15rem auto;
        padding: .35rem .55rem;

        color: var(--ws-text);

        background: rgba(0, 0, 0, .25);

        border-color: rgba(255, 255, 255, .25);
    }

    body:has(.ws-public-marker) .ws-public-menu .navbar-collapse {
        width: 100%;
    }

    body:has(.ws-public-marker) .ws-public-menu .mod-menu {
        margin-top: .5rem;
        padding: 0;
    }

    body:has(.ws-public-marker) .ws-public-menu .mod-menu > li > a,
    body:has(.ws-public-marker) .ws-public-menu .mod-menu > li > span {
        font-size: 1rem;
    }
}

/* =========================================================
   ACCOUNT
   ========================================================= */

body:has(.ws-members-marker) .ws-account {
    order: 1;

    width: 100%;
    margin: 0;
    padding: .35rem .75rem;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    background: rgba(0, 0, 0, .25);

    border: 1px solid rgba(255, 255, 255, .18);
    border-bottom: 0;

    border-radius: .35rem .35rem 0 0;
}


/* Login/logout form */

body:has(.ws-members-marker) .ws-account .mod-login-logout {
    width: auto;
    margin: 0;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
}

body:has(.ws-members-marker) .ws-account .mod-login-logout__login-greeting {
    margin: 0;
}

body:has(.ws-members-marker) .ws-account .mod-login-logout__button {
    margin: 0;
}

body:has(.ws-members-marker) .ws-account .btn {
    margin: 0;
    padding: .25rem .65rem;
}


/* =========================================================
   MAIN MENU
   ========================================================= */

body:has(.ws-members-marker) .ws-main-menu {
    order: 2;

    width: 100%;
    margin: 0;
    padding: .45rem .65rem;

    background: rgba(0, 0, 0, .25);

    border: 1px solid rgba(255, 255, 255, .18);

    border-radius: 0 0 .35rem .35rem;
}


/* Navbar itself */

body:has(.ws-members-marker) .ws-main-menu .navbar {
    width: 100%;
    margin: 0;
    padding: 0;
}

body:has(.ws-members-marker) .ws-main-menu .navbar-collapse {
    width: 100%;
}


/* =========================================================
   DESKTOP MENU
   ========================================================= */

@media (min-width: 992px) {

    body:has(.ws-members-marker) .ws-main-menu .navbar-collapse {
        display: flex !important;
        justify-content: center;
    }

    body:has(.ws-members-marker) .ws-main-menu .mod-menu {
        width: 100%;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;

        justify-content: center;
        align-items: center;

        gap: .1rem .2rem;

        margin: 0;
        padding: 0;
    }

    body:has(.ws-members-marker) .ws-main-menu .mod-menu > li,
    body:has(.ws-members-marker) .ws-main-menu .mod-menu > .metismenu-item {
        width: auto;
        flex: 0 0 auto;

        margin: 0;
    }
}


/* =========================================================
   MAIN MENU TYPOGRAPHY
   ========================================================= */

body:has(.ws-members-marker) .ws-main-menu .mod-menu > li > a,
body:has(.ws-members-marker) .ws-main-menu .mod-menu > li > span {
    display: flex;
    align-items: center;

    padding: .45rem .6rem;

    color: var(--ws-text);
    text-decoration: none;

    font-size: 1.08rem;
    text-transform: uppercase;
    letter-spacing: .035em;

    border-radius: .2rem;
}


/* Hover */

body:has(.ws-members-marker) .ws-main-menu .mod-menu > li > a:hover,
body:has(.ws-members-marker) .ws-main-menu .mod-menu > li > a:focus {
    color: var(--ws-hover);

    background: rgba(255, 255, 255, .05);
}


/* Active menu item */

body:has(.ws-members-marker) .ws-main-menu .mod-menu > li.current > a,
body:has(.ws-members-marker) .ws-main-menu .mod-menu > li.active > a {
    color: var(--ws-text);

    background: transparent;

    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .35);
}


/* =========================================================
   SUBMENUS
   ========================================================= */

body:has(.ws-members-marker) .ws-main-menu .mm-collapse {
    background: rgba(10, 10, 10, .92);

    border: 1px solid rgba(255, 255, 255, .18);
}

body:has(.ws-members-marker) .ws-main-menu .mm-collapse a {
    color: var(--ws-text);

    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .025em;
}

body:has(.ws-members-marker) .ws-main-menu .mm-collapse a:hover,
body:has(.ws-members-marker) .ws-main-menu .mm-collapse a:focus {
    color: var(--ws-hover);

    background: rgba(255, 255, 255, .06);
}


/* Submenu arrow */

body:has(.ws-members-marker) .ws-main-menu .mod-menu__toggle-sub {
    color: var(--ws-hover) !important;
}

body:has(.ws-members-marker) .ws-main-menu .mod-menu__toggle-sub:hover,
body:has(.ws-members-marker) .ws-main-menu .mod-menu__toggle-sub:focus {
    color: var(--ws-text) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991.98px) {

    body:has(.ws-members-marker) .container-top-a {
        width: calc(100% - 1rem);

        margin-top: .6rem;
        margin-bottom: 1rem;
    }

    body:has(.ws-members-marker) .ws-account {
        justify-content: center;
    }

    body:has(.ws-members-marker) .ws-account .mod-login-logout {
        justify-content: center;
        flex-wrap: wrap;
    }

    body:has(.ws-members-marker) .ws-main-menu .navbar-toggler {
        display: block;

        margin: .15rem auto;
        padding: .35rem .55rem;

        color: var(--ws-text);

        background: rgba(0, 0, 0, .25);

        border-color: rgba(255, 255, 255, .25);
    }

    body:has(.ws-members-marker) .ws-main-menu .navbar-collapse {
        width: 100%;
    }

    body:has(.ws-members-marker) .ws-main-menu .mod-menu {
        margin-top: .5rem;
        padding: 0;
    }

    body:has(.ws-members-marker) .ws-main-menu .mod-menu > li > a,
    body:has(.ws-members-marker) .ws-main-menu .mod-menu > li > span {
        font-size: 1rem;
    }
}

/* =========================================================
   BREADCRUMBS
   ========================================================= */

body:has(.ws-members-marker) .breadcrumb,
body:has(.ws-members-marker) .mod-breadcrumbs {
    background: rgba(0, 0, 0, .25);
}

/* =========================================================
   PUBLIC USER FORM WIDTHS
   ========================================================= */

@media (min-width: 768px) {

    .com-users-login {
        max-width: 560px;
    }

    .com-users-registration {
        max-width: 760px;
    }
}

/* =========================================================
   ACTORS CATALOGUE
   ========================================================= */

/* Actor card */

.ws-actors .blog-item {
    height: 100%;
    padding: .75rem;

    background: rgba(0, 0, 0, .25);

    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .35rem;
}


/* Actor portrait in catalogue */

.ws-actors .blog-item .item-image {
    width: 100%;
    aspect-ratio: 2 / 3;

    margin: 0 0 1rem;
    padding: 0;

    overflow: hidden;

    border-radius: .2rem;
}

.ws-actors .blog-item .item-image img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;

    object-fit: cover;
    object-position: center top;
}


/* Actor name */

.ws-actors .blog-item h2,
.ws-actors .blog-item .item-title {
    margin-top: 0;
    margin-bottom: .75rem;

    font-size: 1.4rem;
    line-height: 1.25;
}


/* Actor details */

.ws-actors .blog-item p {
    margin-bottom: .55rem;
    line-height: 1.45;
}


/* Read more */

.ws-actors .blog-item .readmore {
    margin-top: 1rem;
    margin-bottom: 0;
}


/* =========================================================
   FULL ACTOR PROFILE
   ========================================================= */

/* Full portrait */

.ws-actors .com-content-article .item-image {
    float: left;

    width: 300px;
    max-width: 38%;

    margin: 0 1.5rem 1.25rem 0;
}

.ws-actors .com-content-article .item-image img {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;
    max-height: none;

    object-fit: contain;
}


/* Keep Photos below profile area */

.ws-actors .com-content-article h2 {
    clear: both;
}


/* =========================================================
   ACTORS MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .ws-actors .blog-item {
        max-width: 420px;

        margin-left: auto;
        margin-right: auto;
    }

    .ws-actors .com-content-article .item-image {
        float: none;

        width: 100%;
        max-width: 320px;

        margin: 0 0 1.25rem;
    }
}

/* =========================================================
   HOME NEWS FEED
   ========================================================= */

/* News feed width */

.ws-home-news .blog,
.ws-home-news .blog-featured {
    width: calc(100% - 2rem);
    max-width: 1050px;

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   NEWS CARD
   ========================================================= */

.ws-home-news .blog-item {
    display: block;

    margin-bottom: 1.5rem;
    padding: 1rem 1.1rem;

    background: transparent;

    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
    border-radius: 0;
}

.ws-home-news .blog-item:last-child {
    border-bottom: 0;
}


/* Clear floated image */

.ws-home-news .blog-item::after {
    content: "";
    display: block;
    clear: both;
}

/* =========================================================
   INTRO IMAGE
   ========================================================= */

.ws-home-news .blog-item .item-image {
    float: left;

    width: 30%;
    max-width: 300px;

    margin: 0 1.25rem .8rem 0;
}


/* Do not use the 480px Films limitation here */

.ws-home-news .blog-item .item-image img {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;
    max-height: none;

    border-radius: .2rem;
}


/* =========================================================
   NEWS TITLE
   ========================================================= */

.ws-home-news .blog-item h2,
.ws-home-news .blog-item .item-title {
    margin-top: 0;
    margin-bottom: .75rem;

    line-height: 1.25;
}


/* =========================================================
   NEWS TEXT
   ========================================================= */

.ws-home-news .blog-item p {
    line-height: 1.6;
    margin-bottom: .8rem;
}


/* Read more */

.ws-home-news .blog-item .readmore {
    margin-top: 1rem;
    margin-bottom: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .ws-home-news .blog,
    .ws-home-news .blog-featured {
        width: calc(100% - 1rem);
    }

    .ws-home-news .blog-item {
        padding: .8rem;
        margin-bottom: 1rem;
    }

    .ws-home-news .blog-item .item-image {
        float: none;

        width: auto;
        max-width: 100%;

        margin: 0 0 1rem;
    }

    .ws-home-news .blog-item .item-image img {
        width: auto;
        max-width: 100%;
        margin: 0 auto;
    }
}

/* =========================================================
   PUBLIC HOME - MANIFESTO
   ========================================================= */

.ws-manifesto {
    max-width: 850px;

    margin: 1.2rem 0 2rem;
    padding: 1rem 1.25rem;

    background: rgba(0, 0, 0, .25);

    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .3rem;
}

.ws-manifesto p {
    margin: 0 0 .65rem;

    font-size: 1.08rem;
    line-height: 1.65;
}

.ws-manifesto p:last-child {
    margin-bottom: 0;
}


/* Studio introduction */

.ws-studio-lead {
    margin-bottom: 1.25rem;

    font-size: 1.12rem;
    line-height: 1.6;

    color: var(--ws-accent);
}

/* =========================================================
   PUBLIC HOME - ACCESS NOTICE
   ========================================================= */

.ws-access-notice {
    max-width: 850px;

    margin: 0 0 1.25rem;
    padding: .7rem 1rem;

    background: rgba(0, 0, 0, .25);

    border: 1px solid rgba(255, 255, 255, .18);
    border-left: 3px solid var(--ws-accent);
    border-radius: .3rem;

    line-height: 1.6;
}

.ws-access-notice strong {
    color: var(--ws-accent);
}

/* =========================================================
   404 ERROR PAGE
   ========================================================= */

.error_site {
    min-height: 100vh;

    color: var(--ws-text);
    background-color: #111111;
}


/* Public 404 background */

.error_site:has(.ws-404-public) {
    background:
        #111111
        url("../images/wildstories-public-background.jpg")
        center top / cover
        fixed
        no-repeat;
}


/* Members 404 background */

.error_site:has(.ws-404-members) {
    background:
        #111111
        url("../images/wildstories-members-background.jpg")
        center top / cover
        fixed
        no-repeat;
}


/* Error content */

.error_site .container-component {
    width: calc(100% - 2rem);
    max-width: 1050px;

    margin: 4rem auto;
}

.ws-404 {
    max-width: 760px;

    padding: 1.5rem 1.75rem;

    background: rgba(0, 0, 0, .25);

    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .35rem;
}

.ws-404-code {
    margin-bottom: .35rem;

    color: var(--ws-accent);

    font-size: 1.1rem;
    letter-spacing: .08em;
}

.ws-404 h1 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.ws-404 p {
    line-height: 1.65;
}

.ws-404 .button3 {
    display: inline-block;
    margin-top: .5rem;
}


/* Mobile */

@media (max-width: 767.98px) {

    .error_site .container-component {
        width: calc(100% - 1rem);
        margin-top: 2rem;
    }

    .ws-404 {
        padding: 1rem;
    }
}

/* =========================================================
   FOOTER
   ========================================================= */

.container-footer {
    background: transparent;
    background-image: none;
    color: var(--ws-text);

    width: 100%;
    max-width: none;

    margin-top: 1.5rem;
}


/* Remove Cassiopeia width limitation */

.container-footer .grid-child {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;

    padding: 0;
}


/* Make Custom module fill the whole footer row */

.container-footer .mod-custom {
    width: 100%;
    max-width: none;
    flex: 1 1 100%;
}


/* Footer content */

.ws-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;

    width: 100%;
    max-width: none;
    box-sizing: border-box;

    margin: 1rem 0 0;
    padding: .8rem 2rem 1rem;

    border-top: 1px solid rgba(255, 255, 255, .25);
}


/* Footer text */

.ws-footer-info {
    font-size: .82rem;
    line-height: 1.5;
}

.ws-footer-info p {
    margin: 0 0 .2rem;
}

.ws-footer-warning {
    font-weight: bold;
}

.ws-footer-email {
    margin-top: 1rem !important;
}


/* Footer links */

.ws-footer a {
    color: var(--ws-link);
}

.ws-footer a:hover,
.ws-footer a:focus {
    color: var(--ws-hover);
}

.ws-footer-links {
    display: flex;
    gap: 1.5rem;
    white-space: nowrap;
}

.ws-footer-links a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* =========================================================
   FOOTER MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .container-footer {
        margin-top: 1rem;
    }

    .ws-footer {
        display: block;

        width: 100%;
        max-width: none;

        margin: .75rem 0 0;
        padding: .8rem 1rem 1rem;
    }

    .ws-footer-info {
        font-size: .8rem;
    }

    .ws-footer-links {
        margin-top: 1.25rem;

        flex-wrap: wrap;
        gap: 1rem;

        white-space: normal;
    }
}