/* Haugaland Pride – supplementary styles. Most styling lives in theme.json. */

:root {
	--hp-rainbow: var(--wp--preset--gradient--rainbow);
	--hp-radius: 18px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

:where(.wp-site-blocks) > main { margin-block-start: 0; }

/* Skip link visible on focus */
.skip-link.screen-reader-text:focus { background: var(--wp--preset--color--contrast); color: #fff; padding: .75rem 1rem; z-index: 100000; }

/* ---------- Layout ---------- */
:where(.wp-site-blocks) > footer, :where(.wp-site-blocks) > .wp-block-template-part:last-child { margin-block-start: 0; }
.hp-header__inner { max-width: var(--wp--style--global--wide-size); margin-inline: auto !important; padding-inline: var(--wp--preset--spacing--40); box-sizing: border-box; width: 100%; }
.hp-hero .wp-block-cover__inner-container { max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding-inline: var(--wp--preset--spacing--40); box-sizing: border-box; width: 100% !important; }

/* ---------- Header ---------- */
.hp-rainbow-bar { height: 6px; background: var(--hp-rainbow); }
/* No backdrop-filter: it would trap the fixed-position mobile menu overlay inside the header. */
.hp-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--wp--preset--color--lilac); }
.admin-bar .hp-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .hp-header { top: 0; } }
.hp-header .wp-block-site-logo img { width: auto; max-height: 56px; }
.hp-header .wp-block-navigation .wp-block-navigation-item__content { padding: .35rem .15rem; background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .2s ease; }
.hp-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.hp-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { background-size: 100% 2px; }
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container { border-radius: 14px; border: 1px solid var(--wp--preset--color--lilac) !important; box-shadow: var(--wp--preset--shadow--soft); padding: .5rem !important; }
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content { text-transform: none; font-family: var(--wp--preset--font-family--body); letter-spacing: 0; font-size: 1rem; }

/* Header CTA only where there is room; on small screens it lives in the mobile menu instead. */
.hp-header .wp-block-buttons.hp-header-cta { display: none; }
@media (min-width: 1100px) { .hp-header .wp-block-buttons.hp-header-cta { display: flex; } }
.hp-nav-cta { display: none !important; }

/* Mobile menu overlay */
.hp-header .wp-block-navigation__responsive-container.is-menu-open { padding: 1rem 1.5rem 2rem !important; }
.hp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3rem !important; align-items: flex-start; }
.hp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: .5rem; right: .25rem; }
.hp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: .75rem !important; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; align-items: flex-start !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.6rem; padding: .3rem 0 !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { padding: 0 0 .5rem 1rem !important; gap: 0 !important; border: 0 !important; box-shadow: none !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.15rem; font-family: var(--wp--preset--font-family--body); text-transform: none; letter-spacing: 0; color: var(--wp--preset--color--muted); }
.wp-block-navigation__responsive-container.is-menu-open .hp-nav-cta { display: flex !important; margin-top: 1rem; }
.wp-block-navigation__responsive-container.is-menu-open .hp-nav-cta .wp-block-navigation-item__content { background: var(--wp--preset--color--contrast); color: #fff !important; border-radius: 999px; padding: .6em 1.4em !important; font-size: 1.1rem; }

/* Compact header on phones */
@media (max-width: 781px) {
	.hp-header__inner { padding-block: .5rem !important; }
	.hp-header .wp-block-site-tagline { display: none; }
	.hp-header .wp-block-site-logo img { max-height: 38px; }
	.hp-header .wp-block-site-title { font-size: 1.1rem !important; white-space: nowrap; }
	.hp-header .wp-block-woocommerce-customer-account { display: none; }
	.hp-header__inner > .wp-block-group:last-child { gap: .5rem !important; }
}
.hp-header .wc-block-mini-cart__button { padding: .4rem; }

/* ---------- Buttons ---------- */
.wp-block-button__link { transition: background-color .15s ease, transform .15s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.is-style-outline > .wp-block-button__link { border: 2px solid currentColor; background: transparent; color: var(--wp--preset--color--contrast); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); color: #fff; }
.wp-block-button.is-style-light > .wp-block-button__link { background: #fff; color: var(--wp--preset--color--contrast); }
.wp-block-button.is-style-light > .wp-block-button__link:hover { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--contrast); }

/* ---------- Block style variations ---------- */
.is-style-card { background: #fff; border-radius: var(--hp-radius); padding: var(--wp--preset--spacing--40); box-shadow: var(--wp--preset--shadow--soft); border: 1px solid var(--wp--preset--color--lilac); }
.is-style-rainbow-top { position: relative; overflow: hidden; }
.is-style-rainbow-top::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--hp-rainbow); }
.wp-block-image.is-style-logo img { filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; object-fit: contain; border-radius: 0; }
.wp-block-image.is-style-logo img:hover { filter: none; opacity: 1; }
.wp-block-heading.is-style-eyebrow { font-family: var(--wp--preset--font-family--heading); font-size: .9375rem !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--wp--preset--color--primary-dark); }
.has-contrast-background-color .wp-block-heading.is-style-eyebrow,
.has-dusk-gradient-background .wp-block-heading.is-style-eyebrow { color: var(--wp--preset--color--yellow); }
.wp-block-separator.is-style-rainbow { border: 0; height: 6px; background: var(--hp-rainbow); border-radius: 99px; opacity: 1; max-width: 120px; margin-left: 0; }
.wp-block-separator.is-style-rainbow.aligncenter { margin-left: auto; }
ul.is-style-checks { list-style: none; padding-left: 0; }
ul.is-style-checks li { position: relative; padding-left: 2rem; margin-bottom: .5rem; }
ul.is-style-checks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--wp--preset--color--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 65% no-repeat; }

