/*
Theme Name: SeaSummon
Template: twentytwentyfour
Version: 1.1.17
Author: SeaSummon
Description: SeaSummon brand child theme built on Twenty Twenty-Four.
*/

.wp-block-navigation-item .wp-block-navigation-item__content {
	padding: 8px 18px;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Suppress the focus box on MOUSE CLICK only (:focus:not(:focus-visible)); the keyboard
   focus ring still shows on Tab, matching the "Download on the Mac App Store" buttons. */
.wp-block-navigation-item__content:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

/* A little extra breathing room between the header nav links */
.wp-block-navigation .wp-block-navigation__container {
	gap: calc(var(--wp--preset--spacing--20) + 2px) !important;
}

.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation-item:not(.current-menu-item) > .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
}

/* Current-page indicator: solid pill */
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--foreground);
	color: #ffffff;
}

/* Hover indicator on non-current links: grey pill plus a wave doodle */
.wp-block-navigation-item:not(.current-menu-item) > .wp-block-navigation-item__content:hover {
	background-color: rgba(20, 23, 26, 0.06);
}

.wp-block-navigation-item:not(.current-menu-item) > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 100px;
	height: 20px;
	background-image: url("assets/images/nav/linkwave2.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	transform: translateX(-50%) translateY(-12px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.wp-block-navigation-item:not(.current-menu-item) > .wp-block-navigation-item__content:hover::after {
	opacity: 1;
}

/* Mobile overlay menu overrides.

   The hover wave is deliberately hidden in the overlay (decision 2026-07-19). It is a
   fixed-width doodle centered on its link, so against right-aligned menu items it either
   overhangs the right margin or needs hand-tuning per label, and that tuning would break
   again the moment a longer menu label is added. The current-page pill communicates state
   well enough on its own at this size. The wave still works as intended in the desktop
   header, which is left untouched.

   The pill gets more breathing room here because the overlay renders at a larger font
   size than the header, where the default 8px/18px reads cramped. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content {
	padding: 12px 28px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.current-menu-item) > .wp-block-navigation-item__content::after {
	display: none;
}

/* SeaSummon wordmark: a distinctive italic serif instead of the site body font */
.wp-block-site-title a {
	font-family: 'DM Serif Display', serif;
	font-style: italic;
	font-weight: 400;
	color: #374e53;
}

.wp-block-site-title a:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

footer p a {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

footer p a:hover {
	background-color: rgba(20, 23, 26, 0.06);
	text-decoration: none;
}

footer p a:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

/* Suppress the focus box on MOUSE CLICK for links/buttons that were showing an outline
   on click: the homepage app card (icon + title, both link to /framesift), the two
   "Download on the Mac App Store" buttons, and the support "Send message" button (they
   all share .wp-block-button__link). :focus:not(:focus-visible) removes it only for
   pointer clicks — the keyboard focus ring still shows on Tab, preserving accessibility.
   The blue form-field focus outline is a separate .ss-form-field rule and is left intact. */
.ss-app-card a:focus:not(:focus-visible),
.wp-block-button__link:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

/* Button focus background: Twenty Twenty-Four's default :focus uses a light grey
   (contrast-2) that leaves the white button text nearly unreadable. Use the dark
   contrast color instead, matching the :active (click) state, so keyboard-focused
   buttons stay high-contrast and consistent. Text stays white via the theme rule. */
.wp-element-button:focus,
.wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
}

/* Pin the footer to the bottom of the viewport on short pages.
   Subtracts the WP admin toolbar's height so logged-in editors don't get a
   phantom scrollbar caused by 100vh not accounting for its offset. */
body.home .wp-site-blocks,
body.page .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

body.home .wp-site-blocks > main,
body.page .wp-site-blocks > main {
	flex: 1;
}

/* Warm highlighted keyword, used in place of a leading icon on feature headings */
mark.ss-highlight {
	background: #f6d9a0;
	color: inherit;
	padding: 0.05em 0.35em;
	border-radius: 6px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Pricing card: soft elevation instead of a flat border */
.ss-price-card {
	box-shadow: 0 10px 30px rgba(20, 23, 26, 0.08), 0 2px 8px rgba(20, 23, 26, 0.05);
}

/* Small trust pills under the price, replacing a single dense sentence */
.ss-badge {
	display: inline-block;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--background);
	padding: 5px 14px;
	border-radius: 999px;
	margin: 4px;
}

/* Homepage tagline: promoted from <p> to <h1> for SEO (was the only page missing an H1),
   with zero intended visual change. theme.json sets a global heading font-weight of 500
   vs the body's 400 (font-family is already the same Noto Serif for both), so weight is
   reset here to keep this looking exactly like the paragraph it replaced. */
.ss-home-h1 {
	font-weight: 400;
}

