/*
Theme Name: IHOP Hours
Theme URI: https://ihophours.com
Description: Child theme of GeneratePress for ihophours.com. Single-page hours layout with regular hours, holiday hours, content, FAQ schema and a standard blog section. Zero webfonts, no page builder.
Author: ihophours.com
Template: generatepress
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ihophours
*/

/* ==========================================================================
   Palette
   IHOP official brand colours.
   ========================================================================== */

:root {
	--ih-blue: #0072ce;
	--ih-blue-dark: #005ba6;
	--ih-blue-darker: #00457c;
	--ih-red: #e4002b;
	--ih-red-dark: #b80023;
	--ih-ink: #14213d;
	--ih-body: #33415c;
	--ih-muted: #6b7794;
	--ih-line: #dde3ee;
	--ih-line-soft: #eaeef6;
	--ih-bg: #ffffff;
	--ih-bg-tint: #f5f8fd;
	--ih-bg-blue: #eaf3fc;
	--ih-bg-red: #fdeef1;
	--ih-radius: 10px;
	--ih-radius-sm: 6px;
	--ih-shadow: 0 1px 2px rgba(20, 33, 61, .06), 0 4px 14px rgba(20, 33, 61, .05);
	--ih-shadow-sm: 0 1px 2px rgba(20, 33, 61, .07);

	/* 4pt spacing scale. Every gap on the page derives from these. */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-12: 48px;
	--sp-16: 64px;
	--sp-24: 96px;

	/* Prose measure. Long lines are the fastest way to make a text page
	   unreadable, and an hours page is read in a hurry. */
	--ih-measure: 68ch;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	color: var(--ih-body);
	background: var(--ih-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--ih-ink);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
}

/* Fluid type. Ratio stays near 1.3 between steps and the max never exceeds
   2.5x the min, so nothing explodes on a large screen. */
h1 { font-size: clamp(1.85rem, 1.4rem + 2vw, 2.6rem); margin-bottom: var(--sp-3); }
h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem); margin-top: var(--sp-16); margin-bottom: var(--sp-4); }
h3 { font-size: clamp(1.1rem, 1.02rem + .4vw, 1.28rem); margin-top: var(--sp-8); margin-bottom: var(--sp-2); }

h1, h2, h3 { text-wrap: balance; }

a {
	color: var(--ih-blue-dark);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--ih-red);
	text-decoration: underline;
}

.entry-content p {
	margin-bottom: var(--sp-6);
	max-width: var(--ih-measure);
	text-wrap: pretty;
}

.entry-content ul,
.entry-content ol {
	margin-bottom: var(--sp-6);
	max-width: var(--ih-measure);
}

.entry-content li { margin-bottom: var(--sp-1); }

:focus-visible {
	outline: 3px solid var(--ih-blue);
	outline-offset: 2px;
}

/* Skip link */
.ih-skip {
	position: absolute;
	left: -9999px;
}

.ih-skip:focus {
	left: 1rem;
	top: 1rem;
	z-index: 999;
	background: #fff;
	padding: .6rem 1rem;
	border-radius: var(--ih-radius-sm);
	box-shadow: var(--ih-shadow);
}

/* ==========================================================================
   Header and navigation
   ========================================================================== */

.site-header {
	background: var(--ih-bg);
	border-bottom: 1px solid var(--ih-line);
}

.site-title a {
	color: var(--ih-blue);
	font-weight: 800;
	letter-spacing: -.02em;
}

.site-title a:hover { color: var(--ih-blue-dark); text-decoration: none; }

.site-description {
	color: var(--ih-muted);
	font-size: .9rem;
}

