/* The site-wide layer (btg-site.php): the language of the rentals and shop
   pages for everything else. GeneratePress's colour variables are retuned
   here rather than in the Customizer, so they are versioned and deployed. */

:root {
    --accent: #0f0f0f;          /* was a bright blue */
    --accent-alt: #333333;
    --contrast-2: #4a4a4a;      /* links and secondary text: was #606060 */
    --btg-line: rgba(15, 15, 15, 0.12);
    --btg-muted: rgba(15, 15, 15, 0.6);
    --btg-tile: #f2f2f0;
    --btg-radius: 6px;
}

/* Type: a touch heavier and darker body text for reading */
body {
    color: #1a1a1a;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

.entry-content a,
.btg-product__text a,
.btg-footer a {
    text-underline-offset: 0.2em;
}

::selection {
    background: #0f0f0f;
    color: #fff;
}

:focus-visible {
    outline: 2px solid #0f0f0f;
    outline-offset: 2px;
}

/* Buttons: one style everywhere */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background),
.wp-block-button .wp-block-button__link:not(.has-background),
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    border-radius: var(--btg-radius);
    letter-spacing: 0.06em;
}

.wp-block-button .wp-block-button__link:not(.has-background) {
    background-color: #0f0f0f;
    color: #fff;
}

.wp-block-button .wp-block-button__link:not(.has-background):hover {
    background-color: #333;
    color: #fff;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
    border-color: var(--btg-line);
    border-radius: var(--btg-radius);
    background-color: #fff;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #0f0f0f;
}

/* WooCommerce notices: neutral, not blue */
.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews,
p.no-comments {
    border-radius: var(--btg-radius);
    border-left: 3px solid #0f0f0f !important;
    background-color: var(--btg-tile) !important;
    color: #1a1a1a !important;
}

.woocommerce-info::before,
.woocommerce-message::before {
    color: #0f0f0f !important;
}

/* Menu: the current page underlined, not coloured */
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li.current-menu-item > a {
    color: #0f0f0f;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.45em;
}

.main-navigation .main-nav ul li > a:hover {
    color: #0f0f0f;
}

/* Ultimate Membership Pro's forms and buttons in the site's colours */
.ihc-login-form-wrap input[type="submit"],
.ihc-register-form-wrap input[type="submit"],
.iump-submit-form input[type="submit"],
.ihc-wrapp-template-wrapper input[type="submit"],
.iump-register-form input[type="submit"],
.ihc-ap-wrap input[type="submit"],
input.ihc-submit-bttn-lg,
.ihc-login-template-1 .impu-form-submit input,
.ihc-login-template-2 .impu-form-submit input,
.ihc-login-template-3 .impu-form-submit input,
.ihc-login-template-4 .impu-form-submit input,
.ihc-login-template-5 .impu-form-submit input,
.ihc-login-template-6 .impu-form-submit input,
.ihc-login-template-7 .impu-form-submit input,
.ihc-login-template-8 .impu-form-submit input,
.ihc-login-template-9 .impu-form-submit input,
.ihc-login-template-10 .impu-form-submit input,
.ihc-login-template-11 .impu-form-submit input,
.ihc-login-template-12 .impu-form-submit input,
.ihc-login-template-13 .impu-form-submit input {
    border: 0 !important;
    border-radius: var(--btg-radius) !important;
    background: #0f0f0f !important;
    color: #fff !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Cookie notice: quiet and in the site's colours */
#cookie-notice {
    background: rgba(15, 15, 15, 0.96) !important;
    font-family: inherit;
}

#cookie-notice .cookie-notice-container {
    padding: 14px 20px;
    font-size: 0.85rem;
}

#cookie-notice .cn-button,
#cookie-notice .cn-button:not(.cn-button-custom) {
    margin: 0 0 0 0.5rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: var(--btg-radius);
    background: transparent !important;
    color: #fff !important;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

#cookie-notice #cn-accept-cookie {
    background: #fff !important;
    color: #0f0f0f !important;
}

/* Footer */
.site-footer {
    background: #0f0f0f;
}

.btg-footer {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
    line-height: 1.6;
}

.btg-footer__inner {
    display: grid;
    grid-template-columns: 1.6fr 1.2fr 0.9fr 1fr;
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 40px 48px;
}

.btg-footer h2 {
    margin: 0 0 0.9rem;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.btg-footer p {
    margin: 0 0 0.8rem;
}

.btg-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.btg-footer li {
    margin: 0 0 0.45rem;
}

.btg-footer a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.btg-footer a:hover,
.btg-footer a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.btg-footer a:focus-visible {
    outline-color: #fff;
}

/* The logo: black in the header, white in the footer (currentColor) */
.btg-logo {
    display: inline-block;
    line-height: 0;
}

.btg-logo svg {
    display: block;
    width: 100%;
    height: auto;
}

.navigation-branding .main-title a,
.site-branding .main-title a {
    display: block;
    color: #0f0f0f;
}

.btg-logo--header {
    width: 230px;
}

/* The logo overlaps the top of the studio photo */
.btg-footer__brand {
    max-width: 300px;
}

.btg-footer__name {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 260px;
    margin: 0 0 0 12px;
    color: #fff !important;
}

.btg-logo--footer {
    width: 100%;
}

/* A thin black outline (outside the fill, a constant 1.5px at any size) so
   the white lettering holds over the photo. Set on the svg: the path is a
   <use> copy and inherits it (its vector-effect is in btg-site.php) */
.btg-logo--footer svg {
    stroke: #0f0f0f;
    stroke-width: 1.5px;
    stroke-linejoin: round;
    paint-order: stroke;
}

.btg-footer__photo {
    position: relative;
    max-width: 300px;
    margin: -20px 0 0;
}

/* A shade under the overlap so the white lettering stays readable */
.btg-footer__photo::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 45%;
    border-radius: var(--btg-radius) var(--btg-radius) 0 0;
    background: linear-gradient(rgba(15, 15, 15, 0.45), transparent);
    pointer-events: none;
}

