/*
Theme Name: Quadcopter Center
Description: Drone guides, UK rules and videos.
Version: 1.0
Requires at least: 6.5
License: GPLv2 or later
Text Domain: qcenter
*/

:root {
	--jds-radius: 10px;
	--jds-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.06);
}
body { -webkit-font-smoothing: antialiased; }
a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }

/* ---- header ------------------------------------------------------------------------ */
.jds-header { border-bottom: 1px solid var(--wp--preset--color--rule); background: var(--wp--preset--color--header); position: sticky; top: 0; z-index: 50; }
.jds-header-row { padding: 14px 0; gap: 20px; }
.jds-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--wp--preset--color--header-ink); }
.jds-brand svg { width: 34px; height: 34px; flex: none; }
.jds-brand .wp-block-site-title { margin: 0; }
.jds-header .wp-block-site-title a, .jds-header .wp-block-site-title { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 22px; letter-spacing: .01em; color: var(--wp--preset--color--header-ink); text-decoration: none; }
.jds-header .wp-block-navigation { font-family: var(--wp--preset--font-family--display); font-size: 15px; font-weight: 600; color: var(--wp--preset--color--header-ink); }
.jds-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent); }
.jds-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--header); color: var(--wp--preset--color--header-ink); }

/* ---- page heads and hero --------------------------------------------------------------- */
.jds-main { padding-top: 40px; padding-bottom: 72px; }
.jds-eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--accent); margin: 0 0 10px; }
.jds-lead { font-size: 21px; color: var(--wp--preset--color--muted); max-width: 680px; }
.jds-hero { padding: 64px 0 40px; }
.jds-hero h1 { max-width: 15ch; }
.jds-hero .jds-lead { font-size: 22px; }
.jds-pagehead { margin-bottom: 36px; }
.jds-pagehead h1 { margin: 0 0 8px; }

/* ---- cards ------------------------------------------------------------------------- */
.jds-cards .wp-block-post-template { gap: 26px; }
.jds-card { background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--rule); border-radius: var(--jds-radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.jds-card:hover { transform: translateY(-2px); box-shadow: var(--jds-shadow); }
.jds-card .wp-block-post-featured-image { margin: 0; }
.jds-card .wp-block-post-featured-image img { display: block; width: 100%; }
.jds-card__body { padding: 18px 20px 22px; }
.jds-card__body > * { margin-block: 0 8px; }
.jds-card__cat, .jds-card__cat a { font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--accent); text-decoration: none; }
.jds-card h3 { font-size: 21px; line-height: 1.25; letter-spacing: 0; text-transform: none; }
.jds-card h3 a { color: var(--wp--preset--color--ink); text-decoration: none; }
.jds-card h3 a:hover { color: var(--wp--preset--color--accent); }
.jds-card .wp-block-post-excerpt { font-size: 16px; color: var(--wp--preset--color--muted); }
.jds-card .wp-block-post-excerpt p { margin: 0; }
@media (max-width: 900px) { .jds-cards .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .jds-cards .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; } }
.jds-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: 64px; }
.jds-section-head h2 { margin: 0; }
.jds-section-head p { margin: 0; }

/* ---- articles -------------------------------------------------------------------------- */
.jds-article .wp-block-post-title { margin-top: 6px; }
.jds-article .wp-block-post-title + .jds-meta, .jds-article .jds-meta { margin-top: 14px; }
.jds-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-family: var(--wp--preset--font-family--mono); font-size: 13px; color: var(--wp--preset--color--muted); margin: 0; }
.jds-meta__cat { color: var(--wp--preset--color--accent); text-transform: uppercase; letter-spacing: .12em; text-decoration: none; }
.jds-article .wp-block-post-featured-image img { border-radius: var(--jds-radius); }
.jds-article .wp-block-post-content h2 { margin-top: 2.2em; scroll-margin-top: 90px; }
.jds-article .wp-block-post-content h3 { margin-top: 1.8em; }
.jds-article .wp-block-post-content li { margin-bottom: .35em; }
.jds-toc { background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--rule); border-left: 4px solid var(--wp--preset--color--accent); border-radius: 6px; padding: 16px 22px 10px; margin: 28px 0; font-size: 17px; }
.jds-toc__title { font-family: var(--wp--preset--font-family--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 6px; }
.jds-toc ol { margin: 0; padding-left: 1.3em; }
.jds-toc li { margin: 0 0 6px; }
.jds-note { background: var(--wp--preset--color--note); border-radius: 8px; padding: 16px 22px; border-left: 4px solid var(--wp--preset--color--accent); }
.jds-note p { margin: 0; }
.wp-block-code { background: var(--wp--preset--color--code); color: var(--wp--preset--color--code-ink); border-radius: 8px; padding: 18px 20px; font-size: 15px; line-height: 1.55; overflow-x: auto; border: 1px solid var(--wp--preset--color--rule); }
.wp-block-code code { font-family: var(--wp--preset--font-family--mono); white-space: pre; }
:not(pre) > code { font-family: var(--wp--preset--font-family--mono); font-size: .88em; background: var(--wp--preset--color--note); padding: .1em .35em; border-radius: 4px; }
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; font-size: 16px; }
.wp-block-table th, .wp-block-table td { border: 1px solid var(--wp--preset--color--rule); padding: 9px 12px; text-align: left; vertical-align: top; }
.wp-block-table thead { background: var(--wp--preset--color--card); border-bottom: 2px solid var(--wp--preset--color--accent); }
.jds-postnav { border-top: 1px solid var(--wp--preset--color--rule); margin-top: 48px; padding-top: 24px; gap: 20px; font-size: 16px; }
.jds-back a { font-family: var(--wp--preset--font-family--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }

/* ---- videos -------------------------------------------------------------------------- */
.jds-video { margin: 28px 0; }
.jds-video__play { position: relative; display: block; width: 100%; aspect-ratio: 16/9; padding: 0; border: 0; border-radius: var(--jds-radius); overflow: hidden; cursor: pointer; background: #000; }
.jds-video__play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: opacity .15s; }
.jds-video__play:hover img { opacity: 1; }
.jds-video__btn { position: absolute; inset: 0; display: grid; place-items: center; }
.jds-video iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--jds-radius); display: block; }
.jds-video--tall .jds-video__play, .jds-video--tall iframe { aspect-ratio: 9/16; max-width: 360px; margin: 0 auto; }
.jds-video figcaption { font-size: 15px; color: var(--wp--preset--color--muted); margin-top: 8px; }
.jds-vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.jds-vgrid .jds-video { margin: 0; }
.jds-vgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .jds-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .jds-vgrid, .jds-vgrid--2 { grid-template-columns: 1fr; } }
.jds-playlist { margin: 0 0 56px; }
.jds-playlist__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 18px; }
.jds-playlist__head h2 { margin: 0; }
.jds-playlist__head a { font-size: 15px; }
.jds-related { margin-top: 48px; }
.jds-btn, .jds-sub a { display: inline-block; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-ink); padding: 12px 22px; border-radius: 6px; font-family: var(--wp--preset--font-family--display); font-weight: 700; text-decoration: none; }
.jds-empty { color: var(--wp--preset--color--muted); }

