/*
Theme Name: ShootCal
Template: generatepress
Version: 0.5
Description: ShootCal child theme. Colours, fonts and layout are set through
GeneratePress (Customizer > Global Colors / Typography) and GenerateBlocks
Global Styles — NOT here. Keep this file for genuine additions only.
*/

/* Site logo: the ShootCal mark is an SVG with no intrinsic width, so without
   an explicit size it expands to fill its container. */
.site-logo img,
.custom-logo,
.site-header .header-image{ height:38px; width:auto; max-width:none; }

/* BetterDocs search modal: the active-tab underline and its icon are hardcoded
   to the plugin's teal (#00B884) with no Customizer control, so they are the one
   place the help centre needs a CSS override to reach the ShootCal accent. */
.betterdocs-search-modal-layout-1 .betterdocs-tab-items.active{
	border-bottom-color: var(--accent);
}
.betterdocs-search-modal-layout-1 .betterdocs-tab-items.active svg{
	fill: var(--accent);
}

/* ============================================================
   ShootCal homepage — ported from the live marketing page.
   Layout only; every colour comes from the GeneratePress global
   palette so the Customizer stays the single source of truth.
   ============================================================ */

.sc-section{ padding:72px 0; }
.sc-section > .wp-block-group__inner-container,
.sc-hero > .wp-block-group__inner-container,
.sc-spotlight > .wp-block-group__inner-container,
.sc-final-cta > .wp-block-group__inner-container{
	max-width:1120px; margin-inline:auto; padding-inline:24px;
}

.sc-section h2{ text-align:center; font-size:2rem; line-height:1.2; margin:0 0 .6rem; }
.sc-lede{
	text-align:center; max-width:720px; margin:0 auto 2.5rem;
	color:var(--contrast-3); font-size:1.05rem;
}

/* Small caps group label above a run of cards. */
.sc-feat-group{
	font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
	color:var(--contrast-3); margin:2.5rem 0 1rem; text-align:left;
}
.sc-eyebrow{
	font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
	color:var(--accent); margin:0 0 .5rem; font-weight:600;
}