.btg-footer__photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--btg-radius);
    filter: grayscale(1);
}

.btg-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1120px;
    margin: 0 auto;
    padding: 20px 0 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.8rem;
}

.btg-footer__bar p {
    margin: 0;
}

.btg-footer__social {
    display: flex;
    gap: 1.25rem;
}

.btg-footer__social li {
    margin: 0;
}

/* GeneratePress's back-to-top button in the footer's colours */
.generate-back-to-top,
.generate-back-to-top:hover,
.generate-back-to-top:focus {
    border-radius: var(--btg-radius);
    background: #0f0f0f;
    color: #fff;
}

/* Not found */
.btg-404 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 64px;
}

.btg-404 ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.btg-404 a {
    display: inline-block;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--btg-line);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
}

.btg-404 a:hover {
    border-color: #0f0f0f;
}

@media (max-width: 900px) {
    .btg-footer__inner {
        grid-template-columns: 1fr 1fr;
    }

    .btg-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .btg-logo--header {
        width: 170px;
    }
}

@media (max-width: 640px) {
    .btg-footer__inner {
        gap: 2rem;
        padding: 48px 20px 32px;
    }

    .btg-footer__bar {
        margin: 0 20px;
        padding: 18px 0 24px;
    }

    .btg-404 {
        padding: 0 20px 48px;
    }
}

/* Page heads written in content (eyebrow, h1, intro), as on the rentals
   and shop pages */
.entry-content .btg-page__eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--btg-muted);
}

.entry-content .btg-page__title {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.05;
}

.entry-content .btg-page__intro {
    max-width: 680px;
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.6;
}

/* Membership */
.page-id-1504 .inside-article {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 48px;
}

.btg-member__map {
    margin: 0 0 2.5rem;
    text-align: center;
}

.btg-member__map img {
    max-height: 560px;
    width: auto;
    margin: 0 auto;
}

.btg-member__map figcaption {
    margin-top: 0.75rem;
    color: var(--btg-muted);
    font-size: 0.8rem;
}

.entry-content .btg-member__facts {
    gap: 2rem;
    margin-bottom: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--btg-line);
}

.btg-member__facts h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.btg-member__facts p {
    margin: 0;
    color: #3a3a3a;
    font-size: 0.9rem;
    line-height: 1.6;
}

.btg-member__facts a,
.btg-member__small a {
    color: #0f0f0f;
    text-decoration: underline;
}

.entry-content .btg-member__tiers-title {
    margin: 0 0 1.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--btg-line);
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

/* Ultimate Membership Pro's tier cards in the cards' language */
.ich_level_wrap {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

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

.ich_level_wrap .ihc-level-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--btg-line) !important;
    border-radius: 10px;
    background: #fff !important;
    box-shadow: none !important;
}

.ich_level_wrap .ihc-level-item-top {
    padding: 1.1rem 1.25rem 0 !important;
    background: none !important;
    border: 0 !important;
}

.ich_level_wrap .ihc-level-item-title {
    color: #0f0f0f !important;
    font-family: Oswald, sans-serif;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    line-height: 1.2;
    text-align: left !important;
    text-transform: uppercase;
}

.ich_level_wrap .ihc-level-item-content {
    flex: 1;
    padding: 0.75rem 1.25rem !important;
    color: #3a3a3a !important;
    font-size: 0.88rem !important;
    line-height: 1.55;
    text-align: left !important;
}

.ich_level_wrap .ihc-level-item-content img {
    display: block;
    width: 100%;
    height: 190px;
    margin: 0 0 0.75rem;
    object-fit: contain;
}

.ich_level_wrap .ihc-level-item-content ul {
    margin: 0.5rem 0 0 1.1rem;
}

.ich_level_wrap .ihc-level-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem !important;
    border-top: 1px solid var(--btg-line) !important;
    background: none !important;
}

.ich_level_wrap .ihc-level-item-price {
    float: none !important;
    color: #0f0f0f !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
}

.ich_level_wrap .ihc-level-item-link {
    float: none !important;
    padding: 0.6rem 1rem !important;
    border-radius: var(--btg-radius) !important;
    background: #0f0f0f !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ich_level_wrap .ihc-level-item-link:hover {
    background: #333 !important;
}

.ich_level_wrap .iump-clear {
    display: none;
}

.btg-member__small {
    max-width: 75ch;
    margin-top: 2rem;
    color: var(--btg-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

@media (max-width: 960px) {
    .ich_level_wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ich_level_wrap {
        grid-template-columns: 1fr;
    }
}

/* Pages with a head written in content (Membership, Contact) */
.page-id-1504 .inside-article,
.btg-content-page .inside-article {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 48px;
}