/* Root variables */
:root {
  /* Colors */
  --bg: #f8f6f2; /* off-white */
  --surface: #ffffff;
  --text: #1f2937; /* deep neutral */
  --muted: #6b7280;
  --border: #e8e3da; /* subtle neutral border */
  --accent: #7a1f17; /* Falu red-ish */
  --accent-600: #6a1b14;
  /* Header */
  --header-h: 72px;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Radius */
  --radius-s: 6px;
  --radius-m: 16px; /* calmer, softer corners */
  --radius-l: 18px;

  /* Layout */
  --container: 1100px;
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Custom brand font */
@font-face {
  font-family: 'Investorlogo';
  src: url('fonts/OpenType-TT/Investorlogo-Regular.ttf') format('truetype'),
       url('fonts/OpenType-PS/Investorlogo-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Global resets */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  line-height: 1.7; /* slightly wider for editorial calm */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Link interactions and focus styles */
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  line-height: 1.3;
  margin: 0 0 var(--space-3);
}

/* Use brand font for primary headings */
h1,
h2 {
  font-family: 'Investorlogo', 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  text-transform: uppercase;
}

/* Responsive heading sizes */
h1 { font-size: clamp(2.1rem, 2.2vw + 1rem, 2.8rem); }
h2 { font-size: clamp(1.6rem, 1.4vw + 1rem, 2.2rem); }

/* Titles are now inside text-content, so they inherit text-content centering */

p { margin: 0 0 var(--space-4); }

.flow > * + * { margin-top: var(--space-4); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section { padding-block: calc(var(--space-6) * 1.25); }

/* Alternating red section styling (Falu red postcard within container) */
.section.red { background: transparent; }

.section.red .container {
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--radius-l);
  padding: calc(var(--space-6) * 0.75) var(--space-6);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.section.red .container h1,
.section.red .container h2,
.section.red .container h3,
.section.red .container p,
.section.red .container a { color: #ffffff; }

.section.red .container .button {
  background: #ffffff;
  color: var(--accent);
  border-color: transparent;
}

.section.red .container .button:hover { background: #f3f4f6; }

/* Ensure form labels are readable on red background */
.section.red .container .field label { color: #ffffff; }

/* Postcard styling for alternating content sections on subpages */
.content-section.red {
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--radius-l);
  padding: calc(var(--space-6) * 0.75) var(--space-6);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.content-section.red h1,
.content-section.red h2,
.content-section.red h3,
.content-section.red p,
.content-section.red a { color: #ffffff; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 0;
  width: 100%;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.brand {
  font-family: 'Investorlogo', 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 1.9rem; /* larger brand */
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center; /* center brand text with logo and nav */
  gap: 0; /* avoid extra spacing between initials and words */
  text-transform: uppercase;
  word-spacing: 0.18em; /* clearer space between Skafts och Gård */
}

/* Larger initials for brand text */
.brand-initial {
  font-size: 1.3em;
  line-height: 1;
  display: inline;
  vertical-align: baseline;
}

.footer-brand .brand-initial {
  font-size: 1.35em;
}

/* Header-only tweak: align larger initials to text baseline */
.site-header .brand .brand-initial {
  vertical-align: baseline;
  position: relative;
  top: -0.045em;
}
/* Fine-tune each initial in the header for perfect baseline alignment */
.site-header .brand .brand-initial:first-of-type { top: -0.053em; }
.site-header .brand .brand-initial:nth-of-type(2) { top: -0.048em; }
.site-header .brand .brand-initial:nth-of-type(2) { margin-left: 0.2em; }

.brand-logo {
  height: 64px;
  width: auto;
  display: inline-block;
  margin-right: var(--space-2); /* manual spacing between logo and text */
  align-self: center; /* keep logo centered with baseline text */
}

.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px; /* tap target */
  height: 44px; /* tap target */
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  cursor: pointer;
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hamburger {
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--text);
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--text);
}

.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }

.site-nav { display: none; }

/* Ensure comfortable tap targets for nav links */
.site-nav a {
	display: block;
	min-height: 44px;
	line-height: 44px;
	padding: 0 var(--space-4);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.site-nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
}

.site-nav a:hover {
  color: var(--accent);
}

.site-header.open .site-nav {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: var(--header-h);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow-1);
	padding-block: var(--space-2);
}

.site-header.open .site-nav ul {
	list-style: none;
	margin: 0;
	padding: var(--space-4);
	display: grid;
	gap: var(--space-3);
}

.site-header.open .site-nav a { padding: 0 var(--space-4); }

/* Desktop nav */
@media (min-width: 768px) {
  .menu-toggle { display: none; }
  .site-nav {
    display: block;
    position: static;
  }
  .site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-4); /* tighten spacing on desktop */
  }
  .site-nav a { padding: 0 var(--space-2); }
}

/* Hero */
.hero {
  position: relative;
  min-height: 85vh;
  display: grid;
  place-items: center;
  color: #ffffff;
  background-color: #d8d3c9; /* fallback if image is missing */
  background: url('assets/hero.jpg') center / cover no-repeat fixed;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* ~35% overlay */
}

.hero-inner {
  position: relative;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
  margin-bottom: var(--space-2);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.hero p {
  font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem);
  color: #f3f4f6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Cards */
.cards h2 { margin-bottom: var(--space-5); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #ece7df; /* neutral placeholder if no image */
}

.card-body { padding: var(--space-5); }

.card h3 { margin-bottom: var(--space-2); }

/* News */
.news h2 { margin-bottom: var(--space-4); }

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.news-list article {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
}

.news-list time {
  color: var(--muted);
  font-size: 0.95rem;
}

.news-list h3 { font-size: 1.1rem; }

/* Contact */
.contact h2 { margin-bottom: var(--space-4); }

form { margin-top: var(--space-2); }

.form-grid {
  display: grid;
  gap: var(--space-4);
}

.field label {
  display: block;
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="time"],
textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}

textarea { resize: vertical; }

/* Form focus styles */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="date"]:focus-visible,
input[type="time"]:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.button {
  display: inline-block;
  background: var(--accent);
  color: #ffffff;
  border: 1px solid transparent;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-s);
  font-weight: 600;
  cursor: pointer;
  min-height: 44px; /* ensure ≥44px */
}

