/*
 Theme Name:   Sangeetpedia
 Theme URI:    https://sangeetpedia.com/
 Description:  Child theme of GeneratePress for Sangeetpedia, the encyclopedia of Indian music. All customisation goes here, never in GeneratePress itself.
 Author:       Aimrec
 Author URI:   https://www.aimrec.com/
 Template:     generatepress
 Version:      0.2.2
 Requires at least: 6.5
 Requires PHP: 7.4
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  sangeetpedia
*/

/*
 * GeneratePress loads this file automatically after its own styles
 * (handle "generate-child"), so rules here override the parent.
 */

/* ---------- Brand tokens (from the logo) ---------- */
:root {
	--sp-rust: #7c3114;       /* the "S" in the logo */
	--sp-rust-dark: #5e240e;
	--sp-cream: #faf5ec;
	--sp-paper: #fffdf8;
	--sp-ink: #2b211c;
	--sp-muted: #6b5a4e;
	--sp-line: #e8dccb;
	--sp-serif: Georgia, "Times New Roman", serif;
	--sp-radius: 10px;
}

/* =========================================================
   Coming-soon home page (body.sp-placeholder, set in functions.php)
   ========================================================= */
body.sp-placeholder {
	background: var(--sp-cream);
	color: var(--sp-ink);
}

/* Let the page's own sections span the width; drop GP's white content box. */
.sp-placeholder .site.grid-container,
.sp-placeholder .site-content,
.sp-placeholder .content-area {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}
.sp-placeholder .inside-article,
.sp-placeholder .site-main {
	padding: 0;
	margin: 0;
	background: transparent;
}
.sp-placeholder .entry-content { margin: 0; }
.sp-placeholder .entry-content > * { margin-top: 0; }

/* Sections */
.sp-section {
	padding: clamp(48px, 8vw, 96px) 20px;
}
.sp-section > *,
.sp-section > .wp-block-group__inner-container > * {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}
/* Classic themes wrap group content in .wp-block-group__inner-container;
   centre the narrower text blocks inside it too. */
.sp-placeholder .sp-section .sp-lead,
.sp-placeholder .sp-section .sp-intro,
.sp-placeholder .sp-hero p,
.sp-placeholder .sp-signup__note {
	margin-left: auto;
	margin-right: auto;
}
.sp-section--alt { background: var(--sp-paper); border-top: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line); }

.sp-placeholder h1,
.sp-placeholder h2,
.sp-placeholder h3 {
	font-family: var(--sp-serif);
	color: var(--sp-rust);
	line-height: 1.15;
}
.sp-placeholder h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin-bottom: .4em; text-align: center; }
.sp-placeholder .sp-intro { text-align: center; color: var(--sp-muted); max-width: 640px; margin-bottom: 2.5em; }

/* Hero */
.sp-hero { text-align: center; padding-top: clamp(40px, 7vw, 88px); }
.sp-hero .sp-logo img { width: clamp(120px, 18vw, 168px); height: auto; margin: 0 auto 1.25rem; display: block; }
.sp-eyebrow {
	font-size: .85rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sp-muted);
	margin-bottom: .75rem;
}
.sp-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: .35em; }
.sp-lead { font-size: clamp(1.15rem, 2.2vw, 1.4rem); max-width: 680px; margin-bottom: 1em; }
.sp-hero p:not(.sp-eyebrow):not(.sp-lead) { max-width: 640px; color: var(--sp-muted); }

/* Signup */
.sp-placeholder .sp-section .sp-signup {
	display: flex;
	gap: 8px;
	max-width: 480px;
	margin: 2rem auto .6rem;
}
.sp-signup input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: 14px 16px;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	background: #fff;
	font-size: 1rem;
	color: var(--sp-ink);
}
.sp-signup input[type="email"]:focus { outline: 2px solid var(--sp-rust); outline-offset: 1px; }
.sp-signup button {
	padding: 14px 22px;
	border: 0;
	border-radius: var(--sp-radius);
	background: var(--sp-rust);
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}
.sp-signup button:hover,
.sp-signup button:focus { background: var(--sp-rust-dark); }
.sp-signup__note { font-size: .85rem; color: var(--sp-muted); margin: 0 auto; }

/* Videos */
.sp-videos__group + .sp-videos__group { margin-top: 2.75rem; }
.sp-videos__heading {
	font-size: 1.2rem;
	text-align: left;
	border-bottom: 1px solid var(--sp-line);
	padding-bottom: .5rem;
	margin-bottom: 1.25rem;
}
.sp-videos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
}
.sp-video { margin: 0; }
.sp-video__play,
.sp-video__frame {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;            /* the clips are 4:3; never crop the performers */
	border: 0;
	border-radius: var(--sp-radius);
	overflow: hidden;
	background: #1c1410;
	padding: 0;
	cursor: pointer;
}
.sp-video__play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.sp-video__play:hover img,
.sp-video__play:focus-visible img { transform: scale(1.03); }
.sp-video__play:focus-visible { outline: 3px solid var(--sp-rust); outline-offset: 2px; }
.sp-video__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	background: rgba(124, 49, 20, .92);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.sp-video__icon::after {
	content: "";
	position: absolute;
	left: 24px;
	top: 18px;
	border-style: solid;
	border-width: 12px 0 12px 19px;
	border-color: transparent transparent transparent #fff;
}
.sp-video__length {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 2px 7px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .75);
	color: #fff;
	font-size: .8rem;
}
.sp-video figcaption { padding-top: .7rem; line-height: 1.4; }
.sp-video figcaption strong { display: block; font-family: var(--sp-serif); font-size: 1.1rem; color: var(--sp-ink); }
.sp-video__form,
.sp-video__people { display: block; font-size: .88rem; color: var(--sp-muted); }
.sp-video__form { font-style: italic; }
.sp-more { text-align: center; margin-top: 2.5rem; }

/* Buttons / links in the page */
.sp-placeholder .entry-content a { color: var(--sp-rust); }
.sp-placeholder .wp-block-button__link {
	background: var(--sp-rust);
	color: #fff !important;
	border-radius: var(--sp-radius);
	padding: 12px 22px;
	text-decoration: none;
}
.sp-placeholder .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--sp-rust) !important;
	border: 2px solid var(--sp-rust);
}

/* Sister sites */
.sp-sisters .wp-block-columns { gap: 24px; }
.sp-sisters .wp-block-column {
	background: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	padding: 28px;
}
.sp-sisters h3 { font-size: 1.3rem; margin-bottom: .4em; }
.sp-sisters p { color: var(--sp-muted); margin-bottom: .8em; }

/* Footer */
.sp-placeholder .site-info {
	background: var(--sp-ink);
	color: #d9cbbb;
	font-size: .9rem;
}
.sp-placeholder .site-info a { color: #fff; }

@media (max-width: 600px) {
	.sp-signup { flex-direction: column; }
	.sp-videos__grid { grid-template-columns: 1fr; }
}