/*
Theme Name: Quartus Theme
Author: Grenavin
Author URI: https://grenavin.com
Theme URI: https://grenavin.com
Tags: full-site-editing, block-patterns
Text Domain: quartus-theme
Requires at least: 6.4
Requires PHP: 7.4
Version: 1.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
    --wp--custom--shadow--natural: 0 2px 8px rgba(28,38,36,0.06);
   --chl-teal: #1d6574;
    --chl-cream: #eaddc5;
    --chl-mint: #def4f4;
    --chl-accent: #c2542b;
    --chl-ink: #1c2624;
    --chl-border: #dcdcd6;

}


/* Styles intended only for the front.*/
html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/* Navigation */
nav li a {
    text-decoration: none !important;
    font-weight: bold;
    font-family: var(--wp--preset--font-family--baloo-2);
}

nav li a:hover {
    color: var(--wp--preset--color--primary) !important;
}


/* Home Page */
.theme-tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 15px;
    font-size: small;
    text-transform: capitalize;
    font-weight: bold;
}

.theme-tag.mint {
	background-color: var(--wp--preset--color--base);
}

.theme-tag.cream {
	background-color: var(--wp--preset--color--cream);	
}

.home-skip-the-wait .wp-block-columns {
    column-gap: 50px;
}

.home-about {
	column-gap: 40px;
}

.pick-a-theme .wp-block-column .wp-block-group {
    /display: flex;
    /flex-direction: column;
}

.pick-a-theme .wp-block-buttons {
    /margin-top: auto !important;
}

/* Contact Page */
.contact-icon 
{
    gap: 5px;
}

div.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: #fff;
    border: none;
}

/* Footer */
footer {
    margin-top: 0;
}


/* Plugins */
/* Easy Digital Downloads */
.edd-submit.button.blue {
    border-radius: 50px;
    border: 0;
    background: #B1613D;
    padding: 8px 20px;
    letter-spacing: .05rem;
    font-family: 'Nunito';
}

.edd-submit.button.blue:hover {
    background: var(--wp--preset--color--cream);
    color: var(--wp--preset--color--contrast);
}    

/* Product Page: Hero Section - Browser frame */
.gv-frame {
    --gv-chrome: #c9cbc6;
    --gv-border: #dcdcd6;
    max-width: 660px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--gv-border);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(28, 38, 36, 0.12);
    overflow: hidden;
}

/* Kill the flow-layout gap WP injects between the bar and the screen. */
.gv-frame.is-layout-flow > * + * {
    margin-block-start: 0;
}

.gv-frame__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--gv-chrome);
}

.gv-frame__dots {
    display: flex;
    gap: 7px;
    flex: none;
}

.gv-frame__dots span {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
}

.gv-frame__url {
    flex: 1;
    min-width: 0;
    background: #fff;
    border-radius: 999px;
    padding: 6px 18px;
    margin-left: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #5b6b68;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s, box-shadow 0.15s;
}

a.gv-frame__url:hover {
    color: #1d6574;
    box-shadow: 0 0 0 2px #92d1dd;
}

a.gv-frame__url:focus-visible {
    outline: 2px solid #1d6574;
    outline-offset: 2px;
}

.gv-frame__screen {
    display: block;
    max-height: 520px;
    overflow: hidden;
}

.gv-frame__screen.is-layout-flow > * + * {
    margin-block-start: 0;
}

.gv-frame__screen img,
.gv-frame__screen .wp-block-image img {
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
}

.gv-frame__screen .wp-block-image,
.gv-frame__screen figure {
    margin: 0;
}

@media (max-width: 600px) {
    .gv-frame {
        border-radius: 14px;
    }
    .gv-frame__url {
        font-size: 11px;
        padding: 5px 12px;
    }
    .gv-frame__screen {
        max-height: 340px;
    }
}


/* Product Page: Tabs Section */
.chl-tabs {
    color: var(--chl-ink);   
}

/* Kill the flow-layout margins WP injects between direct children. */
.chl-tabs.is-layout-flow > * + * {
    margin-block-start: 0;
}

.chl-tabs > h2 {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}

.chl-lede {
    max-width: 620px;
    margin-left: 0 !important;
}

/* --- Tab row (core/buttons) --- */

.chl-tablist {
    gap: 8px;
    margin: 0 0 28px;
}

.chl-tab .wp-block-button__link,
.chl-tab > a {
    font-weight: 700;
    font-size: 15px;
    color: var(--chl-ink);
    background: #fff;
    border: 1px solid var(--chl-border);
    border-radius: 999px;
    padding: 10px 22px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.15s;
}

.chl-tab .wp-block-button__link:hover,
.chl-tab > a:hover {
    border-color: var(--chl-teal);
    background: #fff;
    color: var(--chl-ink);
}

.chl-tab .wp-block-button__link:focus-visible,
.chl-tab > a:focus-visible {
    outline: 2px solid var(--chl-teal);
    outline-offset: 2px;
}

.chl-tab [aria-selected="true"],
.chl-tab > a[aria-selected="true"] {
    border-color: var(--chl-teal);
}

.chl-tab [aria-selected="true"]::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--chl-accent);
    display: block;
}

/* --- Panels --- */

.chl-panels {
    background: #fff;
    border: 1px solid var(--chl-border);
    border-radius: 28px;
    box-shadow: 0 4px 16px rgba(28, 38, 36, 0.07);
    overflow: hidden;
}