.main-navigation {
	background: var(--ih-blue);
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle {
	color: #fff;
	font-weight: 600;
	font-size: .95rem;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.current-menu-item > a {
	background: var(--ih-blue-dark);
	color: #fff;
}

.main-navigation .main-nav ul ul {
	background: var(--ih-blue-dark);
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* When a lead image opens the page, the hero shrinks to a compact band so the
   two do not compete for the same attention. */
.ih-hero--compact {
	padding: 2rem 0 1.8rem;
}

.ih-hero--compact h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem); }

.ih-hero--compact .ih-hero__lede {
	font-size: 1rem;
	margin-bottom: var(--sp-4);
}

@media (max-width: 600px) {
	.ih-hero--compact { padding: 1.6rem 0 1.5rem; }
}

/* Full bleed regardless of which GeneratePress wrapper the hook lands in.
   The 100vw + negative margin trick escapes .grid-container padding without
   needing to know the container width. overflow-x is clipped on html to stop
   the vw unit introducing a horizontal scrollbar when a scrollbar is present. */
.ih-hero {
	background: linear-gradient(160deg, var(--ih-blue) 0%, var(--ih-blue-darker) 100%);
	color: #fff;
	padding: 3rem 0 2.6rem;
	text-align: center;
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	flex: none;
}

html { overflow-x: hidden; }

.ih-hero__inner {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
	z-index: 1;
}

/* Hero with a photo behind it. The overlay keeps white text legible over any
   image, which a plain background-image cannot guarantee. */
.ih-hero--image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 4.2rem 0 3.8rem;
}

.ih-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(0, 69, 124, .88) 0%, rgba(0, 91, 166, .82) 100%);
}

@media (max-width: 600px) {
	.ih-hero--image {
		padding: 2.6rem 0 2.4rem;
		/* A 16:9 photo cropped to a tall phone hero loses its subject. Favouring
		   the upper part of the frame keeps the food in shot instead of the
		   out-of-focus foreground. */
		background-position: center 30%;
	}
}

.ih-hero h1 {
	color: #fff;
	font-size: 2.35rem;
	margin: 0 0 .55em;
}

.ih-hero__lede {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, .92);
	margin: 0 auto 1.6rem;
	max-width: 620px;
}

.ih-hero__quick {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	justify-content: center;
}

.ih-hero__chip {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .28);
	color: #fff;
	border-radius: 999px;
	padding: .45rem 1rem;
	font-size: .9rem;
	font-weight: 600;
}

.ih-hero__chip a { color: #fff; text-decoration: none; }
.ih-hero__chip:hover { background: rgba(255, 255, 255, .22); }

@media (max-width: 600px) {
	.ih-hero { padding: 2.2rem 0 2rem; }
	.ih-hero h1 { font-size: 1.8rem; }
	.ih-hero__lede { font-size: 1rem; }
}

/* ==========================================================================
   Quick answer
   The one line most visitors came for, above the table.
   ========================================================================== */

.ih-answer {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .1rem .8rem;
	background: #fff;
	border-radius: var(--ih-radius);
	padding: 1rem 1.6rem;
	margin: 0 auto 1.6rem;
	text-align: left;
}

.ih-answer__day {
	display: block;
	width: 100%;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ih-red);
}

.ih-answer__time {
	font-size: 1.7rem;
	font-weight: 800;
	color: var(--ih-ink);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.ih-answer__meta {
	font-size: .88rem;
	color: var(--ih-muted);
	font-weight: 500;
}

@media (max-width: 600px) {
	.ih-answer { padding: .85rem 1.2rem; }
	.ih-answer__time { font-size: 1.4rem; }
}

/* ==========================================================================
   Figures
   ========================================================================== */

.ih-figure {
	margin: 0 0 1.5rem;
}

.ih-figure__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ih-radius);
}

.ih-figure--wide .ih-figure__img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Lead image. Opens the page directly under the hero, at full content width.
   No forced aspect ratio: an image that carries its own title text must not be
   cropped, so its natural proportions are kept and the box reserved via the
   width and height attributes WordPress emits, which also prevents layout
   shift. */
.ih-figure--lead {
	margin: 0 0 var(--sp-12);
}

.ih-figure--lead .ih-figure__img {
	border-radius: var(--ih-radius);
	box-shadow: var(--ih-shadow);
}

.ih-figure__cap {
	font-size: .85rem;
	color: var(--ih-muted);
	margin-top: .5rem;
	text-align: center;
}

/* ==========================================================================
   Section shell
   ========================================================================== */

/* Distinct sections get real air between them, related elements inside a
   section stay tight. Uniform gaps everywhere is what reads templated. */
