/*
Theme Name: Apollo
Theme URI: https://timotheacreations.com/product/apollo/
Author: Timothea Creations
Author URI: https://timotheacreations.com/
Description: Be yourself. Apollo is a bold music and podcast theme for artists, bands, and podcasters — full-bleed hero, release features, streaming links, tour dates, episode lists, and a gallery, with four expressive styles from radiant daylight to a dark stage.
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.2
Version: 1.1.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: apollo
Domain Path: /languages
Tags: block-patterns, full-site-editing, music, blog, portfolio, custom-colors, custom-logo, editor-style, featured-images, wide-blocks
*/

body {
    -webkit-font-smoothing: antialiased;
}

/* Set default line height for font size presets. */

.has-xx-large-font-size,
.has-xxx-large-font-size {
	line-height: 1;
}

/* Add a transition state for buttons. */

.wp-element-button {
    transition: border, background-color, color, box-shadow, opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(30px);
}

/* Fields */

label,
.jetpack-field-label .rich-text.jetpack-field-label__input,
.contact-form .grunion-checkbox-multiple-options legend, 
.contact-form .grunion-radio-options legend,
.wp-block-jetpack-contact-form-container .wp-block-jetpack-contact-form label {
    display: inline-block;
    font-size: var(--wp--preset--font-size--small);
    margin-bottom: 0.25em;
    font-weight: inherit;
}

textarea,
input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=range]),
.wp-block-post-comments-form textarea,
.wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.jetpack-contact-form .jetpack-field .jetpack-field__input,
.jetpack-contact-form .jetpack-field .jetpack-field__textarea {
    backdrop-filter: saturate(1.075);
    background-color: transparent;
    border-color: currentColor;
    border-style: solid;
    border-radius: 6px;
    border-width: 1px;
    box-shadow: none;
    box-sizing: border-box;
    color: currentColor;
    filter: brightness(1.05);
    font-size: var(--wp--preset--font-size--small);
    font-weight: inherit;
    line-height: 1.5;
    min-height: 42px;
    padding: 0.8rem 1rem;
    width: 100%;
}

textarea:focus,
input:not([type=submit]):focus,
.wp-block-post-comments-form textarea:focus,
.wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]):not([type=radio]):focus {
    outline: 1px solid currentColor;
}

textarea::placeholder,
.input::placeholder,
.wp-block-jetpack-subscriptions__form .components-base-control__field input::placeholder {
    color: color-mix(in srgb, currentColor 60%, transparent);
}

/* Padding adjustment for input fiedls in Woo */
.wc-block-components-form .wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input.is-active input[type=email],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=number],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=password],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=tel],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=text],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=url],
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-text-input.is-active input[type=email],
.wc-block-components-text-input.is-active input[type=number],
.wc-block-components-text-input.is-active input[type=password],
.wc-block-components-text-input.is-active input[type=tel],
.wc-block-components-text-input.is-active input[type=text],
.wc-block-components-text-input.is-active input[type=url] {
    padding: 1.5em .5em .5em;
}


/* Jetpack Forms: Clean up errors */

.contact-form__error {
    font-size: 13px;
}

.contact-form__input-error {
	font-size: 13px;
    gap: 8px;
}

.contact-form__input-error .contact-form__warning-icon {
    border-width: 0;
}

/* Jetpack Forms: Animated block style tweaks */

.contact-form .is-style-animated .grunion-field-wrap.grunion-field-select-wrap .animated-label__label label,
.contact-form .is-style-animated .grunion-field-wrap .grunion-field.has-placeholder ~ .animated-label__label label,
.contact-form .is-style-animated .grunion-field-wrap .grunion-field:focus ~ .animated-label__label label,
.contact-form .is-style-animated .grunion-field-wrap .grunion-field:not(:placeholder-shown) ~ .animated-label__label label {
	opacity: 0.7;
    font-size: 12px;
}

/* Styling for hero areas. */
.header-cover .wp-block-template-part {
    max-width: none;
}

.header-cover .wp-block-template-part > .wp-block-group {
    padding-left: 0;
    padding-right: 0;
}

