/*
Theme Name: King & Country
Description: One small theme for kingandcountry.tv. No page builder and no slider plugin: pages and posts are ordinary WordPress blocks, with a few drawn the K&C way (inc/blocks.php).
Version: 1.0.0
Requires PHP: 8.1
Text Domain: kc
Update URI: false
*/

:root {
	--kc-black: #000;
	--kc-text: #fff;
	--kc-muted: #808080;
	--kc-accent: #ff6863;
	--kc-header: 64px;
	--kc-wide: 1140px;
	--kc-font: "Montserrat", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--kc-black); color: var(--kc-text); font-family: var(--kc-font); font-weight: 400; font-size: 14px; line-height: 1.66; -webkit-font-smoothing: antialiased; }
img, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--kc-accent); text-decoration: none; }
a:hover { color: #fff; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header: black bar, logo left, menu right; Work opens its list on hover. */
.kc-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--kc-header); background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; transition: opacity .4s; }
.kc-header.is-hidden { opacity: 0; pointer-events: none; }
.admin-bar .kc-header { top: 32px; }
.kc-logo img { width: 250px; height: auto; }
.kc-nav ul { list-style: none; margin: 0; padding: 0; }
.kc-nav > ul { display: flex; gap: 55px; }
.kc-nav li { position: relative; }
.kc-nav a { color: #fff; font-size: 15px; font-weight: 500; display: block; padding: 8px 0; }
.kc-nav a:hover, .kc-nav .current-menu-item > a, .kc-nav .current-menu-ancestor > a { color: var(--kc-accent); }
.kc-nav .current-menu-item > a, .kc-nav .current-menu-ancestor > a { text-decoration: underline; text-underline-offset: 6px; }
.kc-nav .sub-menu { position: absolute; top: 100%; left: -14px; min-width: 190px; background: #000; padding: 10px 0; margin-top: 6px; opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .3s; }
/* An invisible strip over the gap under Work, so the list stays open while the pointer crosses to it,
   and a short pause before it closes if the pointer strays off. */
.kc-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
.kc-nav li:hover > .sub-menu, .kc-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s; }
.kc-nav .sub-menu a { padding: 6px 28px 6px 14px; text-decoration: none; }
.kc-nav a:not([href]) { cursor: default; }
.kc-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.kc-burger span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; }