/* ---- adverts -------------------------------------------------------------------------- */
.jds-ad { margin: 40px 0 16px; padding: 10px 0; border-top: 1px solid var(--wp--preset--color--rule); border-bottom: 1px solid var(--wp--preset--color--rule); min-height: 120px; }
.jds-ad__label { margin: 0 0 8px; font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--muted); text-align: center; }

/* ---- footer ----------------------------------------------------------------------------- */
.jds-footer { background: var(--wp--preset--color--footer); color: var(--wp--preset--color--footer-ink); padding: 48px 0 32px; }
.jds-footer a { color: var(--wp--preset--color--footer-ink); }
.jds-footer-row { gap: 30px; }
.jds-footer .wp-block-site-title, .jds-footer .wp-block-site-title a { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 20px; color: var(--wp--preset--color--footer-ink); text-decoration: none; }
.jds-footer .wp-block-site-tagline { font-size: 16px; opacity: .8; margin: 4px 0 0; max-width: 420px; }
.jds-footer-nav { font-size: 15px; gap: 8px 22px; }
.jds-footer-small { font-size: 14px; opacity: .7; margin-top: 36px; }

/* ---- search / misc ------------------------------------------------------------------- */
.wp-block-search__input { border-radius: 6px; border: 1px solid var(--wp--preset--color--rule); padding: 10px 12px; background: var(--wp--preset--color--card); color: var(--wp--preset--color--ink); }
.wp-block-query-pagination { margin-top: 40px; font-family: var(--wp--preset--font-family--mono); }

.jds-hero { background: linear-gradient(160deg,#0E1A2B 0%,#14304F 100%); color:#E6ECF3; border-radius:16px; padding:56px 44px; margin-bottom:24px; position:relative; overflow:hidden; }
.jds-hero::after { content:""; position:absolute; right:-60px; top:-60px; width:340px; height:340px; border-radius:50%; border:2px dashed rgba(232,89,12,.45); }
.jds-hero h1, .jds-hero h2 { color:#fff; position:relative; }
.jds-hero .jds-lead { color:#C2CCD8; position:relative; }
.jds-hero .jds-eyebrow { color:#FF8A4C; }
.jds-hero .wp-block-buttons { position:relative; display:flex; flex-wrap:wrap; gap:12px; }
.jds-hero .wp-block-button.is-style-outline .wp-block-button__link { background:transparent; border:2px solid rgba(255,255,255,.7); padding:11px 22px; }
.jds-hero .wp-block-button.is-style-outline .wp-block-button__link { color:#fff; }
@media (max-width:600px){ .jds-hero { padding:36px 22px; } }
.jds-start { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:24px; }
@media (max-width:900px){ .jds-start { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .jds-start { grid-template-columns:1fr; } }
.jds-start h3 a { color:var(--wp--preset--color--heading); text-decoration:none; }
.jds-start h3 a:hover { color:var(--wp--preset--color--accent); }
.jds-start .wp-block-column { background:#fff; border:1px solid var(--wp--preset--color--rule); border-top:4px solid var(--wp--preset--color--accent); border-radius:10px; padding:20px 22px; }
.jds-start h3 { margin:0 0 6px; font-size:20px; }
.jds-start p { margin:0; font-size:16px; color:var(--wp--preset--color--muted); }