/* ==========================================================================
   Gerberlyte tables — shared styles
   Add to your theme CSS (or a Drupal asset library / CSS injector).
   Covers both the Category Comparison table and the Components table.
   ========================================================================== */

:root {
  --gl-green:        #1a7a3c;   /* checkmarks + flavor values */
  --gl-green-dark:   #05653C;   /* dark green header/rowhead */
  --gl-green-head:   #6EC061;   /* flavor column header fill */
  --gl-green-tint:   #EBF5E7;   /* flavor value cell tint */
  --gl-blue-ink:     #0047BA;   /* components label text */
  --gl-blue-tint:    #E6EDF8;   /* components column fill */
  --gl-featured:     #E6EDF8;   /* Gerberlyte highlighted column */
  --gl-gray-x:       #c4c4c4;   /* "no" marks */
  --gl-border:       #cfd8dc;
  --gl-text:         #222;
}

h1::after,
.breadcrumb-item.active span::after {
	content: "\2122";
  font-size: 0.5em;
  vertical-align: super;
}

.brand-name::after {
  content: "\2122";
  font-size: 0.5em;
  vertical-align: super;
}

nav[aria-label="breadcrumb"] + .row {
	position: relative;
	color: white;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

@media screen and (min-width: 1199px) {
nav[aria-label="breadcrumb"] + .row h1 {
	margin-top: 4rem;
}
}

nav[aria-label="breadcrumb"] + .row::before {
	background-image: url("/sites/default/files/2026-08/strawberry-splash.png");
	background-position: top right;
	background-repeat: no-repeat;
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	background-color: var(--gl-blue-ink);
	z-index: -1;
}

@media screen and (max-width: 1199px) {
	nav[aria-label="breadcrumb"] + .row::before {
	background-image: none;
}
}

@media screen and (max-width: 992px) {
	nav[aria-label="breadcrumb"] + .row::before {
}
}

@media screen and (max-width: 768px) {
	nav[aria-label="breadcrumb"] + .row::before {
}
}

@media screen and (max-width: 576px) {
	nav[aria-label="breadcrumb"] + .row::before {
}
}


.bg-dark-green {
	background-color: var(--gl-green-dark);
}

.bg-light-blue.py-5, .bg-body.py-5, .bg-body.py-5 + .container hr {
	display: none;
}



/* Horizontal scroll on small screens instead of squashing */
.gl-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.5rem;
}

.gl-compare,
.gl-components {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  color: var(--gl-text);
  background: #fff;
}

.gl-compare th,
.gl-compare td,
.gl-components th,
.gl-components td {
  border: 1px solid var(--gl-border);
  padding: 0.85rem 0.75rem;
  text-align: center;
  vertical-align: middle;
}

.gl-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Category Comparison table (Image 1) ------------------------- */

.gl-compare thead th {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gl-blue-ink);
  background: #fff;
  border-bottom: 2px solid var(--gl-border);
  vertical-align: bottom;
  line-height: 1.3;
}

/* First column (attribute names) — dark green blocks */
.gl-compare tbody th[scope="row"] {
  background: var(--gl-green-dark);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  line-height: 1.25;
  min-width: 140px;
}

.gl-compare .gl-rowhead-blank {
  background: #fff;
  border: 0;
}

/* Highlighted Gerberlyte column */
.gl-compare .gl-col-featured {
  background: var(--gl-featured);
}
.gl-compare thead th.gl-col-featured {
  font-size: 1rem;
  color: var(--gl-blue-ink);
}

/* Yes / No marks */
.gl-yes,
.gl-no {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
}
.gl-yes { color: var(--gl-green); }
.gl-no  { color: var(--gl-gray-x); }

/* ---------- Components table (Image 2) ---------------------------------- */

.gl-components thead th {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: #fff;
}

.gl-components .gl-components-head {
  background: var(--gl-blue-tint);
  color: var(--gl-blue-ink);
  font-size: 1.2rem;
  text-align: left;
}

.gl-components .gl-guidance-head {
  background: var(--gl-green-dark);
}

.gl-components .gl-flavor-head {
  background: var(--gl-green-head);
}

/* Row labels (Components column) */
.gl-components tbody th[scope="row"] {
  background: var(--gl-blue-tint);
  color: var(--gl-blue-ink);
  font-weight: 700;
  text-align: left;
  font-size: 1rem;
  min-width: 180px;
}

.gl-components .gl-subnote {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--gl-blue-ink);
  margin-top: 0.15rem;
}

/* Guidance value cells (WHO / ESPGHAN) — plain */
.gl-components td {
  font-size: 1.25rem;
  color: var(--gl-text);
}

/* Flavor value cells — green on tint */
.gl-components td.gl-val {
  background: var(--gl-green-tint);
  color: var(--gl-green);
  font-weight: 700;
}

/* Superscript references sit a touch smaller */
.gl-compare sup,
.gl-components sup {
  font-size: 0.65em;
}

/* ---------- Small-screen tightening ------------------------------------ */
@media (max-width: 600px) {
  .gl-compare tbody th[scope="row"],
  .gl-components tbody th[scope="row"] { font-size: 0.9rem; }
  .gl-compare th, .gl-compare td,
  .gl-components th, .gl-components td { padding: 0.6rem 0.5rem; }
  .gl-yes, .gl-no { font-size: 1.25rem; }
}

@media screen and (max-width: 768px) {
	.nutrition-labels img {
		max-width: 30%;
		margin: 0 4px;
	}
}