/* ---------------------------------------------------------------- hero */
.sc-hero{
	background:linear-gradient(160deg,#2b3440 0%,#222a35 55%,#1b222c 100%);
	color:#fff; padding:64px 0 72px;
}
.sc-hero > .wp-block-group__inner-container{
	display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
	gap:48px; align-items:center;
}
.sc-hero h1{ color:#fff; font-size:2.6rem; line-height:1.12; margin:.35rem 0 .5rem; }
.sc-hero h1 b{ color:var(--accent); font-weight:inherit; }
.sc-hero .sc-eyebrow{ color:var(--accent); }
.sc-hero-tag{ font-size:1.15rem; font-weight:600; margin:0 0 .9rem; color:#fff; }
.sc-hero-sub{ color:rgba(255,255,255,.78); line-height:1.6; margin:0 0 1.6rem; }
.sc-hero-sub b{ color:#fff; font-weight:600; }
.sc-fine{ font-size:.85rem; color:rgba(255,255,255,.6); margin:.9rem 0 .2rem; }
.sc-demo-cta{ font-size:.9rem; margin:.2rem 0; }
.sc-demo-cta a{ color:var(--accent); text-decoration:none; }
.sc-demo-cta a:hover{ text-decoration:underline; }
.sc-hero__shot img{ border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.35); }

/* ------------------------------------------------------------- buttons */
.wp-block-button.sc-btn-primary .wp-block-button__link{
	background:var(--accent); color:#fff; border-radius:10px;
	padding:.8rem 1.4rem; font-weight:600;
}
.wp-block-button.sc-btn-primary .wp-block-button__link:hover{ background:var(--accent-2); }
.wp-block-button.sc-btn-secondary .wp-block-button__link{
	background:transparent; color:inherit; border:1px solid currentColor;
	border-radius:10px; padding:.8rem 1.4rem; font-weight:600;
}
.sc-hero .wp-block-buttons{ gap:12px; }

/* --------------------------------------------------------- feature grid */
.sc-feature-grid{
	display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
	gap:20px; margin-bottom:1rem;
}
/* core/group renders an inner container around its children, which would be the
   grid's only item. Let it pass through so the cards themselves are the items. */
.sc-feature-grid > .wp-block-group__inner-container{ display:contents; }
.sc-feature{
	background:var(--base-3); border:1px solid rgba(43,52,64,.09);
	border-radius:14px; padding:22px 20px;
}
/* The theme pads and block-gaps every inner container, which inside a small card
   eats ~100px of text width and stacks up a lot of dead vertical space. Inside
   cards the spacing is set here instead. */
.sc-feature > .wp-block-group__inner-container{
	padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem;
}
.sc-feature > .wp-block-group__inner-container > *{ margin-block:0; }
.sc-feature h3{ font-size:1rem; margin:0; line-height:1.3; }
.sc-feature p{ font-size:.9rem; line-height:1.5; color:var(--contrast-3); margin:0; }
.sc-feature__icon svg{ width:22px; height:22px; fill:var(--accent); display:block; }
.sc-new{
	display:inline-block; margin-left:.4rem; padding:.1rem .4rem;
	font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
	background:var(--accent); color:#fff; border-radius:5px; vertical-align:middle;
}

.sc-wide-shot{ margin:0 auto 2.5rem; }
.sc-wide-shot img{ border-radius:14px; width:100%; height:auto; }

/* --------------------------------------------------------- spotlights */
.sc-spotlight{ padding:72px 0; }
.sc-spotlight > .wp-block-group__inner-container{
	display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
	gap:48px; align-items:center;
}
.sc-spotlight.is-reverse > .wp-block-group__inner-container > .sc-spotlight__text{ order:2; }
.sc-spotlight h2{ text-align:left; }
.sc-spotlight p{ color:var(--contrast-3); line-height:1.6; }
.sc-spotlight__shot img{ border-radius:14px; box-shadow:0 14px 40px rgba(20,25,32,.14); }

/* -------------------------------------------------------------- story */
.sc-story{ }
.sc-story > .wp-block-group__inner-container{
	background:#2b3440; color:#fff; border-radius:18px; padding:44px 40px; max-width:900px;
}
.sc-story h2{ color:#fff; }
.sc-story p{ color:rgba(255,255,255,.8); text-align:center; }
.sc-story a{ color:var(--accent); }

/* ---------------------------------------------------------------- faq */
.sc-faq .wp-block-details{
	border-bottom:1px solid rgba(43,52,64,.12); padding:14px 0; max-width:820px;
	margin-inline:auto;
}
.sc-faq .wp-block-details summary{
	cursor:pointer; font-weight:600; list-style:none; position:relative; padding-right:28px;
}
.sc-faq .wp-block-details summary::-webkit-details-marker{ display:none; }
.sc-faq .wp-block-details summary::after{
	content:"+"; position:absolute; right:4px; top:-2px;
	font-size:1.25rem; color:var(--accent); line-height:1;
}
.sc-faq .wp-block-details[open] summary::after{ content:"–"; }
.sc-faq .wp-block-details p{ color:var(--contrast-3); margin:.7rem 0 .2rem; line-height:1.6; }

/* ----------------------------------------------------------- final CTA */
.sc-final-cta{ background:#2b3440; color:#fff; padding:72px 0; text-align:center; }
.sc-final-cta h2{ color:#fff; }
.sc-final-cta p{ color:rgba(255,255,255,.78); }
.sc-final-cta .wp-block-buttons{ justify-content:center; gap:12px; }

/* -------------------------------------------------------- breakpoints */
@media (max-width:1024px){
	.sc-feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
	.sc-hero > .wp-block-group__inner-container,
	.sc-spotlight > .wp-block-group__inner-container{ grid-template-columns:1fr; gap:32px; }
	.sc-spotlight.is-reverse > .wp-block-group__inner-container > .sc-spotlight__text{ order:0; }
	.sc-hero h1{ font-size:2.05rem; }
	.sc-section, .sc-spotlight{ padding:52px 0; }
}
@media (max-width:600px){
	.sc-feature-grid{ grid-template-columns:1fr; }
}

/* Text columns: same treatment, so hero and spotlight copy sit at sane rhythm. */
.sc-hero__text > .wp-block-group__inner-container,
.sc-spotlight__text > .wp-block-group__inner-container{ padding:0; }
.sc-section > .wp-block-group__inner-container{ padding-block:0; }