/*
Theme Name: Athena
Theme URI: https://timotheacreations.com/product/athena/
Author: Timothea Creations
Author URI: https://timotheacreations.com/
Description: Be strong. Named for the goddess of wisdom, craft and the arts, Athena is a refined editorial block theme for writers, studios, portfolios and thoughtful publishing.
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.2
Version: 1.1.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: athena
Domain Path: /languages
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, one-column, portfolio, blog, rtl-language-support, style-variations, template-editing, threaded-comments, translation-ready, 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--preset--spacing--20);
}

/* 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;
}
/* Set Image styling for Athena */
.wp-block-image.is-style-portrait {
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.wp-block-image.is-style-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wp-block-image.is-style-standard {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.wp-block-image.is-style-standard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

/* =========================================================================
   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;
}

/* =========================================================================
   BLOG — index and article
   ========================================================================= */

/* Meta line: date and category read as a label, not body copy.

   The colour is a fraction of the surrounding text, NOT a palette slug. It was
   `secondary`, which is a dusty-rose accent in the default palette and a CREAM
   SURFACE in Pallas, Glaukopis and Chryse — so the date and category rendered
   cream on white in Pallas (1.16:1) and cream on cream in Glaukopis (1:1,
   literally invisible). Deriving it from currentColor is correct on any
   background in any palette, and still reads as a label rather than body copy. */
.athena-post__meta,
.athena-eyebrow {
	font-size: 0.8125rem !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, currentColor 74%, transparent);
}

.athena-post__meta a,
.athena-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.athena-post__meta a:hover {
	text-decoration: underline;
}

/* A hairline between entries — magazine index, not card grid. */
.athena-post-list .athena-post {
	padding-bottom: var(--wp--preset--spacing--60);
	border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.athena-post-list .wp-block-post:last-child .athena-post {
	border-bottom: 0;
	padding-bottom: 0;
}

.athena-post-list .wp-block-post-title a {
	text-decoration: none;
}

.athena-post-list .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.athena-post-list img {
	width: 100%;
	object-fit: cover;
}

/* "Read the piece" — a quiet link with a rule under it. */
.athena-post__more a {
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

/* Article body: generous rhythm for long reading. */
.athena-prose > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.athena-prose :is(h2, h3) {
	margin-block-start: var(--wp--preset--spacing--60);
}

.athena-tags {
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Previous / next: side by side, next right-aligned. */
.athena-postnav .wp-block-post-navigation-link {
	max-width: 46%;
	font-size: 0.9375rem;
}

.athena-postnav .post-navigation-link-next {
	text-align: right;
	margin-inline-start: auto;
}

@media (max-width: 781px) {
	.athena-postnav .wp-block-post-navigation-link {
		max-width: 100%;
	}
}

/* Posts without a featured image must not leave an empty column beside the
   text. Collapse it and let the text run the full width. */
.athena-post .wp-block-column:not(:has(*)) {
	display: none;
}

/* Image: present, not loud. Square corners suit the editorial feel, and a
   quiet lift on hover signals it is a link without shouting. */
.athena-post-list .wp-block-post-featured-image {
	margin: 0;
}

.athena-post-list .wp-block-post-featured-image img {
	border-radius: 0;
	filter: saturate(0.92);
	transition: filter 240ms ease, opacity 240ms ease;
}

.athena-post-list .wp-block-post-featured-image a:hover img {
	filter: saturate(1);
	opacity: 0.92;
}

/* An author with no biography set would leave a stranded bordered box at the
   end of every article. Hide the whole block unless there is a bio. */
.athena-prose .wp-block-group:has(> .wp-block-post-author-biography):not(:has(.wp-block-post-author-biography:not(:empty))) {
	display: none;
}


/* =========================================================================
   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;
}

/* =========================================================================
   14. CTA BANDS AND HAIRLINES
   Two related fixes, both caused by one colour being asked to do two jobs.

   `muted` was the CTA band background AND the 1px rule under FAQ rows, author
   bios and pricing cards. A mid grey is a fine hairline on a dark page and a
   bad surface; a pale tint is the reverse. Chryse, the only dark variation, is
   where that broke — see the note in patterns/cta-simple.php.

   Hairlines no longer use `muted` at all. They are a fraction of the current
   text colour, which is correct on any background in any palette without a
   palette having to define anything.
   ========================================================================= */

.athena-cta {
	border-block: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent);
}

.athena-hairline {
	border-color: color-mix(in srgb, currentColor 22%, transparent) !important;
}