/* Cover block styles */
.wp-block-cover[class*="is-style-section"]:not(.is-style-default) .wp-block-cover__image-background {
    opacity: 0.25;
}

.wp-block-cover[class*="is-style-section"]:not(.is-style-default) .wp-block-cover__background {
    opacity: 0;
}

:root :where(.wp-block-cover.is-light){
    color: var(--wp--preset--color--contrast);
}

.wp-block-cover[class*="is-style-section"]:not(.is-style-default) .wp-block-cover__background {
    opacity: 0;
}

/* Make sure footers have no margin. */
footer {
	margin-top: 0 !important;
}

/* Social Links: Better default color. */

.wp-block-social-links.is-style-logos-only li.wp-social-link {
	color: currentcolor;
}

.wp-block-social-links.is-style-logos-only .wp-social-link svg {
	height: 1em;
	width: 1em;
}

.wp-block-social-links.has-small-icon-size {
	font-size: 20px;
}

/* Navigation: Remove row gap to improve wrapping behavior */
.wp-block-navigation__container {
    row-gap: 0;
}

/* Move header core/navigation to the right on mobile. */

.order-0 {
	order: 0;
}

.order-1 {
	order: 1;
}

.grow-0 {
	flex-grow: 0;
}

.grow {
	flex-grow: 1;
}

@media (min-width: 600px) {

	.md\:order-0 {
		order: 0;
	}

	.md\:order-1 {
		order: 1;
	}

	.md\:grow-0 {
		flex-grow: 0;
	}

	.md\:grow {
		flex-grow: 1;
	}

}

.overflow-hidden {
	overflow: hidden;
}

/* Utility class for wide and full images with aspect ratios, as core does not support this yet. */
.aspect-16\/9 {
	aspect-ratio: 16/9;
}

.aspect-16\/9 img,
.aspect-16\/9 .components-placeholder {
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* Ensure cropping works. */
.aspect-16\/9 .wp-block-image__crop-area,
.aspect-16\/9 .wp-block-image__crop-area img {
	aspect-ratio: unset;
}

/* WooCommerce Catalog Sorting Styles */
.wc-block-catalog-sorting {
    position: relative;
}

.wc-block-catalog-sorting > div,
.wc-block-catalog-sorting .woocommerce-ordering {
    align-items: center;
    display: flex;
    gap: 8px;
}

.wc-block-catalog-sorting > div >label,
.woocommerce .woocommerce-ordering > label {
    margin: 0;
    text-wrap: nowrap;
}

.wc-block-catalog-sorting select.orderby {
    appearance: none;
    background-color: transparent;
    border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
    font-family: inherit;
    font-size: inherit;
    border-radius: 6px;
    color: currentColor;
    cursor: pointer;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    width: 100%;
}

/* Arrow using CSS triangle for dynamic color */
.wc-block-catalog-sorting::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 0.35em solid transparent;
    border-right: 0.35em solid transparent;
    border-top: 0.4em solid currentColor;
    pointer-events: none;
}

/* Make sure the CSS triangle stays the same when it's hovered or selected */
.is-outline-mode .block-editor-block-list__block.wc-block-catalog-sorting:not(.remove-outline):not(.rich-text):not([contenteditable=true]).is-selected:after,
.is-outline-mode .block-editor-block-list__block.wc-block-catalog-sorting:not(.remove-outline).is-hovered:not(.is-selected):after {
    left: auto;
    outline-color: transparent;
    right: 0.75rem;
    top: 50%;
}

/* WooCommerce Sale Badge */
/* Needs to be specific because Woo is. */
.wc-block-grid .wc-block-grid__product-onsale,
.wc-block-grid__product-image .wc-block-grid__product-onsale {
    background-color: #FFF;
    border: none;
    color: #000;
    padding: 0.25em 1em;
}

/* Remove the paddings so the setting for sale badge is respected */
.wc-block-components-product-image__inner-container {
    padding: 0;
}

