/* ==========================================================================
   Veggfóður Page Styles
   Matches the Elementor layout from serefni.is/veggfodur
   ========================================================================== */

/* ---- Page wrapper ---- */
.ser-veggfodur {
  background: transparent;
  color: #545b5c;
}

.ser-veggfodur h1,
.ser-veggfodur h2,
.ser-veggfodur h3,
.ser-veggfodur h4 {
  color: #545b5c;
}

/* Brand section headings use ivypresto-display like live site */
.ser-veggfodur h2 {
  font-family: "ivypresto-display", serif !important;
  font-weight: 500 !important;
  letter-spacing: 1px;
  line-height: 1.3;
}

/* "Fleiri falleg" product grid headings — smaller, granville */
.ser-veggfodur-products h2 {
  font-family: granville, serif !important;
  font-size: 21px !important;
  line-height: 21px !important;
  font-weight: 600 !important;
}

/* WooCommerce product titles — ivypresto-display to match live */
.ser-veggfodur .woocommerce-loop-product__title,
.ser-veggfodur .wc-block-grid__product-title,
.ser-veggfodur .ser-product-slider h2,
.ser-veggfodur .product h2 {
  font-family: "ivypresto-display", serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

/* Product links */
.ser-veggfodur .ser-product-slider a,
.ser-veggfodur .woocommerce a {
  font-size: 15px !important;
}

/* H4 subheadings — matches live 20px/700 */
.ser-veggfodur h4 {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 12px;
}

/* H5 — Myndbönd headings, matches live ivypresto-display */
.ser-veggfodur h5 {
  font-family: "ivypresto-display", serif !important;
  font-weight: 500 !important;
}

.ser-veggfodur p {
  font-size: 15px !important;
  line-height: 1.7;
  color: #545b5c;
}

.ser-veggfodur a {
  font-size: 15px !important;
}

/* ---- Container ---- */
.ser-veggfodur-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- Hero Section ---- */
.ser-veggfodur-hero {
  position: relative;
  padding: 60px 0;
  overflow: hidden;
  /* Split background: dark left, beige right */
  background: linear-gradient(to right, #545B5C 50%, #ded8d3 50%);
  min-height: 300px;
}

.ser-veggfodur-hero .wp-block-columns {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}

.ser-veggfodur-hero h1 {
  font-family: "ivypresto-display", serif !important;
  font-size: 62px !important;
  font-weight: 500 !important;
  letter-spacing: 3px;
  color: #fff;
  margin: 0;
}

.ser-veggfodur-hero .wp-block-column:last-child {
  display: flex;
  justify-content: flex-end;
}

.ser-veggfodur-hero img {
  max-width: 420px;
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Featured Brand Section ---- */
.ser-veggfodur-featured {
  padding: 80px 0;
  background: #EBE6E3;
}

.ser-veggfodur-featured .wp-block-columns {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  gap: 40px;
  align-items: center;
}

.ser-veggfodur-featured img {
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: contain;
}
.ser-veggfodur-featured figure.wp-block-image,
.ser-veggfodur-featured figure.wp-block-image.is-resized {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
}
/* Cap standalone brand images to ~435px; allow larger images inside text columns */
.ser-veggfodur-featured figure.wp-block-image img {
  max-width: 100%;
  margin: 0 auto;
}
.ser-veggfodur-featured .wp-block-column > figure.wp-block-image:only-child img,
.ser-veggfodur-featured .wp-block-column:first-child > figure.wp-block-image:first-child img {
  max-width: 435px;
}
.ser-veggfodur-featured figure.wp-block-image {
  text-align: center;
}

/* Vertically center text content within its column to align with image */
.ser-veggfodur-featured .wp-block-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ser-veggfodur-featured h2 {
  font-family: "ivypresto-display", serif !important;
  font-weight: 500 !important;
  font-size: 32px !important;
  line-height: 38px !important;
  color: #545b5c !important;
  margin-bottom: 20px;
  letter-spacing: normal;
}

/* Textura-línan (first featured section) — ivypresto-display 41px/400 */
.ser-veggfodur > .wp-block-group__inner-container > .ser-veggfodur-featured:first-of-type h2,
.ser-veggfodur .ser-veggfodur-featured:first-of-type h2 {
  font-family: "ivypresto-display", serif !important;
  font-weight: 400 !important;
  font-size: 41px !important;
  line-height: 62px !important;
  margin-bottom: 40px !important;
}

.ser-veggfodur-featured p {
  font-family: granville, serif !important;
  font-size: 15px !important;
  line-height: 28px !important;
  color: #484848 !important;
  margin-bottom: 16px;
}

/* Reverse column order for sections where text comes first
   but image should display on the left (Newbie, Rebel Walls, Cole & Son).
   These sections have text in column 1 and image in column 2. */
.ser-veggfodur-featured--reverse .wp-block-columns {
  flex-direction: row-reverse;
}

/* ---- Button Styles ---- */
body .ser-veggfodur .wp-block-button .wp-block-button__link,
body .ser-veggfodur .wp-block-button__link,
.ser-veggfodur .ser-btn {
  background: #999a97 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: granville, serif !important;
  font-size: 15px !important;
  line-height: 15px !important;
  font-weight: 500 !important;
  padding: 12px 24px !important;
  letter-spacing: normal;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.ser-veggfodur .wp-block-button__link:hover,
.ser-veggfodur .ser-btn:hover {
  background: #545b5c;
  color: #fff;
}

/* ---- Product Grid ---- */
.ser-veggfodur-products {
  padding: 40px 0 80px;
  background: transparent;
}

.ser-veggfodur-products > .wp-block-group__inner-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.ser-veggfodur-products h2 {
  text-align: left;
  margin-bottom: 40px;
}

.ser-product-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.ser-product-card {
  text-decoration: none;
  color: #545b5c;
  display: block;
  text-align: center;
}

.ser-product-card img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1;
  object-fit: cover;
}

.ser-product-card__title {
  font-size: 15px;
  font-weight: 500;
  margin: 10px 0 4px;
  line-height: 1.4;
  color: #545b5c;
  text-align: center;
}

.ser-product-card__price {
  font-size: 12px;
  font-weight: 400;
  color: #545b5c;
  text-align: center;
}

/* ---- Instructions Section ---- */
.ser-veggfodur-instructions {
  padding: 80px 0;
  background: linear-gradient(135deg, #ded8d3 0%, #f6f4f4 100%);
}

.ser-veggfodur-instructions > .wp-block-group__inner-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

.ser-veggfodur-instructions h2 {
  margin-bottom: 30px;
}

.ser-veggfodur-instructions h4 {
  margin-top: 30px;
}

.ser-veggfodur-instructions ol {
  padding-left: 24px;
  margin: 16px 0;
}

.ser-veggfodur-instructions ol li {
  margin-bottom: 12px;
  line-height: 1.7;
  font-size: 15px;
}

.ser-veggfodur-instructions .wp-block-button {
  margin: 30px 0;
}

.ser-instruction-method {
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(84, 91, 92, 0.15);
}

.ser-instruction-method:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ---- Videos Section ---- */
.ser-veggfodur-videos {
  padding: 80px 0;
  background: transparent;
}

.ser-veggfodur-videos > .wp-block-group__inner-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.ser-veggfodur-videos h2 {
  margin-bottom: 30px;
}

.ser-veggfodur-videos ul {
  list-style: none;
  padding: 0;
}

.ser-veggfodur-videos ul li {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.7;
}

.ser-veggfodur-videos ul li a {
  color: #1346af;
  text-decoration: underline;
}

.ser-veggfodur-videos ul li a:hover {
  color: #545b5c;
}

/* ---- Custom Wallpaper Section ---- */
.ser-veggfodur-custom {
  padding: 80px 0;
  background: #ebe6e3;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Two-column layout: text left, image right (matches live site) */
.ser-veggfodur-custom .wp-block-columns {
  gap: 30px;
  align-items: flex-start;
  max-width: 1140px;
  margin: 0 auto;
}

.ser-veggfodur-custom .wp-block-columns .wp-block-column:first-child {
  flex-basis: 50% !important;
}

.ser-veggfodur-custom .wp-block-columns .wp-block-column:last-child {
  flex-basis: 50% !important;
}

/* Title: granville 700 41px/62px to match live */
.ser-veggfodur-custom h2 {
  font-family: granville, serif !important;
  font-size: 41px !important;
  font-weight: 700 !important;
  line-height: 62px !important;
  letter-spacing: normal;
  color: #545b5c;
  text-align: left;
  max-width: 1120px;
  margin: 0 auto 40px;
}

/* Sub-heading "Viltu hanna..." — ivypresto-display 500 24px/36px, centered */
.ser-veggfodur-custom h4,
.ser-veggfodur-custom h6 {
  font-family: "ivypresto-display", serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  text-align: center;
  color: #545b5c !important;
  font-size: 24px !important;
  line-height: 36px !important;
  margin-bottom: 20px;
}

/* "Svona ferðu að:" — granville 400 24px/36px, LEFT aligned */
.ser-veggfodur-custom h5,
.ser-veggfodur-custom h3 {
  font-family: granville, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-align: left !important;
  color: #545b5c !important;
  font-size: 24px !important;
  line-height: 36px !important;
  margin-bottom: 20px;
}

/* Image column: match live's ~550×413 sizing */
.ser-veggfodur-custom .wp-block-image {
  max-width: 550px;
  margin: 0 auto;
}

.ser-veggfodur-custom .wp-block-column:last-child img {
  width: 100%;
  height: auto;
  display: block;
  max-height: none;
  object-fit: cover;
}

/* Text in the left column — centered like live */
.ser-veggfodur-custom p {
  font-family: granville, serif;
  font-size: 15px;
  line-height: 28px;
  color: #484848;
  text-align: center;
}

/* "Svona ferðu að:" heading */
.ser-veggfodur-custom h3 {
  font-family: granville, serif;
  text-align: left;
}

.ser-veggfodur-custom ol {
  font-family: granville, serif;
  padding-left: 24px;
  margin: 20px 0;
  max-width: 700px;
}

.ser-veggfodur-custom ol li {
  font-family: granville, serif;
  margin-bottom: 12px;
  line-height: 1.7;
  font-size: 15px;
  color: #545b5c;
}

.ser-veggfodur-custom a {
  color: #545b5c;
  text-decoration: underline;
}

/* ---- Separator between brand sections ---- */
.ser-veggfodur-divider {
  border: none;
  height: 1px;
  background: rgba(84, 91, 92, 0.15);
  max-width: 1200px;
  margin: 0 auto;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .ser-veggfodur-hero h1 {
    font-size: 48px;
  }

  .ser-veggfodur h2 {
    font-size: 28px;
  }

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

@media (max-width: 768px) {
  .ser-veggfodur-hero {
    padding: 40px 0;
    background: #545B5C;
  }

  .ser-veggfodur-hero h1 {
    font-size: 36px;
    text-align: center;
    padding-bottom: 20px;
    color: #fff;
  }

  .ser-veggfodur-hero .wp-block-columns {
    flex-direction: column;
    align-items: center;
  }

  .ser-veggfodur-hero img {
    top: 0;
  }

  .ser-veggfodur-featured {
    padding: 50px 0;
  }

  .ser-veggfodur-featured .wp-block-columns {
    flex-direction: column;
  }

  .ser-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .ser-veggfodur-instructions {
    padding: 50px 0;
  }

  .ser-veggfodur-custom .wp-block-columns {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .ser-veggfodur-hero h1 {
    font-size: 28px;
  }

  .ser-veggfodur h2 {
    font-size: 24px;
  }

  .ser-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .ser-product-card__title {
    font-size: 12px;
  }
}


/* Alternating section background: dark beige variant for specific brands (Rebel Walls, Cole & Son) */
.ser-veggfodur-featured.ser-veggfodur-featured--dark,
.ser-veggfodur-featured--dark + .ser-veggfodur-products,
.ser-veggfodur-products.ser-veggfodur-products--dark {
  background: #DED8D3;
}


/* Veggfóður page H1 — match live typography */
body.page-id-79 h1,
body.page-id-79 .ser-product-hero h1,
body.page-id-79 .ser-product-hero .wp-block-heading {
  color: #484848 !important;
  font-size: 62px !important;
  font-weight: 500 !important;
  line-height: 80px !important;
  letter-spacing: 1.7px !important;
  font-family: "ivypresto-display", serif !important;
  width: 605px !important;
  max-width: 605px !important;
  align-self: flex-start;
}

/* Match live column ratios: text col ~604px wide, image col narrower. */
/* Target by CONTENT, not position:
   - Column with an H2 = text column = 605px wide (matches live's 604 paragraph)
   - Column without H2 = image-only column = 455px wide (matches live's 435 image + padding) */
.ser-veggfodur-featured .wp-block-columns > .wp-block-column:has(h2) {
  flex: 0 0 605px;
  max-width: 605px;
}
.ser-veggfodur-featured .wp-block-columns > .wp-block-column:not(:has(h2)) {
  flex: 0 0 455px;
  max-width: 455px;
}


/* Gray bar on left edge — ONLY covers first instruction method (~1600px tall),
   matches live where only the first method section has the gray decoration. */
.ser-veggfodur-instructions {
  position: relative;
  margin-top: 0;
  background: #EBE6E3 !important;
  padding: 40px 0 !important;
}
.ser-veggfodur-instructions::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * (50vw - 50%));
  width: 10vw;
  height: 1700px;
  background: #545b5c;
  z-index: 0;
  pointer-events: none;
}
.ser-veggfodur-instructions > .wp-block-group__inner-container {
  position: relative;
  z-index: 1;
}
.ser-veggfodur-instructions.alignfull {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  max-width: 100vw;
}


/* Hero cover min-height — match live's 640px (dev inline style is 400px) */
body.page-id-79 .ser-product-hero.wp-block-cover {
  min-height: 640px !important;
}


/* Instructions list spacing — match live's 28px line-height */
.ser-veggfodur-instructions ul li,
.ser-veggfodur-instructions ol li {
  margin-bottom: 0px;
  line-height: 28px;
}
.ser-veggfodur-instructions h3 {
  margin-top: 40px;
  margin-bottom: 12px;
}
.ser-veggfodur-instructions .wp-block-columns {
  gap: 40px;
  margin-bottom: 20px;
}


/* Instructions section typography (matched to live) */
.ser-veggfodur-instructions h2 {
  font-family: "ivypresto-display", serif !important;
  font-size: 42px !important;
  line-height: 42px !important;
  font-weight: 500 !important;
  color: #545b5c !important;
  text-align: left !important;
  margin: 40px 0 30px !important;
}
.ser-veggfodur-instructions h3 {
  font-family: "ivypresto-display", serif !important;
  font-size: 32px !important;
  line-height: 32px !important;
  font-weight: 500 !important;
  color: #545b5c !important;
  text-align: left !important;
  margin: 100px 0 30px !important;
}
/* First h3 (method 1) keeps normal spacing — not pushed down */
.ser-veggfodur-instructions h3:first-of-type {
  margin-top: 40px !important;
}
.ser-veggfodur-instructions h4 {
  font-family: granville, serif !important;
  font-size: 20px !important;
  line-height: 30px !important;
  font-weight: 700 !important;
  color: #545b5c !important;
  text-align: left !important;
  margin: 24px 0 12px !important;
}
/* h5 "Myndbönd" — ivypresto-display 500 26/26 (matches live sub-caption) */
.ser-veggfodur-instructions h5 {
  font-family: "ivypresto-display", serif !important;
  font-size: 26px !important;
  line-height: 26px !important;
  font-weight: 500 !important;
  color: #545b5c !important;
  text-align: left !important;
  margin: 24px 0 24px !important;
}
/* h6 fallback */
.ser-veggfodur-instructions h6 {
  font-family: granville, serif !important;
  font-size: 26px !important;
  line-height: 39px !important;
  font-weight: 700 !important;
  color: #545b5c !important;
  text-align: left !important;
  margin: 24px 0 12px !important;
}





/* "Sækja leiðbeiningar á PDF" button — accent bg #CDC5BE with dark text (matches live) */
body .ser-veggfodur-instructions .wp-block-button .wp-block-button__link,
body .ser-veggfodur-instructions .wp-block-button__link {
  background: #CDC5BE !important;
  color: #545b5c !important;
  border-radius: 2px !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
  line-height: 15px !important;
  font-weight: 500 !important;
  font-family: granville, serif !important;
}
body .ser-veggfodur-instructions .wp-block-button .wp-block-button__link:hover,
body .ser-veggfodur-instructions .wp-block-button__link:hover {
  background: #b8ada3 !important;
  color: #545b5c !important;
}


/* Instructions lists — widen to match live (~1020px wide, left-aligned) */
.ser-veggfodur-instructions ul.wp-block-list,
.ser-veggfodur-instructions ol.wp-block-list {
  max-width: 1020px;
  margin-left: 0;
  margin-right: auto;
  padding-left: 20px;
}

/* Long lists (10+ items) flow in 2 columns */
.ser-veggfodur-instructions ol.wp-block-list:has(> li:nth-child(10)) {
  column-count: 2;
  column-gap: 60px;
}
.ser-veggfodur-instructions ol.wp-block-list:has(> li:nth-child(10)) > li {
  break-inside: avoid;
  margin-bottom: 10px;
}

/* ---- Textura section (first featured) — match live's layout ---- */
/* Live uses 40px section padding; dev had 80px */
.ser-veggfodur .ser-veggfodur-featured:first-of-type {
  padding: 40px 0 !important;
}
/* Left column (image only): top-align with 10px top padding like live's widget-wrap */
.ser-veggfodur .ser-veggfodur-featured:first-of-type .wp-block-column:not(:has(h2)) {
  justify-content: flex-start !important;
  padding-top: 10px;
}
/* Right column (image+text): top-align with 40px top padding like live's widget-wrap */
.ser-veggfodur .ser-veggfodur-featured:first-of-type .wp-block-column:has(h2) {
  justify-content: flex-start !important;
  padding-top: 40px;
}
/* Image-to-heading gap: 20px figure margin + 15px h2 margin = 35px (matches live) */
.ser-veggfodur .ser-veggfodur-featured:first-of-type .wp-block-column:has(h2) figure.wp-block-image {
  margin-bottom: 20px !important;
}

/* "Áður en verk hefst" UL list — color #484848 to match live */
.ser-veggfodur-instructions ul.wp-block-list li {
  color: #484848 !important;
  font-size: 15px !important;
}

/* OL list items in instructions — ensure 15px (override global 14px p rule) */
.ser-veggfodur-instructions ol.wp-block-list li {
  color: #484848 !important;
  font-size: 15px !important;
}

/* Section 3 "Uppsetning" caption uses h5 on live at 26px — target h5 in instructions */
.ser-veggfodur-instructions h5.wp-block-heading:not(:first-of-type) {
  /* Don't override the "Myndbönd" h5 headings */
}
/* Section 3 "Uppsetning á veggfóðri úr náttúruefnum" — 26px to match live (h5 on live) */
.ser-veggfodur-instructions .ser-instructions-h5-size {
  font-family: granville, serif !important;
  font-size: 26px !important;
  line-height: 39px !important;
  font-weight: 700 !important;
  margin-bottom: 35px !important;
}
/* Remove underline from email links in "eigin mynd" section */
.ser-veggfodur-custom a[href^="mailto:"] {
  text-decoration: none !important;
}
/* Instructions links — match live: no underline, no hover change */
.ser-veggfodur-instructions a {
  color: #545b5c !important;
  text-decoration: none !important;
}
.ser-veggfodur-instructions a:hover {
  text-decoration: none !important;
  color: #545b5c !important;
}
/* Remove extra top spacing between header and hero on veggfodur page */
body.page-id-79 .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.page-id-79 .entry-content > .wp-block-cover:first-child,
body.page-id-79 .entry-content > .ser-product-hero:first-child {
  margin-top: 0 !important;
}
body.page-id-79 article {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Extra top spacing for method 2 and 3 headings only */
.ser-veggfodur-instructions h3:not(:first-of-type) {
  padding-top: 1rem;
}