/* Info pages (About, Services + Pricing, For Authors/Editors, FAQ, guides, policies), layout Step 7, 2026-10-27.
   Linked from views/services_pricing_css.php, after its inline styles, so every page with the .gcp layout uses the
   brand kit: Noto Sans text at 16px, Noto Serif headings, a light hero like the homepage with the page title as <h1>. */
.gcp {
	--g: #2f4a3c; --g2: #253b30; --gold: #5f6b2b; --cream: #f7f5ee; --line: #e2dccd;
	--forest-tint: #e4ece7; --link: #176f9c; --ink: #404040; --muted: #61655f;
	--serif: "Noto Serif", "Noto Serif Devanagari", Georgia, "Times New Roman", serif;
	--sans: "Noto Sans", "Noto Sans Devanagari", "Helvetica Neue", Arial, sans-serif;
	font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink);
}
.gcp h1, .gcp h2, .gcp h3, .gcp h4 { font-family: var(--serif); font-weight: 600; text-wrap: balance; }
.gcp h3 { font-size: 24px; line-height: 1.3; }
.gcp .gcp-lead { font-size: 17px; color: var(--muted); }
.gcp .gcp-note, .gcp .gcp-fine, .gcp .was { color: var(--muted); }

/* Hero: paper box with the page title as the visible <h1> (was a dark green box) */
.gcp .gcp-hero { background: var(--cream); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 32px 36px 28px; }
.gcp .gcp-hero h1, .gcp .gcp-hero h2 { font-size: 34px; line-height: 1.22; color: var(--g); margin: 4px 0 12px; }
.gcp .gcp-hero h1 em, .gcp .gcp-hero h2 em { color: var(--gold); font-style: italic; }
.gcp .gcp-hero p { color: var(--muted); font-size: 17px; max-width: 46em; }
.gcp .gcp-hero p strong, .gcp .gcp-hero p b { color: var(--ink) !important; } /* some pages set white inline for the old dark hero */
.gcp .gcp-hero .gcp-eyebrow { color: var(--gold) !important; font-size: 12px; letter-spacing: .08em; }
.gcp .gcp-hero a:not(.btn):not(.gsv-btn):not(.gco-pdf) { color: var(--link) !important; }
.gcp .gcp-hero .gcp-offer { border-color: var(--gold); color: var(--gold); }
.gcp .gcp-hero .gsv-facts div { border-left-color: var(--line); color: var(--muted); }
.gcp .gcp-hero .gsv-facts b { color: var(--g); font-family: var(--serif); }
.gcp .gsv-btn { border-radius: 8px; padding: 9px 18px; font-size: 15px; }
.gcp .gcp-hero .gsv-btn { background: var(--g); border-color: var(--g); color: #fff; }
.gcp .gcp-hero .gsv-btn:hover, .gcp .gcp-hero .gsv-btn:focus { background: var(--g2); border-color: var(--g2); color: #fff; }
.gcp .gcp-hero .gsv-btn.alt { background: #fff; border-color: var(--g); color: var(--g); }
.gcp .gcp-hero .gsv-btn.alt:hover, .gcp .gcp-hero .gsv-btn.alt:focus { background: var(--forest-tint); color: var(--g); }
.gcp .gcp-hero input[type="search"], .gcp .gcp-hero input[type="text"] { border: 1px solid var(--line); }

/* Cards and boxes */
.gcp .gcp-card, .gcp .gcp-way, .gcp .gsv-grid2 > div, .gcp .gsv-grid3 > div, .gcp .gsv-grid4 > div { box-shadow: none; border-radius: 12px; }
.gcp .gcp-card .nm, .gcp .gcp-card .now, .gcp .gcp-way h4 { font-family: var(--serif); }
.gcp .gsv-grid2 strong, .gcp .gsv-grid3 strong, .gcp .gsv-grid4 strong { color: var(--ink); }
.gcp .gcp-box, .gcp .gsv-box { border-radius: 12px; }
.gcp .gcp-cta, .gcp .gcp-platform { border-radius: 12px; }
.gcp .gcp-cta h3 { color: #fff; }

/* Pages placed in the old Bootstrap panel: no box around the page */
.panel:has(> .panel-body > .gcp) { border: 0; box-shadow: none; background: transparent; margin-top: 20px; }
.panel:has(> .panel-body > .gcp) > .panel-body { padding: 0; }

/* Services / Pricing tabs (views/services.php) */
.svc-tabs { margin: 20px 0 0 !important; border-bottom: 1px solid #e2dccd !important; font-family: "Noto Sans", "Noto Sans Devanagari", Arial, sans-serif; }
.svc-tabs > li > a { font-weight: 600; color: #404040 !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; background: transparent !important; }
.svc-tabs > li > a:hover { color: #2f4a3c !important; border-bottom-color: #e2dccd !important; }
.svc-tabs > li.active > a, .svc-tabs > li.active > a:hover, .svc-tabs > li.active > a:focus { color: #2f4a3c !important; border-bottom-color: #2f4a3c !important; }
.svc-tab-body { border: 0 !important; background: transparent !important; padding: 20px 0 !important; }

@media (max-width: 767px) {
	.gcp .gcp-hero { padding: 22px 18px 18px; border-radius: 12px; }
	.gcp .gcp-hero h1, .gcp .gcp-hero h2 { font-size: 26px; }
	.gcp .gcp-hero p, .gcp .gcp-lead { font-size: 16px; }
	.gcp h3 { font-size: 21px; }
}