/*
Theme Name: Futurehome
Theme URI: https://olliewp.com
Description: A child theme for Ollie.
Author: Algera BG
Author URI: https://algerabg.com
Template:     ollie
Version: 1.10
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Text Domain: futurehome
*/

/* Layout values that change at the design's 800px breakpoint. Presets can't hold
   media queries, so the spacing presets in theme.json read these variables. */
:root { --fh-gutter: 8vw; --fh-edge: 5vw; --fh-section: 105px; }
@media (max-width: 800px) { :root { --fh-gutter: 7vw; --fh-section: 65px; } }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.fh-hero video, .wp-block-cover img, .fh-project-card img { transition: none !important; }
}
body { overflow-x: clip; }
.wp-site-blocks > * { margin-block: 0; }

/* Header sits over the first section; Group has no "absolute" position setting. */
.fh-header { position: absolute; inset: 0 0 auto; z-index: 10; min-height: 98px; }
.fh-header a { color: inherit; }
.fh-lang a { display: inline-block; padding: 6px 0; border-bottom: 1px solid #aaa; }
/* The switch shows only the language to change to; GTranslate marks the current one with this class. */
.fh-lang a.gt-current-lang { display: none; }
.fh-nav-cta a { display: inline-block; padding: 12px 0; border-bottom: 1px solid #ffffff70; }
@media (max-width: 800px) {
	.fh-header { min-height: 80px; }
	.fh-nav-cta { display: none; }
	.fh-brand-name { font-size: 1.25rem !important; }
	/* On phones the language switch comes before the menu button, as in the design. */
	.fh-header-end { margin-left: auto; }
	.fh-header .wp-block-navigation { order: 3; margin-left: 18px; }
}
/* Dropdown: the Navigation block has no background setting for submenus on a bar with no background of its own. */
.fh-header .wp-block-navigation__submenu-container { min-width: 260px !important; padding: 10px 0; border: 0 !important; border-radius: 3px; background: var(--wp--preset--color--night) !important; color: #fff !important; box-shadow: 0 18px 40px #0000004d; }
.fh-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 10px 20px !important; }
.fh-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: #ffffff14; }
@media (max-width: 800px) {
	/* Inside the phone menu the links sit in the overlay's own flow, not in a floating panel. */
	.fh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { min-width: 0 !important; padding: 8px 0 0 14px; background: transparent !important; box-shadow: none; }
	.fh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 6px 0 !important; }
}
/* Ollie gives the menu button a filled background; the design shows a plain icon. */
.fh-header .wp-block-navigation__responsive-container-open { padding: 0; border: 0; background: transparent; color: inherit; }
/* The logo's two weights are one editable line; no block setting reaches inline weight. */
.fh-brand-name strong { font-weight: 700; }

/* Hero: Cover's height setting has no maximum, and its inner container shrinks to its content when positioned. */
.fh-hero { min-height: clamp(760px, 94svh, 1050px) !important; padding: 0 !important; }
.fh-hero.wp-block-cover .wp-block-cover__inner-container { width: 100% !important; max-width: none; }
.fh-hero-bottom { font-size: .75rem; letter-spacing: 1.5px; }
.fh-video-toggle a { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid #ffffff80; border-radius: 50%; background: #ffffff10; color: #fff; font-size: .75rem; }
@media (max-width: 800px) {
	.fh-hero { min-height: clamp(700px, 95svh, 1050px) !important; }
	.fh-hero-bottom { font-size: .6875rem; }
	.fh-hero-scroll { display: none; }
}

/* Photo cards: Cover has no link setting, so the heading's link is stretched over the card. */
.fh-photo-card { position: relative; }
.fh-photo-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.fh-photo-card .wp-block-cover { height: clamp(300px, 38vw, 570px); min-height: 0 !important; overflow: hidden; border-radius: 3px; }
.fh-photo-card .wp-block-cover__image-background { transition: transform .8s; }
.fh-photo-card:hover .wp-block-cover__image-background { transform: scale(1.025); }
.fh-photo-label { font-size: .75rem; letter-spacing: 2px; color: #fff; }
@media (max-width: 800px) { .fh-photo-card .wp-block-cover { height: 330px; } }

/* Service rows: number and plus sign are decoration, drawn so the summary stays plain editable text. */
.fh-services { counter-reset: fh-service; }
.fh-services .wp-block-details { scroll-margin-top: 80px; counter-increment: fh-service; }
.fh-services summary { display: flex; align-items: center; gap: 30px; padding: 24px 0; list-style: none; cursor: pointer; }
.fh-services summary::-webkit-details-marker { display: none; }
.fh-services summary::before { content: counter(fh-service, decimal-leading-zero); color: #667384; font-size: .875rem; }
.fh-services summary::after { content: "+"; margin-left: auto; font-size: 1.375rem; transition: transform .2s; }
.fh-services details[open] summary::after { transform: rotate(45deg); }
.fh-services details > p { max-width: 700px; margin: 0 45px 25px; }
@media (max-width: 800px) {
	.fh-services summary { gap: 15px; }
	.fh-services details > p { margin-left: 28px; }
}

/* Long project and page text: landing sections set their own spacing, so this applies only to .fh-prose content. */
.fh-prose p { margin-block: 1em; line-height: 1.75; }
.fh-prose li { margin-block: .5em; line-height: 1.7; }
.fh-prose h2 { margin-top: 2em; font-size: var(--wp--preset--font-size--title); letter-spacing: -.8px; }
.fh-prose h3 { margin-top: 1.6em; font-size: var(--wp--preset--font-size--card); letter-spacing: normal; }
.fh-prose h4, .fh-prose h5, .fh-prose h6 { margin-top: 1.4em; font-size: var(--wp--preset--font-size--lead); letter-spacing: normal; }
.fh-prose a:not(.wp-block-button__link) { text-decoration: underline; }
.fh-prose iframe { max-width: 100%; }

/* Inner pages. Full-width sections touch; Post Content's block gap would show as stripes between them. */
.wp-block-post-content > .alignfull { margin-block: 0; }
/* A block added outside a section (or a plugin's page) still respects the page edges; Post Content has no padding setting per template. */
.wp-block-post-content:not(.fh-prose) > :not(.alignfull) { padding-inline: var(--fh-gutter); box-sizing: border-box; }
/* Text links stay recognisable inside running text. Global link style removes underlines, as the home page needs. */
.fh-inner p a:not(.wp-block-button__link), .fh-inner li a { text-decoration: underline; text-underline-offset: 3px; }
/* Gallery stretches a leftover image to fill its row, which blows up a single logo or photo; no block setting turns this off. */
.fh-inner .wp-block-gallery.has-nested-images figure.wp-block-image { flex-grow: 0; }
/* Project sections fade in on scroll. Only hidden once front.js has confirmed it can reveal them, so nothing stays hidden without JavaScript. */
.fh-js .fh-reveal { opacity: 0; transform: translateY(26px); }
.fh-js .fh-reveal.is-visible { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.2, .6, .2, 1), transform .9s cubic-bezier(.2, .6, .2, 1); }
@media (prefers-reduced-motion: reduce) { .fh-js .fh-reveal { opacity: 1; transform: none; transition: none; } }
.fh-reveal .wp-block-image img { width: 100%; }
/* Long lists read as ruled rows, as in the reference; List has no row-line or column setting. */
.fh-rows { columns: 2 320px; column-gap: 40px; padding: 0; list-style: none; }
.fh-rows li { break-inside: avoid; margin: 0; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }

/* Ollie Pro's video modal clips its own close button, which sits above the player. It has no setting for this. */
.ollie-video-modal-overlay .ollie-video-modal { overflow: visible; }
.ollie-video-modal-overlay .ollie-video-modal__content { overflow: hidden; border-radius: inherit; }

.fh-inner iframe { display: block; width: 100%; max-width: 100%; border: 0; }
.fh-inner .wp-block-html iframe { min-height: 420px; border-radius: 3px; }

/* Craft: the photo fills its column, and Columns adds padding of its own when it has a background. */
.fh-craft { gap: 0 !important; margin-block: 0; padding: 0 !important; }
.fh-craft > .wp-block-column:first-child .wp-block-cover { height: 100%; min-height: 540px; }
@media (max-width: 781px) { .fh-craft > .wp-block-column:first-child .wp-block-cover { min-height: 320px; } }

/* Section top: the link sits on the heading's baseline at the far right. */
@media (max-width: 800px) { .fh-section-top { display: block !important; } .fh-section-top > * + * { margin-top: 20px; } }

/* Project grid. The first card spans two columns when the full list shows; Query Loop has no per-item span. */
.fh-project-grid .wp-block-post-template { gap: clamp(22px, 2.6vw, 40px); }
.fh-project-grid .wp-block-post-template > li[hidden] { display: none; }
.fh-project-card { position: relative; }
.fh-project-card .wp-block-post-featured-image { margin: 0; overflow: hidden; border-radius: 3px; }
.fh-project-card .wp-block-post-featured-image img { width: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .6, .2, 1); }
.fh-project-card:hover .wp-block-post-featured-image img { transform: scale(1.02); }
.fh-project-card h3 a::after { content: ""; position: absolute; inset: 0; }
.fh-project-grid .wp-block-post-template:not(.is-filtered) > li:first-child { grid-column: span 2; }
.fh-project-grid .wp-block-post-template:not(.is-filtered) > li:first-child img { aspect-ratio: 16 / 10 !important; }
@media (max-width: 1100px) { .fh-project-grid .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) {
	.fh-project-grid .wp-block-post-template { grid-template-columns: minmax(0, 1fr) !important; }
	.fh-project-grid .wp-block-post-template:not(.is-filtered) > li:first-child { grid-column: span 1; }
	.fh-project-grid .wp-block-post-template:not(.is-filtered) > li:first-child img { aspect-ratio: 4 / 5 !important; }
}

/* Filter pills: the active state changes with the visitor's click, which a block setting can't express. */
.fh-filters .wp-block-button.is-active .wp-block-button__link { background: var(--wp--preset--color--primary-alt); border-color: var(--wp--preset--color--primary-alt); color: var(--wp--preset--color--primary-alt-accent); }

/* Approach: four columns narrow to two on phones; Grid has no per-breakpoint column count. */
@media (max-width: 800px) { .fh-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 25px !important; } }

/* Inquiry form: Fluent Forms has no block settings for these. Underlined fields with small caps labels as in the design;
   short fields pair up two per row (container class fh-half, set in the form) so the form stays compact. */
.fh-inquiry fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 34px); }
.fh-inquiry fieldset > * { grid-column: 1 / -1; }
.fh-inquiry fieldset > .fh-half { grid-column: auto; }
@media (max-width: 560px) { .fh-inquiry fieldset > .fh-half { grid-column: 1 / -1; } }
.fh-inquiry.fluentform .ff-el-group { margin-bottom: 22px; }
.fh-inquiry .ff-el-input--label { margin-bottom: 2px; }
.fh-inquiry .ff-el-input--label label { margin-bottom: 4px; color: #637086; font-size: .6875rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; }
.fh-inquiry.fluentform .ff-el-group .ff-el-form-control { width: 100%; height: auto; padding: 8px 0; border: 0; border-bottom: 1px solid #a9b5c5; border-radius: 0; background: transparent; box-shadow: none; color: #25354a; font: inherit; font-size: 1rem; }
.fh-inquiry.fluentform .ff-el-group select.ff-el-form-control { padding-right: 18px; }
.fh-inquiry.fluentform .ff-el-group .ff-el-form-control:focus { border-bottom-color: var(--wp--preset--color--primary); background: transparent; box-shadow: none; outline: 0; }
.fh-inquiry.fluentform .ff-el-group.ff-el-is-error .ff-el-form-control { border: 0; border-bottom: 1px solid #b3261e; }
.fh-inquiry.fluentform textarea.ff-el-form-control { min-height: 84px; resize: vertical; }
.fh-inquiry .ff-el-form-control::placeholder { color: #788497; opacity: 1; }
.fh-inquiry .ff_t_c, .fh-inquiry .ff-el-form-check-label { color: #637086; font-size: .8125rem; line-height: 1.6; }
.fh-inquiry .ff_t_c a { text-decoration: underline; }
.fh-inquiry .ff_submit_btn_wrapper { margin-top: 6px; }
.fh-inquiry .ff-btn-submit { border: 0; border-radius: 40px; padding: 16px 26px; background: var(--wp--preset--color--primary) !important; color: #fff !important; font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; }
.fh-inquiry .ff-btn-submit:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; }
.fh-inquiry .error, .fh-inquiry .text-danger { margin-top: 6px; color: #b3261e; font-size: .8125rem; }
.ff-message-success { padding: 18px 0; border: 0; box-shadow: none; font-size: 1.0625rem; }

/* Sample questions: the arrow is decoration and must not be copied into the form. */
.is-style-fh-question .wp-block-button__link { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: 100%; text-align: left; }
.is-style-fh-question .wp-block-button__link::after { content: "↗"; }
.is-style-fh-question .wp-block-button__link:hover { background: #e6ebf1; border-color: #8a9bb2; }

/* Catalogue: the calculator lives in the add-to-cart form, so the form stays and only its buying controls are hidden. */
.single_add_to_cart_button, form.cart .quantity, .woocommerce-variation-add-to-cart .quantity { display: none !important; }
.fh-filters-static .wp-block-button.is-active .wp-block-button__link { background: var(--wp--preset--color--primary-alt); border-color: var(--wp--preset--color--primary-alt); color: var(--wp--preset--color--primary-alt-accent); }
/* WooCommerce's classic gallery styles limit it to half its container; here the column already sets the width. */
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery { width: 100% !important; float: none !important; }
.fh-product-card { position: relative; }
.fh-product-card h3 a::after { content: ""; position: absolute; inset: 0; }
.fh-product-card .wp-block-post-featured-image { margin: 0; overflow: hidden; border-radius: 3px; }
.fh-product-card .wp-block-post-featured-image img { transition: transform .5s cubic-bezier(.2, .6, .2, 1); }
.fh-product-card:hover .wp-block-post-featured-image img { transform: scale(1.02); }
.fh-card-grid .wp-block-post-template { gap: clamp(22px, 2.6vw, 40px); }
@media (max-width: 1100px) { .fh-card-grid .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .fh-card-grid .wp-block-post-template:not(:has(.fh-product-card)) { grid-template-columns: minmax(0, 1fr) !important; } }