.ih-section {
	margin: 0 0 clamp(var(--sp-12), 6vw, var(--sp-24));
}

.ih-section__head {
	border-bottom: 2px solid var(--ih-red);
	padding-bottom: var(--sp-2);
	margin-bottom: var(--sp-6);
}

.ih-section__head h2 {
	margin: 0;
	font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
}

.ih-note {
	background: var(--ih-bg-blue);
	border: 1px solid #c5ddf3;
	border-radius: var(--ih-radius-sm);
	padding: var(--sp-4) var(--sp-6);
	margin: var(--sp-6) 0 0;
	font-size: .96rem;
	color: var(--ih-ink);
	max-width: var(--ih-measure);
}

.ih-note--alert {
	background: var(--ih-bg-red);
	border-color: #f7c9d3;
}

.ih-note strong { color: var(--ih-ink); }

/* ==========================================================================
   Hours tables
   ========================================================================== */

.ih-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--ih-line);
	border-radius: var(--ih-radius);
	box-shadow: var(--ih-shadow-sm);
	background: #fff;
}

.ih-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
	margin: 0;
}

.ih-table caption {
	caption-side: top;
	text-align: left;
	padding: .9rem 1.1rem;
	font-weight: 700;
	color: var(--ih-ink);
	background: var(--ih-bg-tint);
	border-bottom: 1px solid var(--ih-line);
}

.ih-table th,
.ih-table td {
	padding: .8rem 1.1rem;
	text-align: left;
	border-bottom: 1px solid var(--ih-line-soft);
	vertical-align: top;
}

.ih-table thead th {
	background: var(--ih-blue);
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-bottom: none;
}

.ih-table tbody tr:last-child th,
.ih-table tbody tr:last-child td { border-bottom: none; }

.ih-table tbody tr:nth-child(even) { background: var(--ih-bg-tint); }

.ih-table tbody th {
	font-weight: 600;
	color: var(--ih-ink);
	white-space: nowrap;
}

.ih-table td.ih-hours { font-variant-numeric: tabular-nums; }

.ih-table tr.is-today {
	background: var(--ih-bg-blue) !important;
}

.ih-table tr.is-today th { color: var(--ih-blue-darker); }

.ih-today-tag {
	display: inline-block;
	margin-left: .5rem;
	background: var(--ih-red);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .12rem .45rem;
	border-radius: 3px;
	vertical-align: 1px;
}

.ih-closed { color: var(--ih-red-dark); font-weight: 600; }

@media (max-width: 480px) {
	.ih-table th,
	.ih-table td { padding: .7rem .8rem; font-size: .95rem; }
}

/* Three column tables do not survive a phone: the columns collapse to one word
   per line and the last one clips. Below 700px each row becomes its own card,
   with the column name printed as a label from data-label. */