.chl-panels.is-layout-flow > * + * {
    margin-block-start: 0;
}

.chl-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
}

.chl-panel[hidden] {
    display: none;
}

.chl-panel.is-layout-flow > * + * {
    margin-block-start: 0;
}

/* Screenshot side */

.chl-shot {
    background: var(--chl-cream);
    padding: 32px;
    min-height: 440px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.chl-shot.is-layout-flow > * + * {
    margin-block-start: 0;
}

.chl-shot .wp-block-image,
.chl-shot figure {
    margin: 0;
    width: 100%;
    max-width: 660px;
}

.chl-shot img {
    width: 100%;
    display: block;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(28, 38, 36, 0.07);
    max-height: 376px;
    object-fit: cover;
    object-position: top center;
}

/* Placeholder used until the About / Contact captures exist */

.chl-shot-ph {
    width: 100%;
    max-width: 660px;
    min-height: 376px;
    border: 2px dashed var(--chl-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 24px;
}

.chl-shot-ph strong {
    font-size: 18px;
    font-weight: 800;
    color: var(--wp--preset--color--text-muted);
}

.chl-shot-ph span {
    font-size: 14px;
    color: var(--wp--preset--color--text-muted);
}

/* Copy side */

.chl-copy {
    padding: 36px 32px;
    border-left: 1px solid var(--chl-border);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.chl-copy.is-layout-flow > * + * {
    margin-block-start: 0;
}

.chl-badge {
    align-self: flex-start;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 14px;
    background: var(--chl-mint);
    color: var(--chl-teal);
    margin: 0;
}

.chl-badge.is-complete {
    background: var(--chl-cream);
    color: #7a4a1f;
}

.chl-copy h3 {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
}

.chl-copy p:not(.chl-badge) {
    margin: 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--wp--preset--color--text-muted);
}

.chl-copy ul {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--wp--preset--color--text-muted);
}

/* --- Editor: panels are all visible, so label them --- */

.editor-styles-wrapper .chl-panel {
    position: relative;
    border-top: 1px solid var(--chl-border);
}

/* --- Narrow screens --- */

@media (max-width: 900px) {
    .chl-tabs > h2 {
        font-size: 30px;
    }
    .chl-panel {
        grid-template-columns: 1fr;
    }
    .chl-copy {
        border-left: 0;
        border-top: 1px solid var(--chl-border);
    }
    .chl-shot {
        min-height: 0;
        padding: 20px;
    }
}

/* ------------------------------------------------------------
   Panning screenshot — for tall full-page captures.
   Wrap the image in <div class="chl-pan"> and it reveals the
   bottom of the shot on hover, or on click/tap (JS adds
   .is-panning). Falls back to a static top crop with no JS.
   ------------------------------------------------------------ */

.chl-shot .chl-pan {
    width: 100%;
    max-width: 660px;
    height: 376px;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(28, 38, 36, 0.07);
    cursor: ns-resize;
    position: relative;
}

/* Undo the cover-crop from the plain .chl-shot img rule:
   inside the window the image keeps its full natural height. */
.chl-shot .chl-pan img {
    height: auto;
    max-height: none;
    object-fit: fill;
    border-radius: 0;
    box-shadow: none;
    transition: transform 7s linear;
    will-change: transform;
}

/* Percentage in translateY resolves against the image's own
   height, so this lands its bottom edge on the window's. */
.chl-shot .chl-pan:hover img,
.chl-shot .chl-pan.is-panning img {
    transform: translateY(calc(376px - 100%));
}

/* Small hint that the image has more to it. */
.chl-pan::after {
    content: "Hover to scroll";
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--wp--preset--color--primary);
    border-radius: 999px;
    padding: 5px 12px;
    pointer-events: none;
    transition: opacity 0.2s;
}

.chl-pan:hover::after,
.chl-pan.is-panning::after {
    opacity: 0;
}

@media (hover: none) {
    .chl-pan::after {
        content: "Tap to scroll";
    }
}

@media (prefers-reduced-motion: reduce) {
    .chl-shot .chl-pan img {
        transition: none;
    }
}

@media (max-width: 900px) {
    .chl-shot .chl-pan {
        height: 300px;
    }
    .chl-shot .chl-pan:hover img,
    .chl-shot .chl-pan.is-panning img {
        transform: translateY(calc(300px - 100%));
    }
}


/* Product Page: Details Section */
/* ============================================================
   "The thoughtful details, built right in" — 3-up detail cards
   Append to your theme's style.css.

   Pairs with theme-files/details-gutenberg-blocks.html
   (one columns block; each column = image Group + h3 + paragraph).
   ============================================================ */

.gv-details-lede {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.7;
    color: #5b6b68;
    max-width: 620px;
    margin: 0 0 40px;
}

.gv-details {
    gap: 24px;
    align-items: stretch;
}

.gv-details > .wp-block-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Image well --- */

.gv-details__well {
    background: #fdf6ee;
    border: 1px solid #dcdcd6;
    border-radius: 28px;
    overflow: hidden;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.gv-details__well .wp-block-image,
.gv-details__well figure {
    margin: 0;
    width: 100%;
    /height: 100%;
    max-width: none;
}

.gv-details__well img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}