/* Dark sections: links & headings inherit */
.has-contrast-background-color :where(h1,h2,h3,h4,h5,h6),
.has-dusk-gradient-background :where(h1,h2,h3,h4,h5,h6) { color: inherit; }
.has-contrast-background-color a:where(:not(.wp-element-button)),
.has-dusk-gradient-background a:where(:not(.wp-element-button)) { color: inherit; }

/* ---------- Cards / grids ---------- */
.hp-card { transition: transform .2s ease, box-shadow .2s ease; height: 100%; }
.hp-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(33, 21, 44, .4); }
.hp-card .wp-block-image img, .hp-card .wp-block-post-featured-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.wp-block-post-template.is-layout-grid > li { display: flex; }
.wp-block-post-template.is-layout-grid > li > * { flex: 1; }

/* Board member portraits */
.hp-person .wp-block-image img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

/* Resource list items: logo box */
.hp-resource .wp-block-image img { width: 100%; height: 88px; object-fit: contain; border-radius: 0; }

/* Details (accordion) */
.wp-block-details summary { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-weight: 500; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--wp--preset--color--primary-dark); transition: transform .2s; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details[open] summary { margin-bottom: .75rem; }
.wp-block-details + .wp-block-details { margin-top: .75rem; }

/* Hero */
.hp-hero h1 { text-wrap: balance; }
.hp-hero .hp-hero__logo img { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); border-radius: 0; }

/* Kulby embed */
.hp-kulby { min-height: 200px; }
.hp-kulby iframe { width: 100%; border: 0; border-radius: var(--hp-radius); }

/* ---------- Forms (hp/form block) ---------- */
.hp-form { display: grid; gap: 1rem; }
.hp-form label { display: block; font-weight: 600; margin-bottom: .35rem; }
.hp-form input[type=text], .hp-form input[type=email], .hp-form input[type=tel], .hp-form textarea, .hp-form select {
	width: 100%; box-sizing: border-box; padding: .8rem 1rem; font: inherit; border: 2px solid var(--wp--preset--color--lilac); border-radius: 12px; background: #fff; color: inherit;
}
.hp-form input:focus, .hp-form textarea:focus, .hp-form select:focus { outline: none; border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 4px rgba(169, 93, 224, .2); }
.hp-form fieldset { border: 0; padding: 0; margin: 0; }
.hp-form legend { font-weight: 600; margin-bottom: .5rem; }
.hp-form .hp-form__checks { display: grid; gap: .4rem; }
.hp-form .hp-form__checks label { font-weight: 400; display: flex; gap: .6rem; align-items: flex-start; margin: 0; }
.hp-form .hp-form__checks input { margin-top: .35rem; accent-color: var(--wp--preset--color--primary-dark); }
.hp-form .hp-form__row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hp-form .hp-form__hp { position: absolute; left: -9999px; }
.hp-form button { justify-self: start; cursor: pointer; border: 0; }
.hp-form-notice { padding: 1rem 1.25rem; border-radius: 12px; font-weight: 500; }
.hp-form-notice--ok { background: #E3F6E9; color: #0F5B2A; }
.hp-form-notice--error { background: #FDE7E7; color: #8A1111; }

/* ---------- WooCommerce ---------- */
.wc-block-components-product-price, .wp-block-woocommerce-product-price { font-weight: 600; }
.wc-block-grid__product, .wp-block-woocommerce-product-template > li { text-align: left; }
.wp-block-woocommerce-product-template .wc-block-components-product-image img,
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image img { border-radius: 14px; aspect-ratio: 1; object-fit: cover; background: var(--wp--preset--color--mist); }
.wp-block-woocommerce-product-template .wp-block-post-title a { text-decoration: none; }
.wc-block-components-button:not(.is-link), .wp-block-button.wc-block-components-product-button .wp-block-button__link { border-radius: 999px !important; }
.woocommerce-store-notice, p.demo_store { background: var(--wp--preset--color--contrast); }

/* ---------- Footer ---------- */
.hp-footer a { text-decoration: none; }
.hp-footer a:hover { text-decoration: underline; }
.hp-footer .wp-block-social-links .wp-social-link { background: rgba(255, 255, 255, .12) !important; }

/* Utility */
.hp-balance { text-wrap: balance; }
.hp-sticky { position: sticky; top: 110px; }
.hp-plain-list { list-style: none; } .hp-plain-list li { margin-bottom: .4rem; }