/**
 * Front page styles for shop.fly1.no.
 *
 * Built on the shop's own palette from storefront-child: #0099FF as the accent,
 * #E00025 for prices, #1F6695 for the deep blue. Nothing new is invented here —
 * the front page should look like the rest of the shop, not like a landing page
 * someone bolted on.
 *
 * Everything is scoped under .fly1-front so it cannot reach the theme.
 */

.fly1-front {
	--f1-blue: #0099FF;
	--f1-deep: #12212C;
	--f1-ink: #1D2B36;
	--f1-ink-2: #4A5A66;
	--f1-muted: #7A8A96;
	--f1-line: #E1E7EB;
	--f1-bg: #F7F9FA;
	--f1-price: #E00025;

	color: var(--f1-ink);
	line-height: 1.55;
}

.fly1-front section {
	margin: 0 0 46px;
}

.fly1-front h2 {
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0 0 2px;
	color: var(--f1-ink);
}

.fly1-front .f1-sub {
	color: var(--f1-muted);
	font-size: 0.95rem;
	margin: 0 0 20px;
}

.fly1-front .f1-sub-lys {
	color: #9DB3C2;
}

/* ---- 1 · tre veier inn --------------------------------------------------- */

.f1-veier-rad {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.f1-vei {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 3px;
	min-height: 165px;
	padding: 20px;
	border-radius: 3px;
	background: #2C3A44;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	transition: transform .15s ease;
}

.f1-vei:hover,
.f1-vei:focus {
	color: #fff;
	transform: translateY(-2px);
}

.f1-vei-hoved {
	background: #0E5E9E;
}

.f1-vei-tall {
	position: absolute;
	top: 15px;
	right: 17px;
	font-size: 0.76rem;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .17);
	white-space: nowrap;
}

.f1-vei-navn {
	font-size: 1.2rem;
	font-weight: 500;
}

.f1-vei-tekst {
	font-size: 0.87rem;
	opacity: .84;
}

/* ---- 2 · delenummer ------------------------------------------------------ */

.f1-finner {
	background: var(--f1-deep);
	border-radius: 3px;
	padding: 30px 32px 26px;
}

.f1-finner h2 {
	color: #fff;
}

.f1-sok {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.f1-sok input[type="search"] {
	flex: 1;
	min-width: 240px;
	padding: 13px 15px;
	border: 0;
	border-radius: 2px;
	font-size: 0.94rem;
	background: #fff;
	color: var(--f1-ink);
}

.f1-sok button {
	padding: 13px 26px;
	border: 0;
	border-radius: 2px;
	background: var(--f1-blue);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
}

.f1-sok button:hover {
	background: #0086e0;
}

.f1-motorer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 18px;
}

.f1-motorer a {
	font-size: 0.83rem;
	padding: 6px 15px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .24);
	color: #D9E6F0;
	text-decoration: none;
	white-space: nowrap;
}

.f1-motorer a:hover {
	background: var(--f1-blue);
	border-color: var(--f1-blue);
	color: #fff;
}

.f1-motorer .f1-alle {
	border: 0;
	color: #9FD4FF;
	padding-left: 6px;
}

.f1-motorer .f1-alle:hover {
	background: none;
	color: #fff;
}

/* ---- 3 · slitedeler ------------------------------------------------------ */

.f1-varer {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.f1-vare {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--f1-line);
	border-radius: 3px;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	color: inherit;
}

.f1-vare:hover {
	border-color: #C3CFD8;
	color: inherit;
}

.f1-vare-bilde {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 140px;
	background: #F4F7F9;
	border-bottom: 1px solid var(--f1-line);
}

.f1-vare-bilde img {
	max-height: 118px;
	max-width: 82%;
	width: auto;
	object-fit: contain;
}

.f1-vare-tekst {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 13px 14px 15px;
	flex: 1;
}

.f1-vare-sku {
	font-size: 0.73rem;
	color: var(--f1-muted);
	font-variant-numeric: tabular-nums;
}

.f1-vare-navn {
	font-size: 0.93rem;
	font-weight: 600;
	line-height: 1.3;
}

.f1-vare-lev {
	font-size: 0.75rem;
	color: var(--f1-ink-2);
}

.f1-vare-pris {
	margin-top: auto;
	padding-top: 6px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--f1-price);
}

.f1-vare-pris .woocommerce-Price-amount {
	color: inherit;
}

/* ---- 4 · pilotutstyr ----------------------------------------------------- */

.f1-pilotrad {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.f1-pilotkort {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-height: 104px;
	padding: 18px;
	border: 1px solid var(--f1-line);
	border-radius: 3px;
	background: #fff;
	text-decoration: none;
	color: inherit;
}

.f1-pilotkort:hover {
	border-color: var(--f1-blue);
	color: inherit;
}

.f1-pilot-navn {
	font-size: 1rem;
	font-weight: 500;
}

.f1-pilot-antall {
	margin-top: auto;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--f1-blue);
}

/* ---- 5 · motorlenker ute på fly1.no -------------------------------------- */

.f1-motorliste {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}

.f1-motorliste a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 15px 16px;
	border: 1px solid var(--f1-line);
	border-left: 3px solid var(--f1-blue);
	border-radius: 3px;
	background: #fff;
	text-decoration: none;
	color: inherit;
}

.f1-motorliste a:hover {
	background: var(--f1-bg);
	color: inherit;
}

.f1-motorliste strong {
	font-size: 0.92rem;
	font-weight: 600;
}

.f1-motorliste span {
	font-size: 0.82rem;
	color: var(--f1-muted);
}

/* ---- 6 · trygghet -------------------------------------------------------- */

.f1-trygghet {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 26px 0 0;
	border-top: 1px solid var(--f1-line);
}

.f1-trygg {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-left: 13px;
	border-left: 2px solid var(--f1-blue);
}

.f1-trygg strong {
	font-size: 0.95rem;
	font-weight: 600;
}

.f1-trygg span {
	font-size: 0.86rem;
	color: var(--f1-muted);
	line-height: 1.45;
}

/* ---- responsivt ---------------------------------------------------------- */

@media (max-width: 900px) {
	.f1-veier-rad,
	.f1-varer,
	.f1-pilotrad,
	.f1-trygghet {
		grid-template-columns: repeat(2, 1fr);
	}

	.f1-motorliste {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 560px) {
	.fly1-front h2 {
		font-size: 1.3rem;
	}

	.f1-veier-rad,
	.f1-varer,
	.f1-pilotrad,
	.f1-trygghet,
	.f1-motorliste {
		grid-template-columns: 1fr;
	}

	.f1-vei {
		min-height: 132px;
	}

	.f1-finner {
		padding: 24px 18px 22px;
	}

	.f1-sok button {
		width: 100%;
	}
}

/* ---- det temaet legger oppå ---------------------------------------------- */

/*
 * Storefront underlines every link inside .hentry .entry-content, which is a
 * 0-3-1 selector and beats the text-decoration: none on the cards themselves.
 * The cards are whole clickable blocks, not sentences with a link in them, so
 * the underline reads as damage. Matching the theme's own depth wins it back
 * without reaching for !important.
 */
.fly1-front a,
.fly1-front a:hover,
.fly1-front a:focus,
.hentry .entry-content .fly1-front a,
.hentry .entry-content .fly1-front a:hover,
.hentry .entry-content .fly1-front a:focus {
	text-decoration: none;
}

/*
 * The page is titled "Forside" in wp-admin so it can be found there. Printing
 * that as an H1 above the sections tells a visitor nothing. This stylesheet is
 * only enqueued on the front page, so the rule cannot reach another page.
 */
.home .entry-title {
	display: none;
}