.button:hover {
  background: var(--accent-600);
}

.button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.form-note {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: var(--space-2);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: calc(var(--space-6) * 1);
}

.footer-inner {
  display: grid;
  gap: var(--space-6);
  padding-block: calc(var(--space-6) * 1.25);
}

.footer-grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    align-items: start;
  }
}

.footer-brand h3 { margin-bottom: var(--space-3); }
.footer-brand p { color: var(--muted); }

/* Use brand font in footer title as well */
.footer-brand h3 {
  font-family: 'Investorlogo', 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 2rem; /* larger footer brand */
}

.footer-logo {
  display: inline-block;
  height: 80px;
  width: auto;
  margin-top: var(--space-3);
}

@media (min-width: 768px) {
  .footer-logo { height: 110px; }
}

.footer-links ul,
.footer-contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.footer-links a { color: inherit; }

.footer-links a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.footer-map iframe {
  width: 100%;
  height: 240px;
  border: 0;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-1);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-block: var(--space-4);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-footer p { margin: 0; }

/* Responsive tweaks */
@media (min-width: 640px) {
  .section { padding-block: calc(var(--space-6) * 1.5); }
}

@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .field.full { grid-column: 1 / -1; }
}

/* Explicit grid breaks for the four-card section */
.cards .grid { grid-template-columns: 1fr; gap: var(--space-5); }

@media (min-width: 640px) {
	.cards .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.cards .grid { grid-template-columns: repeat(4, 1fr); gap: calc(var(--space-6) * 1.25); }
}

/* Reduce hero height on smaller screens while keeping readability */

@media (max-width: 639px) {
	.hero { min-height: 70vh; background-attachment: scroll; }
	/* Lighter shadows on mobile for smoother scrolling */
	.card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }
	.site-header.open .site-nav { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }

	/* Make collage photos larger on mobile */
	.collage-grid { grid-template-columns: 1fr; }
	.collage-item img { height: auto; }
}

/* Accessible skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #ffffff;
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 0.5rem 0.75rem;
  z-index: 2000;
  border-radius: var(--radius-s);
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* Header state when scrolled */
.site-header.scrolled {
  background: rgba(248, 246, 242, 0.78); /* off-white, slightly more translucent */
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(180%) blur(6px);
}

/* Layout offset: add space for fixed header on pages without hero */
main { padding-top: var(--header-h); }
.has-hero main { padding-top: 0; }

/* Scroll animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animation classes */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll.animate-in-delay {
  animation: fadeInUp 0.8s ease-out forwards;
}

.animate-on-scroll.animate-in-scale {
  animation: scaleIn 0.7s ease-out forwards;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .hero { background-attachment: scroll; }
  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }
}

/* Thank-you page layout */
.thankyou {
  display: grid;
  align-items: center;
  min-height: 70vh;
}

.thankyou .container { max-width: 720px; }

.thankyou-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  padding: calc(var(--space-6) * 1.25);
  text-align: center;
}

.thankyou h1 {
  font-size: clamp(1.9rem, 2vw + 1rem, 2.5rem);
  margin-bottom: var(--space-4);
}