@media (max-width: 900px) {
	/* On phones the old site showed only a coral menu button over the page, no bar or logo. */
	.kc-header { padding: 0 12px; background: none; justify-content: flex-end; pointer-events: none; }
	.kc-header > * { pointer-events: auto; }
	.kc-logo { display: none; }
	.kc-burger span { background: var(--kc-accent); width: 26px; height: 3px; }
	.kc-burger { display: block; position: relative; z-index: 2; }
	.kc-nav { position: fixed; inset: 0; background: #000 var(--kc-menu-bg, none) top / 100% no-repeat; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s; }
	.kc-menu-open .kc-nav { opacity: 1; visibility: visible; }
	.kc-nav > ul { flex-direction: column; gap: 4px; text-align: center; }
	.kc-nav a { font-size: 20px; }
	.kc-nav .sub-menu { position: static; opacity: 1; visibility: visible; background: none; padding: 0 0 8px; margin: 0; }
	.kc-nav .sub-menu a { font-size: 15px; padding: 3px 0; color: #bbb; }
	.kc-menu-open { overflow: hidden; }
}

/* The header floats over the top of the page, as Jupiter's did; pages leave room for it themselves. */
.kc-main { min-height: 60vh; }
.kc-footer { text-align: center; padding: 120px 0 40px; font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--kc-accent); }
.kc-social { display: flex; justify-content: center; gap: 14px; margin: 0 0 32px; }
.kc-social a { width: 50px; height: 50px; display: grid; place-items: center; background: #1a1a1a; }
.kc-social svg { width: 16px; height: 16px; fill: var(--kc-accent); }
.kc-social a:hover { background: #222; }

/* Rows and columns, as WPBakery laid them out. */
.kc-row { position: relative; display: flex; flex-wrap: wrap; width: 100%; max-width: var(--kc-wide); margin: 0 auto; background-size: cover; background-position: center; }
.kc-row--full { max-width: none; }
.kc-row--equal { align-items: stretch; }
.kc-row--attached { background-attachment: fixed; }
.kc-col { flex: 1 1 100%; min-width: 0; }
.kc-col > :last-child { margin-bottom: 0; }
.kc-row:not(.kc-row--full) > .kc-col { padding: 0 20px; }
.vertical-align { display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 768px) {
	.kc-col[data-w] { flex: 0 0 calc(var(--w) * 100%); }
}
.kc-text { margin-bottom: 20px; }
.kc-text--center { text-align: center; }
/* Jupiter's text widget (Contact): bigger, bolder, tight lines. */
.kc-widget-text { font-size: 18px; font-weight: 500; line-height: 1.3; }
.kc-widget-text h1 { font-size: 40px; margin: 0 0 18px; }
.kc-widget-text h2 { font-size: 28px; font-weight: 400; margin: 0 0 14px; }
.kc-space { display: block; }
.kc-title { margin: 0 0 18px; font-weight: 300; }
.kc-image { margin: 0 0 20px; }
.kc-image img { width: 100%; }
.kc-image--center img { margin: 0 auto; width: auto; }
.kc-image--left img { margin-right: auto; width: auto; }
.kc-image--right img { margin-left: auto; width: auto; }
.kc-raw { line-height: 0; }
.kc-raw > * { line-height: normal; }
.kc-icon { text-align: center; margin: 0 0 20px; }
.kc-icon svg { width: 56px; height: 56px; fill: var(--kc-accent); }

/* Video: a poster with a play button until clicked; self-hosted loops just play. */
.kc-video { position: relative; aspect-ratio: 16 / 9; background: #000; margin: 0 0 20px; overflow: hidden; }
.kc-video iframe, .kc-video video, .kc-video img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.kc-video__play { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(0,0,0,.5); cursor: pointer; }
/* The live site's play button: a plain white triangle, 128px tall, at half strength until the pointer is on it. */
.kc-video__play::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100.57px; height: 128px; transform: translate(-50%, -50%); background: var(--kc-play-color, #fff); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1408 1792'%3E%3Cpath d='M1384 927l-1328 738q-23 13-39.5 3t-16.5-36v-1472q0-26 16.5-36t39.5 3l1328 738q23 13 23 31t-23 31z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1408 1792'%3E%3Cpath d='M1384 927l-1328 738q-23 13-39.5 3t-16.5-36v-1472q0-26 16.5-36t39.5 3l1328 738q23 13 23 31t-23 31z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .5; transition: opacity .2s ease-in-out; }
.kc-video__play:is(:hover, :focus-visible)::after { opacity: 1; }
.kc-video--native { aspect-ratio: auto; }
.kc-video--loop iframe, .kc-video--loop video { pointer-events: none; } /* nothing to pause, scrub or click */
/* A "Play video" image with its own spacing: the image's margin replaces the video's usual 20px gap below. */
.kc-video-spacing { margin: 0 0 20px; }
.kc-video-spacing > .kc-video { margin: 0; }
.kc-video--native video { position: static; height: auto; }

/* Slideshows (image carousels, Jupiter slideshows). */
.kc-slides { position: relative; overflow: hidden; margin: 0 0 20px; }
.kc-slides__track { display: flex; transition: transform .8s ease; }
.kc-slides__track > * { flex: 0 0 100%; }
.kc-slides img { width: 100%; }
.kc-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin: 0 0 20px; }
.kc-gallery img { width: 100%; height: 100%; object-fit: cover; }

/* Revolution Slider modules, drawn from their saved layers without the plugin. Layers are
   placed on the module's grid in container units, so they scale with the width the way the
   plugin scaled them. */
.kc-rs { position: relative; width: 100%; overflow: hidden; background: #000; }
.kc-rs--auto, .kc-rs--fullwidth { aspect-ratio: var(--rs-ratio); }
/* The plugin stretched full-width and full-screen modules to the window, even inside a boxed row. */
.kc-rs--fullwidth, .kc-rs--fullscreen { width: 100vw; margin-left: calc(50% - 50vw); }
.kc-row:not(.kc-row--full) > .kc-col:has(> .kc-rs--fullscreen:only-child), .kc-row:not(.kc-row--full) > .kc-col:has(> .kc-rs--fullwidth:only-child) { padding: 0; }
.kc-rs--fullscreen { height: 100vh; height: 100svh; min-height: calc(100vw / var(--rs-ratio-n, 1.7778)); }
.kc-rs__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; }
.kc-rs__slide.is-on { opacity: 1; }
.kc-rs__slide > a.kc-rs__link { position: absolute; inset: 0; z-index: 1; }
.kc-rs__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.kc-rs__bg--vimeo { pointer-events: none; }
.kc-rs__grid { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); aspect-ratio: var(--rs-ratio); container-type: inline-size; z-index: 2; pointer-events: none; }
.kc-rs__layer { position: absolute; left: var(--l, auto); right: var(--r, auto); top: var(--t, auto); bottom: var(--b, auto); width: var(--w, auto); height: var(--h, auto); transform: translate(var(--tx, 0), var(--ty, 0)); font-size: var(--fs); line-height: var(--lh); letter-spacing: var(--ls, normal); font-weight: var(--fw, 400); color: var(--c, #fff); text-align: var(--ta, left); white-space: var(--ws, nowrap); font-family: var(--ff), var(--kc-font); text-transform: var(--tt, none); background: var(--bg, none); padding: var(--pad, 0); z-index: var(--z, 1); pointer-events: auto; }
.kc-rs__layer img { width: 100%; height: 100%; object-fit: contain; }
.kc-rs__layer a { color: inherit; }
.kc-rs__layer a:hover { color: var(--hc, inherit); }
@media (max-width: 777px) {
	.kc-rs--m { --rs-ratio: var(--rs-ratio-m); --rs-ratio-n: var(--rs-ratio-mn); }
	.kc-rs--m .kc-rs__layer { left: var(--ml, var(--l, auto)); right: var(--mr, var(--r, auto)); top: var(--mt, var(--t, auto)); bottom: var(--mb, var(--b, auto)); width: var(--mw, var(--w, auto)); height: var(--mh, var(--h, auto)); transform: translate(var(--mtx, var(--tx, 0)), var(--mty, var(--ty, 0))); font-size: var(--mfs, var(--fs)); line-height: var(--mlh, var(--lh)); }
	.kc-rs__layer.is-hidden-m { display: none; }
}
@media (min-width: 778px) { .kc-rs__layer.is-hidden-d { display: none; } }

/* The Grid: square tiles, client in small caps over the title. */
.kc-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); }
.kc-tile { position: relative; aspect-ratio: var(--ratio, 1); overflow: hidden; display: block; color: #fff; background: #111; }
.kc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.kc-tile::after { content: ""; position: absolute; inset: 0; background: rgba(10,10,10,.36); opacity: 0; transition: opacity .3s; }
.kc-tile:hover::after { opacity: 1; }
.kc-tile:hover img { transform: scale(1.03); }
.kc-tile:hover { color: #fff; }
.kc-tile__text { position: absolute; left: 28px; right: 20px; top: 42%; z-index: 1; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.kc-tile__client { display: block; font-size: 18px; font-weight: 700; text-transform: uppercase; line-height: 1.2; }
.kc-tile__title { display: block; font-size: 28px; font-weight: 300; line-height: 1.3; margin: 0; }
.kc-tile[hidden] { display: none; }
.kc-grid__more { height: 1px; }
@media (max-width: 980px) { .kc-tile__client { font-size: 15px; } .kc-tile__title { font-size: 22px; } }
@media (max-width: 768px) { .kc-grid { --cols: var(--cols-m, 2) !important; } .kc-tile__text { left: 14px; right: 10px; top: 36%; } .kc-tile__client { font-size: 16px; } .kc-tile__title { font-size: 18px; line-height: 1.25; } }

/* Blocks. Rows from the old page builder are groups: kc-wide is the boxed width, kc-full runs edge to edge. */
.kc-entry .kc-wide { max-width: var(--kc-wide); margin-inline: auto; padding-inline: 20px; }
.kc-entry .kc-full { max-width: none; }
.kc-entry .wp-block-group { margin-block: 0; }
.kc-entry .wp-block-columns { gap: 0; margin: 0; }
.kc-entry .wp-block-columns.kc-wide { padding-inline: 0; }
.kc-entry .wp-block-columns.kc-wide > .wp-block-column { padding-inline: 20px; }
/* A classic theme's group holds its blocks in an inner container, so its last block is a child of that. */
.kc-entry .wp-block-column > :last-child, .kc-entry .wp-block-group > :last-child, .kc-entry .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.kc-entry .wp-block-image, .kc-entry .wp-block-video, .kc-entry .wp-block-embed, .kc-entry .wp-block-gallery { margin: 0 0 20px; }
/* A picture on its own fills its section's width, stretched past its own size on a wide screen. Pictures in a card,
   gallery or slideshow keep their own rules, and so does one floated left or right or given a size by hand. */
.kc-entry .wp-block-image img:not(:is(.alignleft, .alignright, .is-resized, .kc-card, .wp-block-gallery, .kc-slideshow) img) { width: 100%; height: auto; }
.kc-entry .wp-block-image > .aligncenter:not(.is-resized, .kc-card *) { display: block; width: 100%; }
.kc-entry .wp-block-image.aligncenter { margin-inline: auto; }
.kc-entry .wp-block-video video { display: block; width: 100%; }
/* The looping clips were part of the picture stack on the old site, so a clip sits flush against a picture or clip under it. */
.kc-entry .wp-block-video:has(+ :is(.wp-block-image, .wp-block-video, .wp-block-embed)) { margin-bottom: 0; }
.kc-entry .wp-block-embed__wrapper iframe { width: 100%; }
.kc-entry .wp-block-spacer { margin: 0; }
.kc-entry .has-text-align-center { text-align: center; }
.kc-entry .has-text-align-right { text-align: right; }

/* Text as Jupiter set it on the old site: 40px titles, 20px paragraphs. */
.kc-entry h1 { font-size: 40px; line-height: 1; }
.kc-entry p { font-size: 20px; line-height: 1.2; }
.kc-entry .kc-widget-text p { font-size: 18px; line-height: 1.3; }
@media (max-width: 768px) { .kc-entry h1 { font-size: 30px; } .kc-entry p { font-size: 17px; } }

/* A project card: a picture (or looping video) with its words on it, scaled with the card. The whole card is the link. */
/* Words sit in the middle unless the card says otherwise: WordPress writes no position class for "center center". */
.kc-entry .wp-block-cover.kc-card { min-height: 0; padding: 0; color: #fff; container-type: inline-size; overflow: hidden; align-items: center; }
.kc-entry .kc-card.is-position-top-left, .kc-entry .kc-card.is-position-top-center, .kc-entry .kc-card.is-position-top-right { align-items: flex-start; }
.kc-entry .kc-card.is-position-bottom-left, .kc-entry .kc-card.is-position-bottom-center, .kc-entry .kc-card.is-position-bottom-right { align-items: flex-end; }
.kc-entry .kc-card .wp-block-cover__inner-container { width: 100%; color: inherit; }
.kc-entry .kc-card :is(h1, h2, h3, p) { white-space: nowrap; }
.kc-entry .kc-card a { color: inherit; }
.kc-entry .kc-card a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.kc-entry .kc-card .wp-block-image { margin: 0; }
/* WordPress wraps a centred image in a div and shrinks its figure to fit; a card's logo is sized against the whole card. */
.kc-entry .kc-card .wp-block-image .aligncenter, .kc-entry .kc-card .wp-block-image.aligncenter { display: block; }
.kc-entry .kc-card .aligncenter img { margin-inline: auto; }
.kc-entry .kc-card .wp-block-image:not(.is-resized) img { width: 100%; }
.kc-entry .kc-break { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
.kc-entry .kc-wide:has(> .kc-break:only-child) { padding-inline: 0; }
.kc-entry .kc-card[style*="min-height:100vh"] { min-height: 100svh !important; }
/* On phones the old modules had their own layout: lines may wrap, and a full-screen card holds its words in the middle. */
@media (max-width: 777px) {
	.kc-entry .kc-card :is(h1, h2, h3, p) { white-space: normal; }
	.kc-entry .kc-card .wp-block-cover__inner-container { padding-inline: 16px; }
	.kc-entry .kc-card[style*="min-height:100vh"] { align-items: center; padding-top: 0 !important; }
}

/* A slideshow: a gallery shown one picture at a time. */
.kc-entry .wp-block-gallery.kc-slideshow { display: flex !important; flex-wrap: nowrap !important; overflow: hidden; gap: 0 !important; }
.kc-entry .kc-slideshow > figure.wp-block-image { flex: 0 0 100% !important; width: 100% !important; margin: 0 !important; transform: translateX(calc(-100% * var(--i, 0))); transition: transform .8s ease; }

/* The site's own extra CSS, carried over from Jupiter's Customizer where it still applies. */
.about__row { max-width: 1000px !important; margin: auto; }
.about__column { max-width: 300px; margin: auto; }
.about__column p { text-align: center; color: var(--kc-muted); font-size: 16px; line-height: 25px; }
.about__column h1 { padding-bottom: 20px; padding-top: 40px; }

.kc-404 { text-align: center; padding: 140px 20px; }
.kc-404 h1 { font-size: 40px; }