/* "The problem." intro: the kicker sits on its own line as an eyebrow, with a one-line
   hook headline under it. Only this first paragraph of the intro gets headline
   treatment; the other three keep their inline kickers. The !important overrides the
   group's blockGap so the hook hugs its eyebrow. */
.ss-problem-hook {
	margin-top: 6px !important;
	color: var(--wp--preset--color--foreground);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.4;
}

/* FrameSift persona cards: icon + persona, then a BY HAND / WITH FRAMESIFT pain-relief
   pair. Interior is authored as wp:html in the pattern (see deploy/conventions.md), so
   all presentation lives here. height:100% + the columns' default flex stretch keeps
   the four cards equal height without a guessed min-height. */
.ss-persona-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--panel);
	border-radius: 16px;
	padding: 30px 22px 28px;
	box-shadow: 0 10px 30px rgba(20, 23, 26, 0.08), 0 2px 8px rgba(20, 23, 26, 0.05);
	text-align: left;
}

.ss-persona-card p {
	margin: 0;
}

.ss-persona-icon {
	text-align: center;
}

.ss-persona-card .ss-persona-title {
	text-align: center;
	font-weight: 600;
	margin-top: 8px;
}

.ss-persona-card .ss-persona-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	margin-top: 16px;
	margin-bottom: 3px;
}

.ss-persona-card .ss-persona-label--pain {
	color: var(--wp--preset--color--muted);
}

.ss-persona-card .ss-persona-label--fs {
	color: var(--wp--preset--color--accent);
}

.ss-persona-card .ss-persona-pain {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.ss-persona-card .ss-persona-fix {
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

/* Support page contact form */
.ss-support-card {
	max-width: 560px;
	margin: 0 auto;
	padding: 40px 32px;
	background: var(--wp--preset--color--surface);
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(20, 23, 26, 0.08), 0 2px 8px rgba(20, 23, 26, 0.05);
}

.ss-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 20px;
}

/* Honeypot: off-screen rather than display:none, so bots that skip hidden
   fields still find and fill it in. */
.ss-form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

.ss-form-field label {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--wp--preset--color--foreground);
}

.ss-form-field input,
.ss-form-field select,
.ss-form-field textarea {
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--foreground);
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--panel-border);
	border-radius: 8px;
	padding: 10px 14px;
}

.ss-form-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235b6470'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px;
	padding-right: 40px;
}

.ss-form-field textarea {
	min-height: 140px;
	resize: vertical;
}

.ss-form-field input:focus,
.ss-form-field select:focus,
.ss-form-field textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.ss-support-card .wp-block-buttons {
	margin-top: 4px;
}

.ss-form-submit {
	width: 100%;
	text-align: center;
	border: none;
	cursor: pointer;
}

.ss-form-fineprint {
	margin-top: 20px;
	margin-bottom: 0;
	font-size: 0.85rem;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

.ss-form-notice {
	max-width: 560px;
	margin: 0 auto 24px;
	padding: 14px 20px;
	border-radius: 12px;
	font-size: 0.95rem;
	text-align: center;
}

.ss-form-notice-success {
	background: rgba(43, 108, 176, 0.1);
	color: var(--wp--preset--color--accent-light);
}

.ss-form-notice-error {
	background: rgba(204, 85, 0, 0.1);
	color: #b3450a;
}

/* Custom lightbox: carousel across screenshots and the demo video together */

/* Visible keyboard focus for the lightbox triggers, which lightbox.js turns into
   focusable buttons. :focus-visible so it only shows for keyboard, not mouse clicks. */
.ss-lightbox-trigger:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

body.ss-lightbox-locked {
	overflow: hidden;
}

.ss-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(15, 17, 20, 0.92);
}

.ss-lightbox.is-open {
	display: flex;
}

.ss-lightbox-stage {
	max-width: 88vw;
	max-height: 86vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ss-lightbox-stage img,
.ss-lightbox-stage video {
	max-width: 88vw;
	max-height: 86vh;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.ss-lightbox-close,
.ss-lightbox-prev,
.ss-lightbox-next {
	position: absolute;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
}

.ss-lightbox-close:hover,
.ss-lightbox-prev:hover,
.ss-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.2);
}

.ss-lightbox-close {
	top: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	font-size: 1.75rem;
	line-height: 1;
}

.ss-lightbox-prev,
.ss-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border-radius: 999px;
	font-size: 2rem;
	line-height: 1;
}

.ss-lightbox-prev {
	left: 24px;
}

.ss-lightbox-next {
	right: 24px;
}

@media (max-width: 640px) {
	.ss-lightbox-prev,
	.ss-lightbox-next {
		width: 40px;
		height: 40px;
		font-size: 1.5rem;
	}
	.ss-lightbox-prev { left: 8px; }
	.ss-lightbox-next { right: 8px; }
	.ss-lightbox-close { top: 12px; right: 12px; }
}