.thankyou p { font-size: 1.05rem; }

/* Garden page content layout */
.content-section {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.text-content {
  display: grid;
  gap: var(--space-4);
}

/* Garden layout - photo on the right */
.garden-layout {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .garden-layout {
    grid-template-columns: 2fr 1fr;
    align-items: start;
    gap: var(--space-6);
  }
}

/* Historia layout - photo on the left */
.historia-layout {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .historia-layout {
    grid-template-columns: 1fr 2fr;
    align-items: start;
    gap: var(--space-6);
  }
  
  .historia-layout .image-sidebar {
    align-items: start;
    padding-top: calc(var(--space-5) + 3rem); /* Offset to align with text content */
  }
}

/* Fiske layout - photo on the right */
.fiske-layout {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .fiske-layout {
    grid-template-columns: 2fr 1fr;
    align-items: start;
    gap: var(--space-6);
  }
}

.image-sidebar {
  display: grid;
  gap: var(--space-4);
  justify-content: center;
  align-items: start;
}

.single-image {
  display: grid;
  justify-content: center;
  margin: var(--space-5) 0;
}

/* Postcard style for single images only */
.single-image.red {
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--radius-l);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
  width: 100%;
}

.single-image.red .content-image {
  box-shadow: none;
  border-radius: var(--radius-m);
  background: transparent;
}

.content-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  object-fit: contain;
  background: #ece7df;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.content-image:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Professional layout for larger screens */
@media (min-width: 1024px) {
  .text-content {
    max-width: 800px;
  }
  
  .image-sidebar {
    max-width: 400px;
  }
  
  .single-image {
    max-width: 600px;
    margin: var(--space-5) auto;
  }
  /* Let postcard span full container width, keep image centered inside */
  .single-image.red {
    max-width: none;
    margin: var(--space-5) 0;
  }
  .single-image.red .content-image {
    max-width: 900px;
    margin-inline: auto;
  }
}

/* Section spacing and title styling */
.content-section {
  margin-bottom: var(--space-6);
}

.content-section:first-child {
  margin-top: 0;
}

/* Center titles within text content */
.text-content h1,
.text-content h2 {
  text-align: center;
  margin-bottom: var(--space-5);
  margin-top: 0;
  font-size: 2.5rem; /* Make all titles the same size as h1 */
}

/* Add border above sections except the first one */
.content-section:not(:first-child) {
  padding-top: var(--space-6);
}

/* Split layout for landing sections */
.split {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.split-content {
  display: grid;
  gap: var(--space-4);
}

.split-media {
  display: grid;
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  /* Put image on the left when section has .reverse */
  .split.reverse .split-media {
    order: -1;
  }
}

/* Collage layout for Ridsporten */
.collage {
  margin-top: calc(var(--space-6) * 1);
}

/* Postcard style for collage sections */
.collage.red {
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--radius-l);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
  width: 100%;
}

.collage.red .collage-grid { max-width: 1000px; margin-inline: auto; }
.collage.red h1,
.collage.red h2,
.collage.red h3,
.collage.red p,
.collage.red a { color: #ffffff; }

/* Reduce inner shadows to keep clean card look */
.collage.red .collage-item { box-shadow: none; }

.collage-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
}

.collage-item {
  overflow: hidden;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
}

.collage-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Emphasize one larger and one wide image */
@media (min-width: 768px) {
  .collage-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 140px;
  }
  .collage-item.large { grid-column: span 3; grid-row: span 4; }
  .collage-item.wide  { grid-column: span 3; grid-row: span 2; }
  .collage-item:not(.large):not(.wide) { grid-column: span 3; grid-row: span 2; }
}

@media (min-width: 1024px) {
  .collage-grid { grid-auto-rows: 160px; }
}

/* Mobile screens up to tablet breakpoint: keep brand on one line and enlarge collage photos */
@media (max-width: 767px) {
  .site-header .brand {
    white-space: nowrap;
    word-spacing: 0.12em;
  }

  /* Make collage photos larger on all mobile sizes */
  .collage-grid { grid-template-columns: 1fr; }
  .collage-item img { height: auto; }
}

/* Small/regular phones */
@media (max-width: 480px) {
  .site-header .brand { font-size: 1.7rem; }
  .site-header .brand .brand-initial { font-size: 1.25em; }
  .site-header .brand-logo { height: 56px; }
}

/* Very small screens (e.g., iPhone SE): ensure brand fits next to menu */
@media (max-width: 390px) {
  .site-header .brand {
    font-size: 1.6rem;
    word-spacing: 0.08em;
    white-space: nowrap;
  }
  .site-header .brand .brand-initial { font-size: 1.2em; }
  .site-header .brand-logo { height: 48px; }
}