/* Remove an extra border from the qty selector */
.wc-block-components-quantity-selector input.input-text.qty.text,
input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=range]).wc-block-components-quantity-selector__input {
    border-style: none;
}

/* Reset padding for the qty selector */
input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=range]).qty {
    padding: inherit;
}

/* Remove unwated right margin the qty selector */
.woocommerce div.product form.cart div.quantity .qty {
    margin-right: 0;
}

/* Fix the qty selector height so it matches with the button next to it */
.wp-block-add-to-cart-with-options .wc-block-components-quantity-selector {
    height: 100%;
}

/* Make sure the qty selector's height is the same as the button next to it in the editor */
.wc-block-add-to-cart-with-options__quantity-selector > div,
.wc-block-add-to-cart-with-options__quantity-selector .wc-block-components-quantity-selector {
    height: 100%;
}

/* Remove unnecessary bottom margin from the variation selector labels */
.woocommerce-page label.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name,
.woocommerce-page label.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill {
    margin-bottom: 0;
}

/* Remove unwanted top margin from the title of the order confirmation page template */
.wc-block-order-confirmation-status h1 {
    margin-top: 0;
}

/* Add top margin to the express checkout */
.wcpay-express-checkout-wrapper {
    margin-top: var(--wp--style--block-gap);
}

/* Remove unwanted margin from the attribute value */
.wp-block-product-specifications-item__value p {
    margin: 0;
}

/* Remove underline from the attribute value */
.wp-block-product-specifications-item__value p a {
    text-decoration: none;
}

/* Reset unwanted margins */
.wc-block-components-product-summary,
.wc-block-components-product-summary p {
    margin: 0;
}

/* Make sure the paragraph has a line break */
.wc-block-components-product-summary p + p {
    margin-top: var(--wp--style--block-gap);
}

/* Remove underline from the product name inside cart */
.wc-block-cart-item__wrap .wc-block-components-product-name {
    text-decoration: none;
}

/* Utility class for reversing the order of rows */
@media (min-width: 782px) {
    .wp-block-columns.row-reverse {
        flex-direction: row-reverse;
    }
}

/* =========================================================
   Animations (see assets/js/animations.js)
   Gated behind .apollo-js so no-JS users see content immediately,
   and disabled under prefers-reduced-motion.
   ========================================================= */

/* Scroll reveals */
@media (prefers-reduced-motion: no-preference) {
    .apollo-js .wp-block-columns > .wp-block-column,
    .apollo-js .wp-block-group.alignfull > .wp-block-heading,
    .apollo-js .wp-block-group.alignfull > .wp-block-group > .wp-block-heading {
        opacity: 0;
        transform: translateY(24px);
        transition:
            opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: opacity, transform;
    }

    .apollo-js .wp-block-columns > .wp-block-column.is-revealed,
    .apollo-js .wp-block-group.alignfull > .wp-block-heading.is-revealed,
    .apollo-js .wp-block-group.alignfull > .wp-block-group > .wp-block-heading.is-revealed {
        opacity: 1;
        transform: none;
    }
}

/* Hero parallax + zoom (JS sets the transform on scroll) */
.apollo-js .apollo-parallax .wp-block-cover__image-background {
    will-change: transform;
}

/* Marquee ticker */
.apollo-ticker {
    overflow: hidden;
    width: 100%;
}

.apollo-ticker .apollo-ticker__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    align-items: center;
}

.apollo-ticker .apollo-ticker__group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--wp--preset--spacing--40, 1.5rem);
    padding-right: var(--wp--preset--spacing--40, 1.5rem);
}

.apollo-ticker__item {
    font-family: var(--wp--preset--font-family--fraunces, serif);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.apollo-ticker__sep {
    color: var(--wp--preset--color--primary);
}

@media (prefers-reduced-motion: no-preference) {
    .apollo-js .apollo-ticker .apollo-ticker__track {
        animation: apollo-ticker-scroll 26s linear infinite;
    }

    .apollo-js .apollo-ticker:hover .apollo-ticker__track {
        animation-play-state: paused;
    }
}

@keyframes apollo-ticker-scroll {
    to {
        transform: translateX(-50%);
    }
}

/* Equalizer bars */
.apollo-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    height: 1.4em;
    color: var(--wp--preset--color--primary);
}