@media (max-width: 700px) {
	.ih-table--stack thead { display: none; }

	.ih-table--stack,
	.ih-table--stack tbody,
	.ih-table--stack tr,
	.ih-table--stack th,
	.ih-table--stack td { display: block; width: auto; }

	.ih-table--stack tr {
		border-bottom: 1px solid var(--ih-line);
		padding: .3rem 0 .8rem;
	}

	.ih-table--stack tr:last-child { border-bottom: none; }

	.ih-table--stack tbody tr:nth-child(even) { background: var(--ih-bg-tint); }

	.ih-table--stack tbody th {
		font-size: 1.05rem;
		color: var(--ih-blue-darker);
		padding-bottom: .35rem;
		border-bottom: none;
		white-space: normal;
	}

	.ih-table--stack td {
		border-bottom: none;
		padding-top: .15rem;
		padding-bottom: .15rem;
	}

	.ih-table--stack td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: .72rem;
		font-weight: 700;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: var(--ih-muted);
		margin-bottom: .1rem;
	}
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.ih-faq { border: 1px solid var(--ih-line); border-radius: var(--ih-radius); overflow: hidden; background: #fff; }

.ih-faq__item { border-bottom: 1px solid var(--ih-line-soft); }
.ih-faq__item:last-child { border-bottom: none; }

.ih-faq__q {
	margin: 0;
	padding: 1.05rem 1.2rem;
	font-weight: 700;
	font-size: 1.03rem;
	color: var(--ih-ink);
	background: var(--ih-bg-tint);
}

.ih-faq__a {
	padding: 1rem 1.2rem 1.15rem;
	font-size: .99rem;
}

.ih-faq__a p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Blog
   ========================================================================== */

.ih-blog {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.2rem;
}

.ih-card {
	border: 1px solid var(--ih-line);
	border-radius: var(--ih-radius);
	background: #fff;
	padding: 1.2rem 1.3rem;
	box-shadow: var(--ih-shadow-sm);
	transition: box-shadow .16s ease, transform .16s ease;
}

.ih-card:hover {
	box-shadow: var(--ih-shadow);
	transform: translateY(-2px);
}

.ih-card h3 {
	margin: 0 0 .45rem;
	font-size: 1.08rem;
	line-height: 1.35;
}

.ih-card h3 a { color: var(--ih-ink); }
.ih-card h3 a:hover { color: var(--ih-blue-dark); text-decoration: none; }

.ih-card__meta {
	font-size: .82rem;
	color: var(--ih-muted);
	margin-bottom: .6rem;
}

.ih-card__excerpt {
	font-size: .95rem;
	margin: 0 0 .8rem;
}

.ih-card__more {
	font-size: .9rem;
	font-weight: 600;
	color: var(--ih-red);
}

.ih-blog__all {
	margin-top: 1.4rem;
	text-align: center;
}

.ih-btn {
	display: inline-block;
	background: var(--ih-red);
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	padding: .7rem 1.5rem;
	border-radius: var(--ih-radius-sm);
	text-decoration: none;
}

.ih-btn:hover,
.ih-btn:focus {
	background: var(--ih-red-dark);
	color: #fff;
	text-decoration: none;
}

.ih-btn--blue { background: var(--ih-blue); }
.ih-btn--blue:hover, .ih-btn--blue:focus { background: var(--ih-blue-dark); }

/* ==========================================================================
   Table of contents
   ========================================================================== */

/* Contents block. Two columns once there is room, so seven entries do not
   become a tall list the reader has to scroll past to reach the table. */
.ih-toc {
	background: var(--ih-bg-tint);
	border: 1px solid var(--ih-line);
	border-radius: var(--ih-radius);
	padding: var(--sp-6);
	margin: 0 0 var(--sp-12);
}

.ih-toc__title {
	font-weight: 700;
	color: var(--ih-ink);
	font-size: .78rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	margin-bottom: var(--sp-3);
}

.ih-toc ol {
	margin: 0;
	padding-left: 1.3rem;
	max-width: none;
}

.ih-toc li {
	margin-bottom: var(--sp-1);
	font-size: .97rem;
}

@media (min-width: 720px) {
	.ih-toc ol { columns: 2; column-gap: var(--sp-12); }
	.ih-toc li { break-inside: avoid; }
}

/* ==========================================================================
   Last updated
   ========================================================================== */

.ih-updated {
	font-size: .87rem;
	color: var(--ih-muted);
	margin: 2.4rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--ih-line);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer .site-info {
	background: var(--ih-ink);
	color: rgba(255, 255, 255, .72);
	font-size: .88rem;
}

.site-footer .site-info a { color: #fff; }

.ih-footer-bar {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem 1.4rem;
	justify-content: space-between;
	align-items: center;
}

.ih-disclaimer {
	font-size: .81rem;
	color: rgba(255, 255, 255, .6);
	max-width: 46ch;
	text-align: right;
	line-height: 1.5;
}

@media (max-width: 700px) {
	.ih-footer-bar { justify-content: center; text-align: center; }
	.ih-disclaimer { text-align: center; max-width: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
	.main-navigation,
	.ih-hero__quick,
	.ih-blog,
	.ih-toc,
	.site-footer { display: none !important; }

	.ih-hero { background: none; color: #000; padding: 0; }
	.ih-hero h1 { color: #000; }
	.ih-table-wrap { border: 1px solid #000; box-shadow: none; }
	.ih-table thead th { background: #eee; color: #000; }
}