/* WordPress-specific additions on top of the original design (style.css). */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap
}

/* Keep the sticky header below the admin bar */
.admin-bar header {
    top: 32px
}

@media(max-width: 782px) {
    .admin-bar header {
        top: 46px
    }
}

nav.menu a.current {
    color: var(--cream)
}

/* Media-library images carry width/height attributes; let CSS sizing win */
.foot .brand img,
.hero-inner img {
    width: auto;
    height: auto
}

.foot .brand img {
    height: 160px
}

.cover-img {
    height: auto
}

/* ---------- Inner pages (pages, posts, shop) ---------- */
.page-main {
    position: relative;
    overflow: hidden;
    padding: 90px 0 110px;
    min-height: 60vh;
    background: radial-gradient(ellipse at 50% 0%, #1a1a30, var(--space) 70%)
}

.page-wrap {
    position: relative;
    z-index: 2;
    max-width: 960px
}

.shop-main .page-wrap {
    max-width: 1180px
}

.page-head {
    text-align: center;
    margin-bottom: 56px
}

.page-head h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    margin-top: 12px
}

.page-404 .btn-row {
    position: relative;
    z-index: 2
}

.entry-content {
    color: rgba(254,251,246,.82);
    font-size: 1.08rem
}

.entry-content > * + * {
    margin-top: 1.1em
}

.entry-content h2, .entry-content h3, .entry-content h4 {
    color: var(--cream);
    margin-top: 1.8em
}

.entry-content h2 { font-size: 2.2rem }
.entry-content h3 { font-size: 1.7rem }

.entry-content a {
    color: var(--gold);
    border-bottom: 1px solid rgba(194,172,120,.4)
}

.entry-content a:hover {
    border-color: var(--gold)
}

.entry-content ul, .entry-content ol {
    padding-left: 1.4em
}

.entry-content blockquote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.6rem;
    border-left: 2px solid var(--gold);
    padding-left: 24px;
    color: var(--cream)
}

.entry-content img {
    height: auto
}

.entry-thumb {
    margin-bottom: 40px
}

.alignwide { margin-left: -60px; margin-right: -60px; max-width: none }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw }
.aligncenter { margin-left: auto; margin-right: auto }

.post-list {
    display: grid;
    gap: 40px
}

.post-card {
    border-bottom: 1px solid var(--line-dark);
    padding-bottom: 36px
}

.post-card h2 {
    font-size: 2.1rem;
    margin: 8px 0 12px
}

.post-card h2 a:hover {
    color: var(--gold)
}

.entry-excerpt {
    color: rgba(254,251,246,.75)
}

.pagination {
    margin-top: 50px;
    text-align: center;
    font-family: 'EB Garamond', serif
}

.pagination .page-numbers {
    display: inline-block;
    padding: 6px 12px;
    color: rgba(254,251,246,.7)
}

.pagination .current {
    color: var(--gold)
}

/* Inputs on inner pages (comments, CF7 forms placed in page content) */
.entry-content input[type=text],
.entry-content input[type=email],
.entry-content input[type=tel],
.entry-content input[type=url],
.entry-content textarea,
.entry-content select,
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line-dark);
    background: rgba(255,255,255,.04);
    font-family: 'Spectral', serif;
    font-size: 1rem;
    border-radius: 2px;
    color: var(--cream)
}

.entry-content input:focus,
.entry-content textarea:focus,
.entry-content select:focus {
    outline: none;
    border-color: var(--gold)
}

.entry-content input[type=submit],
.comment-form input[type=submit] {
    font-family: 'EB Garamond', serif;
    font-size: 1rem;
    letter-spacing: .06em;
    padding: 14px 32px;
    border-radius: 2px;
    cursor: pointer;
    border: 1px solid var(--gold);
    background: var(--gold);
    color: var(--space);
    transition: .25s
}

.entry-content input[type=submit]:hover,
.comment-form input[type=submit]:hover {
    background: var(--gold-deep);
    border-color: var(--gold-deep);
    color: var(--cream)
}

/* ---------- Contact Form 7: newsletter ---------- */
.news .wpcf7 {
    margin-top: 30px
}

.news .wpcf7 form {
    margin-top: 0;
    flex-wrap: wrap;
    position: relative
}

.news .wpcf7-form-control-wrap {
    flex: 1;
    display: flex
}

.news .wpcf7-form-control-wrap input {
    width: 100%
}

.news input[type=submit] {
    flex: 0 0 auto;
    font-family: 'EB Garamond', serif;
    letter-spacing: .06em;
    padding: 14px 32px;
    cursor: pointer;
    background: var(--gold);
    border-color: var(--gold);
    color: var(--space);
    transition: .25s
}

.news input[type=submit]:hover {
    background: var(--gold-deep);
    border-color: var(--gold-deep);
    color: var(--cream)
}

.news .wpcf7-spinner {
    position: absolute;
    right: -40px;
    top: 14px;
    margin: 0
}

.news .wpcf7-not-valid-tip {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    font-size: .85rem;
    color: #e8a39a
}

.wpcf7 form .wpcf7-response-output {
    flex-basis: 100%;
    margin: 18px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--gold);
    border-radius: 2px;
    color: var(--cream);
    font-size: .92rem
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
    border-color: #e8a39a
}

.wpcf7 .hidden-fields-container {
    display: none
}

@media(max-width: 560px) {
    .news .wpcf7-form-control-wrap {
        flex-basis: 100%
    }
    .news .wpcf7-spinner {
        right: 50%;
        top: auto;
        bottom: -36px
    }
}

/* ---------- Book buttons rendered by WooCommerce ---------- */
.buy-row a.add {
    display: inline-block
}

.buy-row .add.loading {
    opacity: .6;
    pointer-events: none
}

.buy-row .added_to_cart {
    display: none
}

.buy-row .price del {
    opacity: .5;
    font-size: 1.4rem;
    margin-right: 8px
}

.buy-row .price ins {
    text-decoration: none
}

.add[disabled] {
    opacity: .55;
    cursor: default
}

.add[disabled]:hover {
    background: none;
    color: var(--cream)
}