.apollo-eq span {
    display: block;
    width: 4px;
    height: 100%;
    background-color: currentColor;
    border-radius: 2px;
    transform-origin: bottom;
    transform: scaleY(0.4);
}

@media (prefers-reduced-motion: no-preference) {
    .apollo-js .apollo-eq span {
        animation: apollo-eq 0.9s ease-in-out infinite;
    }
    .apollo-js .apollo-eq span:nth-child(2) { animation-delay: 0.2s; }
    .apollo-js .apollo-eq span:nth-child(3) { animation-delay: 0.4s; }
    .apollo-js .apollo-eq span:nth-child(4) { animation-delay: 0.15s; }
    .apollo-js .apollo-eq span:nth-child(5) { animation-delay: 0.35s; }
}

@keyframes apollo-eq {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
}

/* =========================================================================
   STICKY FOOTER
   Nothing pushed the footer down on short pages, so it floated mid-screen.
   ========================================================================= */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

.wp-site-blocks > footer {
	flex-shrink: 0;
	/* Core emits :where(.wp-site-blocks) > * { margin-block-start: <blockGap> },
	   which lands on the footer and opens a strip of page background between
	   the last section and the footer. Invisible when the last section shares
	   the page background, obvious the moment it is a coloured band (cta-banner,
	   cta-contact, newsletter). Sections butt against the footer instead. */
	margin-block-start: 0;
}


/* =========================================================================
   TAP TARGETS
   ========================================================================= */

/* Core sizes the mobile menu toggle to its 24px icon and nothing more: the
   bare WCAG 2.5.8 floor, well under the 44px a thumb wants, on the single
   most-used control on a phone. An overlay pseudo-element grows the hit area
   to 44x44 without occupying any layout space, so no header shifts.

   It grows upward, downward and inward only. Padding the button, or growing
   this overlay outward, pushes past the viewport edge — Hermes' header is
   nowrap and sits flush right, and either approach put it 2px over a 360px
   screen and raised a horizontal scrollbar. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
    position: relative;
}

.wp-block-navigation__responsive-container-open::after,
.wp-block-navigation__responsive-container-close::after {
    content: "";
    position: absolute;
    inset: -10px 0 -10px -20px;
}

/* The logos-only social style strips the anchor's padding, so the tap target
   collapses to the 24px glyph itself. Same overlay trick, but grown 4px
   sideways rather than 10px: the icons sit 8px apart, and a wider overlay
   would have neighbouring targets overlapping so a tap aimed at one link
   opened another. 32x44 is what fits without that. */
.wp-block-social-links.is-style-logos-only .wp-block-social-link-anchor {
    position: relative;
}

.wp-block-social-links.is-style-logos-only .wp-block-social-link-anchor::after {
    content: "";
    position: absolute;
    inset: -10px -4px;
}


/* A page whose content ends in a full-bleed coloured section still showed a
   strip of page background above the footer. It was never the footer's margin
   (that is already zeroed above) and never the pattern: theme.json gives
   core/post-content a bottom padding of spacing|60, and an `alignfull` child
   stretches sideways out of that wrapper but cannot cover its padding. So the
   band stopped ~48-175px short of the footer. Hermes sets no post-content
   padding, which is why Hermes alone never showed this.

   Drop the padding only when the content ends in a full-width section; a
   prose page ending in a paragraph still gets its breathing room. */
.wp-block-post-content:has(> .alignfull:last-child) {
    padding-bottom: 0;
}

/* =========================================================================
   HEADER — keep the call to action on one line
   The header row does not wrap, so as the window narrows the flex items are
   squeezed and "Listen" broke into "List / en". Its text must not wrap.
   ========================================================================= */

header.wp-block-group .wp-block-buttons {
	flex-shrink: 0;
}

header.wp-block-group .wp-block-button__link {
	white-space: nowrap;
}