/*
Theme Name: Farmacia San Vittore Olona Archive
Theme URI: https://farmaciasanvittoreolona.it/
Author: Farmacia San Vittore Olona
Description: A faithful WordPress recreation of the historic Farmacia San Vittore Olona website, rebuilt from the 2019-2023 archive.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: fsvo
*/

:root {
	--fa-green: #1f7d6b;
	--fa-green-dark: #145a4d;
	--fa-green-light: #2e9c86;
	--fa-cross: #7ab648;
	--fa-sky: #bcd6df;
	--fa-sky-light: #e2eef2;
	--fa-text: #33383a;
	--fa-muted: #6b7a7e;
	--fa-border: #cfdde2;
	--fa-max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: #fff;
	color: var(--fa-text);
	font: 16px/1.65 "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }
a { color: var(--fa-green); }
a:hover { text-decoration: none; }

.fa-wrap { max-width: var(--fa-max); margin: 0 auto; padding: 0 18px; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.fa-skip:focus {
	position: static; width: auto; height: auto; clip: auto;
	display: block; padding: 10px; background: #fff;
}

/* ---------- header ---------- */
.fa-header { background: #fff; }
.fa-header-inner {
	max-width: var(--fa-max); margin: 0 auto; padding: 18px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
}
.fa-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.fa-logo img { width: 240px; max-width: 100%; height: auto; }
.fa-logo-text { line-height: 1; }
.fa-logo-text small {
	display: block; font-size: 13px; letter-spacing: .18em;
	text-transform: lowercase; color: var(--fa-green); margin-bottom: 2px;
}
.fa-logo-text strong {
	display: block; font-family: Georgia, "Times New Roman", serif;
	font-weight: 400; font-size: 27px; color: var(--fa-green-dark);
}
.fa-badge {
	display: flex; align-items: center; gap: 10px;
	color: var(--fa-green-dark); text-decoration: none;
}
.fa-badge-mark {
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--fa-green-dark); color: #fff;
	display: grid; place-items: center; font-weight: 700; font-size: 19px;
	font-family: Georgia, serif;
}
.fa-badge span {
	font-size: 12.5px; font-weight: 700; line-height: 1.15;
	letter-spacing: .04em; text-transform: uppercase;
}

/* ---------- navigation ---------- */
.fa-nav { background: var(--fa-green); }
.fa-nav-inner { max-width: var(--fa-max); margin: 0 auto; padding: 0 18px; }
.fa-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.fa-nav li { position: relative; }
.fa-nav a {
	display: block; padding: 13px 16px; color: #fff; text-decoration: none;
	font-size: 14.5px; letter-spacing: .01em;
}
.fa-nav a:hover { background: rgba(255, 255, 255, .14); }
.fa-nav .current-menu-item > a,
.fa-nav .current_page_item > a,
.fa-nav .current-menu-ancestor > a,
.fa-nav .current_page_ancestor > a { background: var(--fa-green-dark); font-weight: 700; }
.fa-nav ul ul {
	display: none; position: absolute; left: 0; top: 100%; z-index: 40;
	min-width: 260px; background: var(--fa-green-dark);
	flex-direction: column; box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
}
.fa-nav li:hover > ul, .fa-nav li:focus-within > ul { display: flex; }
.fa-nav ul ul a { padding: 10px 15px; font-size: 14px; }
.fa-nav-toggle {
	display: none; width: 100%; background: none; border: 0; color: #fff;
	padding: 13px 0; font-size: 15px; font-weight: 700; cursor: pointer; text-align: left;
}

/* ---------- hero ---------- */
.fa-hero { background: var(--fa-sky); overflow: hidden; }
.fa-hero-inner {
	max-width: var(--fa-max); margin: 0 auto; padding: 0 18px;
	display: flex; align-items: flex-end; gap: 30px; flex-wrap: wrap;
}
.fa-hero-img { flex: 0 1 460px; }
.fa-hero-img img { display: block; width: 100%; height: auto; }
.fa-hero-copy { flex: 1 1 320px; padding: 34px 0; }
.fa-hero-copy h2 {
	margin: 0 0 10px; font-size: 25px; line-height: 1.25;
	color: var(--fa-green-dark); text-transform: uppercase; letter-spacing: .01em;
}
.fa-hero-copy p { margin: 0 0 16px; color: #3d4a4d; }
.fa-btn {
	display: inline-block; background: var(--fa-green); color: #fff;
	text-decoration: none; font-weight: 700; font-size: 14.5px;
	padding: 11px 24px; letter-spacing: .03em;
}
.fa-btn:hover { background: var(--fa-green-dark); }

/* ---------- layout ---------- */
.fa-main { padding: 30px 0 44px; }
.fa-cols { display: flex; gap: 30px; align-items: flex-start; }
.fa-content { flex: 1 1 auto; min-width: 0; }
.fa-sidebar { flex: 0 0 262px; }

.fa-breadcrumb { font-size: 13px; color: var(--fa-muted); margin: 0 0 14px; }
.fa-breadcrumb a { color: var(--fa-muted); }

/* ---------- typography ---------- */
.fa-entry h1 {
	font-size: 28px; line-height: 1.22; margin: 0 0 18px;
	color: var(--fa-green-dark);
}
.fa-entry h2 { font-size: 21px; margin: 28px 0 10px; color: var(--fa-green-dark); }
.fa-entry h3 { font-size: 17.5px; margin: 22px 0 8px; color: var(--fa-green-dark); }
.fa-entry p { margin: 0 0 14px; }
.fa-entry ul, .fa-entry ol { margin: 0 0 16px; padding-left: 22px; }
.fa-entry li { margin-bottom: 6px; }
.fa-entry table { border-collapse: collapse; width: 100%; margin-bottom: 18px; }
.fa-entry th, .fa-entry td { border: 1px solid var(--fa-border); padding: 8px 10px; text-align: left; }
.fa-entry th { background: var(--fa-sky-light); }
.fa-entry blockquote {
	margin: 0 0 16px; padding: 4px 0 4px 18px;
	border-left: 3px solid var(--fa-cross); font-style: italic; color: #47585c;
}
.fa-table-scroll { overflow-x: auto; }

/* ---------- sidebar ---------- */
.fa-box { background: var(--fa-sky-light); padding: 18px; margin-bottom: 18px; }
.fa-box h2 {
	font-size: 16px; margin: 0 0 12px; color: var(--fa-green-dark);
	padding-bottom: 8px; border-bottom: 2px solid var(--fa-green);
}
.fa-box ul { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.fa-box li { border-bottom: 1px solid rgba(0, 0, 0, .07); }
.fa-box li:last-child { border-bottom: 0; }
.fa-box li a {
	display: block; padding: 7px 0 7px 15px; position: relative; text-decoration: none;
}
.fa-box li a::before {
	content: "+"; position: absolute; left: 0; color: var(--fa-cross); font-weight: 700;
}
.fa-box li.is-current > a { font-weight: 700; }
.fa-cta-box {
	background: var(--fa-green); color: #fff; padding: 18px; margin-bottom: 18px;
}
.fa-cta-box h2 { color: #fff; border-bottom-color: rgba(255, 255, 255, .4); }
.fa-cta-box p { margin: 0 0 12px; font-size: 14.5px; }
.fa-cta-box a { color: #fff; font-weight: 700; }

/* ---------- cards / listings ---------- */
.fa-cards {
	list-style: none; margin: 0 0 22px; padding: 0; display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px;
}
.fa-cards li { background: var(--fa-sky-light); }
.fa-cards a {
	display: block; padding: 15px 17px; text-decoration: none;
	color: var(--fa-green-dark); font-weight: 600;
	border-left: 4px solid var(--fa-green);
}
.fa-cards a:hover { background: var(--fa-sky); }
.fa-list { list-style: none; margin: 0; padding: 0; }
.fa-list li { padding: 12px 0; border-bottom: 1px solid var(--fa-border); }
.fa-list li:last-child { border-bottom: 0; }
.fa-list a { text-decoration: none; font-weight: 600; font-size: 17px; }
.fa-date { display: block; font-size: 13px; color: var(--fa-muted); margin-top: 2px; }
.fa-more {
	display: inline-block; background: var(--fa-green); color: #fff;
	text-decoration: none; font-size: 14px; padding: 8px 17px; margin-top: 14px;
}
.fa-more:hover { background: var(--fa-green-dark); }

/* ---------- photos ---------- */
.fa-photo { display: block; height: auto; max-width: 100%; }
.fa-photo-wide { width: 100%; margin: 0 0 18px; }
.fa-has-photo::after { content: ""; display: block; clear: both; }
.fa-photo-right { float: right; width: 270px; margin: 0 0 16px 22px; }
.fa-gallery {
	list-style: none; margin: 0; padding: 0; display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px;
}

/* ---------- footer ---------- */
.fa-footer {
	background: var(--fa-green-dark); color: #d5e6e2; margin-top: 30px;
	padding: 30px 0; font-size: 14.5px;
}
.fa-footer a { color: #fff; }
.fa-footer-cols { display: flex; gap: 34px; flex-wrap: wrap; }
.fa-footer-cols > div { flex: 1 1 230px; }
.fa-footer h2 { font-size: 15px; color: #fff; margin: 0 0 10px; }
.fa-footer ul { list-style: none; margin: 0; padding: 0; }
.fa-footer li { margin-bottom: 6px; }
.fa-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .17); margin-top: 22px;
	padding-top: 15px; font-size: 13px; color: #a8c4bf;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.fa-cols { flex-direction: column; }
	.fa-sidebar { flex: 1 1 auto; width: 100%; }
	.fa-hero-inner { flex-direction: column; align-items: stretch; }
	.fa-hero-copy { padding: 22px 0 28px; }
}
@media (max-width: 680px) {
	.fa-nav-toggle { display: block; }
	.fa-nav ul.fa-menu { display: none; flex-direction: column; }
	.fa-nav ul.fa-menu.is-open { display: flex; }
	.fa-nav ul ul { position: static; box-shadow: none; min-width: 0; display: flex; }
	.fa-nav ul ul a { padding-left: 32px; }
	.fa-photo-right { float: none; width: 100%; margin: 0 0 16px; }
	.fa-entry h1 { font-size: 23px; }
	.fa-logo img { width: 190px; }
}