/*
 Theme Name:   Davis Karate Academy
 Theme URI:    https://daviskarateacademy.nz/
 Description:  GeneratePress child theme for Davis Karate Academy. Every value here is measured from the original Elementor site at three widths: desktop (>=1025px), tablet (768-1024px) and mobile (<=767px).
 Author:       Davis Karate Academy
 Template:     generatepress
 Version:      2.0.0
 Text Domain:  dka-generatepress-child
*/

:root{
	--dka-red: #e40000;
	--dka-red-dark: #c20000;
	--dka-icon-red: #ff3b3f;
	--dka-ink: #0f0c0a;
	--dka-text: #333333;
	--dka-grey-text: #54595f;
	--dka-beige: #eee8e0;
	--dka-heading: "Poppins", sans-serif;
	--dka-body: "Roboto Condensed", sans-serif;
	--dka-jp: "Hina Mincho", serif;
	--dka-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* GeneratePress's default accent is a blue (#1e73be) used for link and
   hover colours. Nothing on the original site is blue, so retire it. */
:root{
	--accent: #54595f;
	--contrast: #333333;
}

/* ==========================================================================
   Neutralise GeneratePress's container system. The original is edge-to-edge
   colour bands with nothing showing between them; GP's default puts each
   section on a white card over a grey page, which reads as grey stripes.
   ========================================================================== */
body{
	background-color: #ffffff;
	font-family: var(--dka-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--dka-text);
}

.site-content,
.content-area,
.site-main,
.entry-content,
.inside-article,
.one-container .site-content,
.separate-containers .site-main,
.separate-containers .inside-article,
article.page{
	background: none !important;
	background-color: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}

.site-content{
	display: block !important;
}

/* The colour bands run edge to edge, so the content column can't be capped
   at GeneratePress's container width. */
#page,
.site,
.site-content,
.site-content .container,
.site-content .grid-container{
	max-width: none !important;
	width: auto !important;
}

/* GP gives .alignfull a 100vw width plus negative margins; 100vw includes
   the scrollbar, which pushed a horizontal scrollbar onto every page.
   The content column is already full width, so neither is needed. */
.entry-content > .alignfull,
.dka-hero.alignfull{
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: none !important;
}

/* WordPress injects .wp-block-group__inner-container inside group blocks.
   Removing it from the layout lets the blocks inside take part in the
   flex rows below instead of stacking inside a block-level wrapper. */
.dka-hero-text > .wp-block-group__inner-container,
.dka-hero-jp-col > .wp-block-group__inner-container,
.dka-two-col > .wp-block-group__inner-container,
.dka-col > .wp-block-group__inner-container{
	display: contents;
}

/* GeneratePress also gives those wrappers 40px of padding, which pushed
   every text section in 40px and added 80px of height per section. */
.dka-container > .wp-block-group__inner-container{
	padding: 0;
	max-width: none;
	margin: 0;
}

/* GP's own footer wrapper would render as an empty band under ours. */
.site-footer{
	display: none !important;
}

.entry-content > *{
	margin-top: 0;
	margin-bottom: 0;
}

a{
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6{
	font-family: var(--dka-heading);
	font-weight: 800;
	color: var(--dka-text);
	margin: 0;
}

img{
	max-width: 100%;
	height: auto;
}

/* Text content that isn't a full-bleed band sits in a 1200px column. */
.dka-container,
.entry-content > .alignwide{
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 30px;
	box-sizing: border-box;
}

.dka-container p,
.dka-col p,
.dka-container li{
	font-family: var(--dka-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 22.5px;
	color: var(--dka-text);
}

.dka-container p,
.dka-col p{
	padding: 5px;
	margin: 0;
}

.dka-container ul{
	margin: 0 0 1em;
	padding-left: 22px;
}

/* A few list items wrap their text in <p> on the original; those shouldn't
   pick up the paragraph padding or they drift the page down. */
.dka-container li p,
.dka-col li p{
	padding: 0;
	margin: 0;
}

.dka-section-title{
	font-family: var(--dka-heading);
	font-weight: 800;
	font-size: 30px;
	line-height: 36px;
	color: var(--dka-text);
	padding: 5px;
	margin: 0 0 5px;
}

.dka-container h3{
	font-family: var(--dka-heading);
	font-weight: 800;
	font-size: 20px;
	line-height: 24px;
	padding: 5px;
	margin: 10px 0 0;
}

/* Sub-headings ("Itosu Kata", "Counting", ...) are the same 30px Poppins as
   section titles but at weight 400 on the original. */
.dka-subhead{
	font-family: var(--dka-heading);
	font-weight: 400;
	font-size: 30px;
	line-height: 36px;
	color: var(--dka-text);
	padding: 5px;
	margin: 0;
}

/* Bold body copy used for "Translated to English" and "Don't have a promo
   code?" - a 15px paragraph at weight 800, not a heading. */
.dka-container p.dka-bold-p,
.dka-col p.dka-bold-p{
	font-weight: 800;
}

/* On the kata page the blocks are shrink-to-fit and centred within their
   column, with the text itself left-aligned. */
.dka-center h2,
.dka-center p{
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/* ==========================================================================
   Kata section - a full-width black band with white text. Both columns stay
   side by side at every screen size; only the type scales down.
   ========================================================================== */
.dka-kata-band{
	background-color: #000000;
	padding: 10px 0 0;
}

.dka-kata-band > .wp-block-group__inner-container{
	padding: 0;
	max-width: none;
	margin: 0;
}

.dka-kata-band .dka-band-title{
	font-family: var(--dka-heading);
	font-weight: 800;
	font-size: 30px;
	line-height: 36px;
	color: #ffffff;
	text-align: center;
	margin: 0;
}

/* "Itosu Kata" / "Higaonna Kata" are Roboto Condensed here, not Poppins. */
.dka-kata-band .dka-subhead{
	font-family: var(--dka-body);
	font-weight: 400;
	font-size: 30px;
	line-height: 36px;
	color: #ffffff;
	width: fit-content;
	margin: 0 auto;
	padding: 0;
	text-align: left;
}

.dka-kata-band .dka-subhead-jp{
	font-family: var(--dka-jp);
	padding: 0;
}

.dka-kata-band p.dka-kata,
.dka-kata-band p.dka-kata-2{
	font-family: var(--dka-body);
	font-size: 15px;
	line-height: 22.5px;
	color: #ffffff;
	width: fit-content;
	margin: 10px auto;
	padding: 0;
	text-align: left;
}

.dka-kata-band p.dka-kata{
	font-weight: 300;
}

.dka-kata-band p.dka-kata-2{
	font-weight: 200;
}

.dka-kata strong,
.dka-kata-2 strong{
	font-weight: inherit;
}

/* The two kata columns never stack - they stay side by side on phones. */
.dka-two-col.dka-kata-cols{
	flex-direction: row;
	max-width: 1200px;
}

.dka-two-col.dka-kata-cols .dka-col{
	flex: 0 0 50%;
	max-width: 50%;
	padding: 10px;
}

/* The kata page is more tightly spaced than the other content pages. */
.dka-container.dka-center{
	padding: 10px 30px;
}

.dka-two-col.dka-center .dka-col{
	padding: 10px 30px;
}

.dka-container p.dka-kata,
.dka-container p.dka-kata-2,
.dka-col p.dka-kata,
.dka-col p.dka-kata-2{
	padding: 0;
}

/* ==========================================================================
   Contact form - matched to the original's field metrics.
   ========================================================================== */
.wp-block-jetpack-contact-form label,
.dka-col form label{
	font-family: var(--dka-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--dka-text);
	margin-bottom: 4px;
	display: block;
}

/* The original insets the fields 20px inside the column. */
.wp-block-jetpack-contact-form{
	padding-left: 20px;
}

/* Jetpack's own field widths load after this stylesheet, so these need to
   be forced to the original's 500x36 fields. */
.wp-block-jetpack-contact-form input[type="text"],
.wp-block-jetpack-contact-form input[type="email"],
.wp-block-jetpack-contact-form textarea{
	width: 500px !important;
	max-width: 100%;
	box-sizing: border-box;
	height: 36px !important;
	background-color: #ffffff;
	border: 1px solid #e0dcd6;
	border-radius: 0;
	font-family: var(--dka-body);
	font-size: 15px;
	padding: 6px 10px;
}

.wp-block-jetpack-contact-form textarea{
	height: 90px !important;
}

.wp-block-jetpack-contact-form button[type="submit"],
.wp-block-jetpack-contact-form .wp-block-button__link{
	background-color: var(--dka-red) !important;
	color: #ffffff !important;
	border: 0;
	border-radius: 30px !important;
	font-family: var(--dka-body) !important;
	font-size: 16px !important;
	height: 44px !important;
	padding: 0 28px !important;
	box-sizing: border-box;
	cursor: pointer;
}

/* Spam protection. The honeypot is moved off-screen rather than hidden with
   display:none, which some bots detect and skip. */
.dka-hp{
	position: absolute !important;
	left: -10000px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Turnstile sits above Submit and lines up with the 500px fields. */
.dka-turnstile{
	max-width: 500px;
	margin: 4px 0 16px;
}

/* Confirmation shown after sending: site typography instead of Jetpack's
   large default heading. */
/* Jetpack's own panel styles outrank a plain class rule, so the 20px inset
   that lines the confirmation up with the form fields is forced. */
.jetpack-contact-form-container .contact-form-submission{
	padding: 0 0 0 20px !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
}

.contact-form-submission h4{
	font-family: var(--dka-heading) !important;
	font-weight: 800 !important;
	font-size: 20px !important;
	line-height: 24px !important;
	color: var(--dka-text) !important;
	margin: 0 !important;
	padding: 5px 0 !important;
}

.contact-form-submission .jetpack_forms_contact-form-custom-success-message{
	font-family: var(--dka-body) !important;
	font-weight: 400 !important;
	font-size: 15px !important;
	line-height: 22.5px !important;
	color: var(--dka-text) !important;
	margin: 0 !important;
	padding: 5px 0 !important;
}

.wp-block-jetpack-contact-form .grunion-field-wrap{
	margin-bottom: 0;
}

.wp-block-jetpack-contact-form .grunion-field-wrap + .grunion-field-wrap{
	margin-top: 10px;
}

/* ==========================================================================
   Header - beige bar, 100px logo, thin Poppins title, nav centred in the
   right half. 10px bar padding, logo 20px in from that.
   ========================================================================== */
/* The header stays pinned to the top while scrolling at every size, as
   on the original (z-index 99 there too). */
.site-header{
	background-color: var(--dka-beige);
	padding: 10px;
	position: sticky;
	top: 0;
	z-index: 99;
}

.admin-bar .site-header{
	top: 32px;
}

@media (max-width: 782px){
	.admin-bar .site-header{
		top: 46px;
	}
}

.site-header .inside-header{
	max-width: none;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

/* Branding takes the left half so the menu centres in the right half,
   which is how the original positions it. */
.site-header .site-branding-container{
	display: flex;
	align-items: center;
	margin-left: 20px;
	flex: 0 0 600px;
	max-width: 50%;
}

.site-header .site-logo{
	margin: 0;
	line-height: 0;
}

.site-header .site-logo img,
.site-header .header-image{
	height: 100px;
	width: auto;
	max-height: 100px;
}

.site-header .site-branding{
	margin-left: 50px;
}

.site-header .main-title,
.site-header .site-description{
	font-family: var(--dka-heading);
	font-weight: 200;
	font-size: 25px;
	line-height: 25px;
	text-transform: uppercase;
	color: var(--dka-ink);
	margin: 0;
}

.site-header .main-title a{
	color: var(--dka-ink);
	font-weight: 200;
}

/* Nav belongs to the beige bar, not a white block of its own. */
.main-navigation,
.main-navigation .inside-navigation,
.main-navigation ul,
.main-navigation ul ul,
.navigation-stick,
.main-navigation.toggled .main-nav > ul{
	background-color: transparent !important;
}

.main-navigation{
	flex: 1 1 auto;
}

.main-navigation .inside-navigation{
	max-width: none;
	padding: 0;
	justify-content: center;
}

.main-navigation .main-nav{
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.main-navigation .main-nav > ul{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 32px;
}

.main-navigation .main-nav ul li a{
	font-family: var(--dka-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--dka-ink);
	padding: 0;
}

/* Menu text is #0F0C0A like the original; hover and the current page are
   grey. GeneratePress's own hover rule uses a :not() selector, which
   outranks a plain .class .class li:hover > a rule, so its blue --accent
   kept winning - hence matching its selectors and forcing the colour. */
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li:hover > a,
.main-navigation .menu-bar-item:hover > a,
.main-navigation .menu-bar-item.sfHover > a{
	color: var(--dka-grey-text) !important;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a{
	color: var(--dka-grey-text) !important;
}

.main-navigation .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle{
	background-color: transparent !important;
	color: var(--dka-ink);
	padding: 0;
}

/* ==========================================================================
   Buttons - Roboto Condensed 400/15px, 12px 24px, 30px radius, no underline.
   ========================================================================== */
.wp-block-button .wp-block-button__link,
.dka-btn,
a.dka-btn{
	background-color: var(--dka-red) !important;
	color: #ffffff !important;
	border-radius: 30px !important;
	font-family: var(--dka-body) !important;
	font-weight: 400 !important;
	font-size: 15px !important;
	line-height: 22.5px !important;
	padding: 12px 24px !important;
	text-decoration: none !important;
	text-transform: none;
	border: 0;
	display: inline-block;
	transition: background-color 0.2s ease;
}

.wp-block-button .wp-block-button__link:hover,
.dka-btn:hover,
a.dka-btn:hover{
	background-color: var(--dka-red-dark) !important;
	color: #ffffff !important;
}

.dka-hero .wp-block-buttons{
	margin: 30px 0;
}

/* ==========================================================================
   Hero - one full-bleed photo behind both halves; the right half carries a
   white gradient so the photo fades out under the Japanese lettering.
   ========================================================================== */
.dka-hero.wp-block-cover{
	min-height: 460px;
	padding: 0;
	align-items: stretch;
	justify-content: flex-start;
	background-color: transparent;
}

.dka-hero .wp-block-cover__image-background{
	object-fit: cover;
	object-position: 0% 0%;
}

.dka-hero .wp-block-cover__background{
	display: none;
}

.dka-hero > .wp-block-cover__inner-container{
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	flex-wrap: nowrap;
	color: var(--dka-text);
}

.dka-hero .wp-block-group__inner-container{
	max-width: none;
	margin: 0;
	padding: 0;
}

.dka-hero .dka-hero-text{
	flex: 0 0 50%;
	max-width: 50%;
	box-sizing: border-box;
	padding: 30px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.dka-hero .dka-hero-title{
	font-family: var(--dka-heading);
	font-weight: 800;
	font-size: 30px;
	line-height: 36px;
	color: var(--dka-text);
	padding: 5px;
	margin: 0;
}

.dka-hero .dka-hero-text p{
	font-family: var(--dka-heading);
	font-weight: 200;
	font-size: 20px;
	line-height: 24px;
	color: var(--dka-text);
	padding: 5px;
	margin: 0;
}

/* The original holds the hero copy to a ~450px measure, so it wraps early
   and stays tucked to the left. The title is bounded only by its column. */
.dka-hero .dka-hero-text p{
	max-width: 450px;
}

.dka-hero .dka-hero-jp-col{
	flex: 0 0 50%;
	max-width: 50%;
	box-sizing: border-box;
	padding: 10px 50px 10px 0;
	background-image: linear-gradient(90deg, rgba(255,255,255,0) 21%, rgb(255,255,255) 88%);
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: stretch;
}

.dka-hero .dka-jp{
	font-family: var(--dka-jp);
	font-weight: 900;
	color: var(--dka-text);
	writing-mode: vertical-rl;
	text-orientation: upright;
	white-space: nowrap;
	text-align: center;
	font-size: 50px;
	line-height: 60px;
	letter-spacing: 5px;
	margin: 0;
	padding: 0;
}

.dka-hero .dka-jp-sm{
	font-size: 30px;
	line-height: 36px;
	letter-spacing: 3px;
	padding: 20px;
	align-self: center;
}

.dka-hero .dka-jp-mid{
	align-self: center;
}

/* ==========================================================================
   Two-column rows (Welcome, grading sections) - 1200px, two 600px halves.
   ========================================================================== */
.dka-two-col{
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.dka-two-col .dka-col{
	flex: 0 0 50%;
	max-width: 50%;
	box-sizing: border-box;
	padding: 30px;
}

.dka-two-col .dka-col-center{
	display: flex;
	align-items: center;
	justify-content: center;
}

.dka-two-col figure{
	margin: 0;
}

/* Images sit centred in their column on the original, whichever side
   they're on. */
.dka-two-col .dka-col figure.wp-block-image img{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.dka-two-col img{
	display: block;
}

/* Production renders the emblem at 300x300, not its natural size. */
.dka-two-col .dka-col-center img{
	width: 300px;
	height: 300px;
	object-fit: contain;
}

/* ==========================================================================
   "Why train here" - red band, 30px padding, two rows of three.
   ========================================================================== */
.dka-why{
	background-color: var(--dka-red);
	padding: 30px;
}

.dka-band-title{
	font-family: var(--dka-heading);
	font-weight: 800;
	font-size: 30px;
	line-height: 36px;
	color: #ffffff;
	text-align: center;
	margin: 0 0 10px;
}

.dka-icon-grid{
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 20px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 30px;
	row-gap: 40px;
}

.dka-icon-box{
	text-align: center;
}

.dka-icon-box .dka-icon{
	color: #ffffff;
	font-size: 50px;
	line-height: 1;
	display: block;
	margin-bottom: 20px;
}

.dka-icon-box h3{
	font-family: var(--dka-body);
	font-weight: 500;
	font-size: 28px;
	line-height: 33.6px;
	color: #ffffff;
	text-align: center;
	margin: 0 0 20px;
}

.dka-icon-box p{
	font-family: var(--dka-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #ffffff;
	text-align: center;
	margin: 0;
}

/* ==========================================================================
   "Our Classes" - black band, 10px padding, two cards.
   ========================================================================== */
.dka-classes{
	background-color: #000000;
	padding: 10px;
}

.dka-classes-grid{
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.dka-class-card{
	flex: 0 0 50%;
	max-width: 50%;
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
}

.dka-class-card img{
	width: 360px;
	max-width: 100%;
	display: inline-block;
}

.dka-class-card h3{
	font-family: var(--dka-body);
	font-weight: 400;
	font-size: 30px;
	line-height: 36px;
	color: #ffffff;
	text-align: center;
	margin: 20px 0;
}

/* ==========================================================================
   Footer - beige band. Desktop padding 1% 4%; map matches the text height.
   ========================================================================== */
.dka-footer{
	background-color: var(--dka-beige);
	padding: 1% 4%;
}

.dka-footer-inner{
	max-width: 1164px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

.dka-footer-info,
.dka-footer-map{
	flex: 0 0 50%;
	max-width: 50%;
	box-sizing: border-box;
	padding: 10px;
}

.dka-footer h2{
	font-family: var(--dka-system);
	font-weight: 500;
	font-size: 32px;
	line-height: 38.4px;
	color: var(--dka-text);
	margin: 0 0 12px;
}

.dka-footer ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.dka-footer .dka-schedule{
	margin-bottom: 20px;
}

.dka-footer li{
	font-family: var(--dka-body);
	font-weight: 400;
	font-size: 17px;
	line-height: 25.5px;
	color: var(--dka-grey-text);
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin: 0;
}

.dka-footer .dka-icon{
	color: var(--dka-icon-red);
	font-size: 16px;
	flex: 0 0 18px;
	text-align: center;
}

.dka-footer a{
	color: var(--dka-grey-text);
}

.dka-footer a:hover{
	color: var(--dka-red);
}

.dka-footer-map iframe{
	display: block;
	width: 100%;
	height: 243px;
	border: 0;
}

/* ==========================================================================
   TABLET  768px - 1024px
   Hero stays side by side; nav collapses to a toggle; footer stacks.
   ========================================================================== */
@media (max-width: 1024px){
	.site-header .site-branding-container{
		margin-left: 5px;
	}

	/* Match the original, which switches to a menu toggle at this width. */
	.main-navigation .menu-toggle{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
	}

	.main-navigation .main-nav > ul{
		display: none;
	}

	.main-navigation.toggled .main-nav > ul{
		display: block;
		width: 100%;
	}

	.main-navigation.toggled .main-nav > ul li a{
		display: block;
		padding: 10px 0;
		text-align: right;
	}

	.dka-hero .dka-hero-jp-col{
		padding: 10px 30px 10px 0;
		background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(255,255,255) 71%);
	}

	.dka-footer{
		padding: 4%;
	}

	.dka-footer-inner{
		flex-direction: column;
		max-width: none;
	}

	.dka-footer-info{
		flex: 0 0 auto;
		max-width: 100%;
		width: 100%;
	}

	.dka-footer-map{
		flex: 0 0 auto;
		max-width: 600px;
		width: 100%;
	}
}

/* ==========================================================================
   MOBILE  <= 767px
   Header stacks and centres; the hero becomes a white text block above the
   photo; the Welcome emblem is hidden; icon boxes go one per row.
   ========================================================================== */
@media (max-width: 767px){
	.site-header{
		padding: 0 0 20px;
	}

	.site-header .inside-header{
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.site-header .site-branding-container{
		flex-direction: column;
		margin: 0;
		text-align: center;
		/* The desktop rule sets flex-basis 600px, which would become a
		   600px height once this container switches to a column. */
		flex: 0 0 auto;
		max-width: 100%;
		width: 100%;
	}

	.site-header .site-branding{
		margin-left: 0;
	}

	/* Production keeps the 25px thin title on mobile; only the layout
	   stacks and centres. */
	.site-header .site-logo{
		margin-bottom: 20px;
	}

	.site-header .site-branding{
		margin-bottom: 15px;
	}

	.main-navigation{
		flex: 0 0 auto;
		width: 100%;
	}

	.main-navigation .menu-toggle{
		justify-content: center;
		font-size: 20px;
		line-height: 20px;
	}

	.main-navigation.toggled .main-nav > ul li a{
		text-align: center;
	}

	/* Hero: the photo moves off the wrapper and onto the lower block. */
	.dka-hero.wp-block-cover{
		min-height: 0;
		background-color: #ffffff;
	}

	.dka-hero .wp-block-cover__image-background{
		display: none;
	}

	.dka-hero > .wp-block-cover__inner-container{
		flex-direction: column;
	}

	.dka-hero .dka-hero-text,
	.dka-hero .dka-hero-jp-col{
		flex: 0 0 auto;
		max-width: 100%;
		width: 100%;
	}

	.dka-hero .dka-hero-text{
		padding: 0;
		align-items: center;
		text-align: center;
	}

	.dka-hero .dka-hero-title{
		font-size: 20px;
		line-height: 24px;
		text-align: center;
		margin: 10px 0 0;
	}

	.dka-hero .dka-hero-text p{
		font-size: 15px;
		line-height: 18px;
		padding: 5px 0;
		text-align: center;
	}

	.dka-hero .wp-block-buttons{
		margin: 10px 0 15px;
		justify-content: center;
		width: 100%;
	}

	.dka-hero .dka-hero-jp-col{
		background-image: var(--dka-hero-img);
		background-size: cover;
		/* The original anchors the photo to its right edge here, which is
		   the lighter part of the image - that's what keeps the Japanese
		   lettering legible. */
		background-position: 100% 50%;
		padding: 10px 20px 10px 0;
		min-height: 372px;
		justify-content: flex-end;
		align-items: center;
	}

	.dka-hero .dka-jp{
		font-size: 40px;
		line-height: 48px;
		letter-spacing: 4px;
		align-self: center;
	}

	.dka-hero .dka-jp-sm{
		font-size: 20px;
		line-height: 24px;
		letter-spacing: 2px;
		padding: 20px;
	}

	/* Welcome row: emblem hidden, text full width. */
	.dka-two-col{
		flex-direction: column;
	}

	.dka-two-col .dka-col{
		flex: 0 0 auto;
		max-width: 100%;
		width: 100%;
	}

	.dka-two-col .dka-col-center{
		display: none;
	}

	.dka-section-title{
		font-size: 20px;
		line-height: 24px;
		text-align: center;
	}

	.dka-container{
		padding: 20px;
	}

	/* Red band */
	.dka-why{
		padding: 30px 0;
	}

	.dka-band-title{
		font-size: 20px;
		line-height: 24px;
	}

	.dka-icon-grid{
		grid-template-columns: 1fr;
		padding: 10px 20px;
		row-gap: 24px;
	}

	.dka-icon-box .dka-icon{
		font-size: 40px;
		margin-bottom: 15px;
	}

	.dka-icon-box h3{
		font-size: 20px;
		line-height: 24px;
	}

	/* Black band - the two cards stay side by side, as on the original. */
	.dka-classes-grid{
		flex-direction: row;
	}

	.dka-class-card{
		flex: 0 0 50%;
		max-width: 50%;
	}

	.dka-class-card h3{
		font-size: 20px;
		line-height: 24px;
		margin: 10px 0;
	}

	.dka-class-card .dka-btn{
		margin: 5px 0 10px;
	}

	/* Footer */
	.dka-footer{
		padding: 15px 15px 30px;
	}

	.dka-footer-inner{
		flex-direction: column;
	}

	.dka-footer-info,
	.dka-footer-map{
		flex: 0 0 auto;
		max-width: 100%;
		width: 100%;
	}

	.dka-footer li{
		font-size: 14px;
		line-height: 21px;
	}

	/* Kata columns stay side by side on phones, with smaller type. */
	.dka-two-col.dka-kata-cols{
		flex-direction: row;
	}

	.dka-two-col.dka-kata-cols .dka-col{
		flex: 0 0 50%;
		max-width: 50%;
		padding: 20px 10px 10px;
	}

	.dka-kata-band .dka-band-title{
		margin-top: 10px;
	}

	.dka-kata-band .dka-band-title,
	.dka-kata-band .dka-subhead,
	.dka-kata-band .dka-subhead-jp{
		font-size: 20px;
		line-height: 24px;
	}

	.dka-kata-band p.dka-kata,
	.dka-kata-band p.dka-kata-2{
		font-size: 12px;
		line-height: 18px;
	}
}