/*
Theme Name: BCRS Custom Theme
Description: Custom Theme
Author: Josh Evans | Volta Design
Author URI: https://voltawebdesign.com
Template: kadence
Version: 1.0.0
*/


/* ==============================================
   @font-face — Europa
   ============================================== */

@font-face {
	font-family: 'Europa';
	src: url('fonts/europa-light-webfont.woff') format('woff'),
	     url('fonts/europa-light-webfont.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Europa';
	src: url('fonts/europa-regular-webfont.woff') format('woff'),
	     url('fonts/europa-regular-webfont.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Europa';
	src: url('fonts/europa-regularitalic-webfont.woff') format('woff'),
	     url('fonts/europa-regularitalic-webfont.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Europa';
	src: url('fonts/europa-bold-webfont.woff') format('woff'),
	     url('fonts/europa-bold-webfont.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Europa';
	src: url('fonts/europa-bolditalic-webfont.woff') format('woff'),
	     url('fonts/europa-bolditalic-webfont.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}


/* ==============================================
   CSS Custom Properties — Design Tokens
   ============================================== */

:root {
/* Override wp-block-library-inline-css  */
	--wp--preset--font-size--normal: 18px !important;


	/* Brand Colors */
	--color-blue:       #21aafc;
	--color-blue2:     #0274BE;
	--color-navy:       #002a4e;
	--color-white:      #ffffff;
	--color-body-text:  #656565;
	--color-heading-text:  #434343;
	--color-light-bg:   #f5f5f5;
	--color-border:     #dddddd;

	/* Semantic Color Aliases */
	--color-primary:    var(--color-blue);
	--color-secondary:  var(--color-navy);
	--color-alt:        var(--color-blue2);
	--color-text:       var(--color-body-text);
	--color-heading:    var(--color-heading-text);
	--color-link:       var(--color-blue);
	--color-link-hover: var(--color-navy);
	--color-bg:         var(--color-white);

	/* Fonts */
	--font-body:    'Europa', 'Helvetica Neue', Arial, sans-serif;
	--font-heading: 'Europa', 'Helvetica Neue', Arial, sans-serif;
	--font-mono:    'Courier New', Courier, monospace;

	/* Type Scale — base is 18px (html set to 112.5% below) */
	--text-xs:   0.667rem;   /* ~12px */
	--text-sm:   0.778rem;   /* ~14px */
	--text-base: 18px;       /*  18px — absolute so it's never rem-dependent */
	--text-md:   1.111rem;   /*  20px */
	--text-lg:   1.333rem;   /*  24px */
	--text-xl:   1.5rem;     /*  27px */
	--text-2xl:  1.78rem;   /*  32px */
	--text-3xl:  2.5rem;     /*  45px */
	--text-4xl:  3.333rem;   /*  60px */

	/* Font Weights */
	--weight-light:   300;
	--weight-regular: 400;
	--weight-bold:    700;

	/* Line Heights */
	--leading-tight:  1.2;
	--leading-snug:   1.3;
	--leading-normal: 1.6;
	--leading-loose:  1.8;

	/* Letter Spacing */
	--tracking-tight:  -0.02em;
	--tracking-normal:  0;
	--tracking-wide:    0.05em;

	/* Spacing Scale */
	--space-1:  0.25rem;   /*  ~4px  */
	--space-2:  0.5rem;    /*  ~9px  */
	--space-3:  0.75rem;   /* ~14px  */
	--space-4:  1rem;      /*  18px  */
	--space-5:  1.25rem;   /* ~22px  */
	--space-6:  1.5rem;    /*  27px  */
	--space-8:  2rem;      /*  36px  */
	--space-10: 2.5rem;    /*  45px  */
	--space-12: 3rem;      /*  54px  */
	--space-16: 4rem;      /*  72px  */
	--space-20: 5rem;      /*  90px  */
	--space-24: 6rem;      /* 108px  */

	/* Container */
	--container-width: 1200px;

	/* Border Radius */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   16px;
	--radius-pill: 50px;
	--radius-full: 9999px;

	/* Buttons */
	--btn-bg:          var(--color-blue);
	--btn-bg-hover:    var(--color-navy);
	--btn-text:        var(--color-white);
	--btn-radius:      0;
	--btn-padding:     20px 40px;
	--btn-font-size:   1rem;  /* 18px */

	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-base: 0.2s ease;

}


/* ==============================================
   Base Typography
   ============================================== */

/* Set root so 1rem = 18px — matches the live site.
   Loaded at priority 9999 so it overrides Kadence's default 100%. */
html {
	font-size: 112.5%;
}

html body {
	font-family: var(--font-body);
	font-size:   var(--text-base);
	font-weight: var(--weight-light);
	line-height: var(--leading-normal);
	color:       var(--color-text);
}

h1, h2, h4, h6 {
	font-family:   var(--font-heading);
	font-weight:   var(--weight-bold);
	line-height:   var(--leading-snug);
	color:         var(--color-heading);
	margin-bottom: var(--space-6);
}
h3, h5 {
	font-weight:   var(--weight-regular);
}
h4, h5, h6 {
	text-transform: uppercase;
}
h3 {
	color:         var(--color-alt);
}
h4 {
	color:         var(--color-navy);
}

h1 { font-size: var(--text-3xl); line-height: 1.4; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg);  }
h4 { font-size: var(--text-base);  line-height: 1.2; }
h5 { font-size: var(--text-sm);  line-height: 1.2; }
h6 { font-size: 0.778rem;        line-height: 1.25; }

p {
	margin-bottom: 1.5em;
	line-height:   var(--leading-normal);
}

a {
	color:           var(--color-link);
	text-decoration: none;
	transition:      color var(--transition-base);
}

a:hover,
a:focus {
	color: var(--color-link-hover);
}

ul, ol {
	padding-left:  var(--space-6);
	margin-bottom: var(--space-4);
}

li {
	line-height:   var(--leading-snug);
	margin-bottom: var(--space-2);
}

strong, b { font-weight: var(--weight-bold); }
em, i     { font-style: italic; }
small     { font-size: var(--text-sm); }

::selection {
	background-color: var(--color-navy);
	color:            var(--color-white);
}

/* Custom Styles */
h2.big-blue-heading {
	font-size: 2.8rem;
	color: var(--color-navy);
}


/* ==============================================
   Buttons
   ============================================== */

.wp-block-button .wp-block-button__link,
.kb-button,
button,
input[type="submit"],
input[type="button"],
.btn {
	background-color:    var(--btn-bg);
	color:               var(--btn-text);
	border-radius:       var(--btn-radius);
	padding:             var(--btn-padding);
	font-size:           var(--btn-font-size);
	font-family:         var(--font-body);
	font-weight:         var(--weight-light);
	line-height:         1em;
	border:              none;
	cursor:              pointer;
	text-decoration:     none;
	display:             inline-block;
	transition:          background-color var(--transition-base),
	                     color var(--transition-base),
	                     border-color var(--transition-base);
}
.kb-buttons-wrap .kb-button:nth-child(2) {
	background-color: var(--color-alt);
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.kb-button.kb-btn-global-fill:hover, 
.kb-button:hover,
.kb-button:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.btn:hover,
.btn:focus {
	background-color: var(--btn-bg-hover);
	color:            var(--color-white);
}

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link,
.btn-outline {
	background-color: transparent;
	color:            var(--color-primary);
	border:           2px solid var(--color-primary);
	border-radius:    var(--btn-radius);
	padding:          var(--btn-padding);
	font-size:        var(--btn-font-size);
	transition:       background-color var(--transition-base),
	                  color var(--transition-base),
	                  border-color var(--transition-base);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.btn-outline:hover,
.btn-outline:focus {
	background-color: var(--color-navy);
	border-color:     var(--color-navy);
	color:            var(--color-white);
}


/* ==============================================
   Layout — Row / Section
   ============================================== */

/* Full-width sections: constrain inner content to container width */
.kb-theme-content-width {
	max-width: var(--container-width);
	margin-left:  auto;
	margin-right: auto;
}

/* Default vertical padding on row layouts */
.kb-row-layout-wrap .kt-row-column-wrap {
	width: 100%;
}


/* ==============================================
   Components — Section Label
   Patterns: small label text above an H2/H3
   Usage: plain div or span with class .section-label
   ============================================== */

.section-label,
.kb-row-layout-wrap > .kt-row-column-wrap .kt-adv-heading-tag-div {
	display:         block;
	font-size:       var(--text-sm);
	font-weight:     var(--weight-bold);
	letter-spacing:  var(--tracking-wider);
	text-transform:  uppercase;
	color:           var(--color-primary);
	margin-bottom:   var(--space-2);
}


/* ==============================================
   Components — Icon List (Kadence)
   ============================================== */

.kt-svg-icon-list {
	list-style: none;
	padding:    0;
	margin:     0;
}

.kt-svg-icon-list-item-wrap {
	display:       flex;
	align-items:   flex-start;
	gap:           var(--space-3);
	margin-bottom: var(--space-3);
	line-height:   var(--leading-snug);
}

.kb-svg-icon-wrap svg {
	flex-shrink: 0;
	margin-top:  2px;
}

.kt-svg-icon-list-text {
	flex: 1;
}


/* ==============================================
   Components — Kadence Image Ratio
   ============================================== */

.kb-image-is-ratio-size {
	width: 100%;
}

.kb-is-ratio-image {
	position:       relative;
	width:          100%;
	overflow:       hidden;
	border-radius:  0;
}

.kb-image-ratio-land169 {
	aspect-ratio: 16 / 9;
}

.kb-image-ratio-square {
	aspect-ratio: 1 / 1;
}

.kb-image-ratio-port34 {
	aspect-ratio: 3 / 4;
}

.kb-is-ratio-image img {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
}


/* ==============================================
   Components — Cards
   Generic card pattern: image + heading + text
   ============================================== */

.bcrs-card {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-4);
}

.bcrs-card h3 {
	margin-bottom: var(--space-2);
}

.bcrs-card p {
	margin-bottom: 0;
}


/* ==============================================
   Utilities
   ============================================== */

/* Color utilities matching brand */
.text-blue  { color: var(--color-blue); }
.text-navy  { color: var(--color-navy); }
.text-white { color: var(--color-white); }
.text-body  { color: var(--color-body-text); }

.bg-navy   { background-color: var(--color-navy); }
.bg-blue   { background-color: var(--color-blue); }
.bg-light  { background-color: var(--color-light-bg); }
.bg-white  { background-color: var(--color-white); }

/* White text on dark backgrounds */
.bg-navy h1, .bg-navy h2, .bg-navy h3,
.bg-navy h4, .bg-navy h5, .bg-navy h6,
.bg-navy p, .bg-navy li,
.bg-blue  h1, .bg-blue  h2, .bg-blue  h3,
.bg-blue  h4, .bg-blue  h5, .bg-blue  h6,
.bg-blue  p,  .bg-blue  li {
	color: var(--color-white);
}

/* The .white-text span pattern used in the hero heading */
.white-text {
	color: var(--color-white);
}



/* ==============================================
   Responsive
   ============================================== */

/* Tablet — matches Kadence/Astra breakpoint */
@media ( max-width: 921px ) {

	h1 { font-size: 1.667rem; } /* 30px */
	h2 { font-size: 1.389rem; } /* 25px */
	h3 { font-size: 1.111rem; } /* 20px */

}

/* Mobile */
@media ( max-width: 544px ) {

	h1 { font-size: 1.778rem; } /* 32px */
	h2 { font-size: 1.333rem; } /* 24px */
	h3 { font-size: 1.111rem; } /* 20px */
	
	#main .entry-content h1 {
		font-size: 1.778rem !important; /* 32px */
	}
	.home #primary #main .entry-content h1 {
		font-size: 2.4rem !important; 
	}
	

}

/* Other Fixes */

#primary .entry-content-wrap, #primary .site-container {
	padding:0;
}
#primary-menu li {
	margin-bottom: 0;
}
html body {
	background-color: white;
}
#colophon li {
	margin:0;
}
.single-content ul.list-design-1 {
	margin:0;
	padding-left: 0;
}
.list-design-1 li {
	list-style-type: none;
	line-height: 1.3;
	padding:15px;
	border-bottom: 1px solid #eeeeee;
	margin:0;
}

/* Course Grid */
.ld-course-list-items .ld_course_grid .sfwd-courses p {
	margin-bottom: 0;
}

/* Custom buttons in header */
#menu-item-36591, #menu-item-36588 {
	margin-right: 10px;
	margin-left: 10px;
}
#menu-item-36591 a {
	background-color: var(--color-blue);
	color: var(--color-white);
	padding-left: 1rem;
	padding-right: 1rem;
}
#menu-item-36591 a:hover {
	background-color: var(--color-white);
	color: var(--color-blue);	
}
#menu-item-36588 a {
	border: 1px solid var(--color-white);
	padding-left: 1rem;
	padding-right: 1rem;
}
#menu-item-36588 a:hover {
	border: 1px solid var(--color-blue);
}