/*
 Theme Name:   Contract Law Training
 Theme URI:    https://www.contractlawtraining.co.uk/
 Description:  A custom child theme for GeneratePress
 Author:       Paul Jones
 Author URI:   https://pauljonesdesign.com/
 Template:     generatepress
 Version:      1.2
*/

/* ___ TYPOGRAPHY ___ */

/* 
 * Minimum Viewport: 400px
 * Maximum Viewport: 1200px
 * https://chrisburnell.com/clamp-calculator/?font-size-root=16&size-min=&size-max=&viewport-min=768&viewport-max=1200&viewport-units=vw
 * These have to match what is in the Customizer > Typography. Pull in font families using font manager. Set heading-font as 'All Headings and set body-font as Body. */
 :root {
	--heading-font: "Inter", sans-serif;
	--body-font: "Inter", sans-serif;
	--button-font: "Inter", sans-serif;
	--heading--display: clamp(2.5rem, -0.167rem + 5.556vw, 4rem); /* Scales between 40px and 64px */
	--heading--xl: clamp(2rem, 0.222rem + 3.704vw, 3rem); /* Scales between 32px and 48px */
	--heading--lg: clamp(1.75rem, 0.417rem + 2.778vw, 2.5rem); /* Scales between 28px and 40px */
	--heading--md: clamp(1.5rem, 0.167rem + 2.778vw, 2.25rem); /* Scales between 24px and 36px */
	--heading--sm: clamp(1.25rem, -0.083rem + 2.778vw, 2rem); /* Scales between 20px and 32px */
	--heading--xs: clamp(1rem, 0.556rem + 0.926vw, 1.25rem); /* Scales between 16px and 20px */
	--text--xl: clamp(1.25rem, 0.806rem + 0.926vw, 1.5rem); /* Scales between 20px and 24px */
	--text--lg: clamp(1rem, 0.556rem + 0.926vw, 1.25rem); /* Scales between 16px and 20px */
	--text--md: 1rem; /* 16px */
	--text--sm: clamp(0.85rem, 0.672rem + 0.37vw, 0.95rem); /* Scales between 13.6px and 15.2px */
	--text--xs: clamp(0.75rem, 0.572rem + 0.37vw, 0.85rem); /* Scales between 12px and 13.6px */
}


/* Default Body / p font settings */
p {
	font-size: var(--text--md);
	font-weight:400;
	line-height:1.5;
	margin-bottom:1.5rem;
	font-family:var(--body-font);
}

h1, h2, h3, h4, h5, h6 {
	font-weight:600;
	margin-bottom: .5em;
	font-family: var(--heading-font);
}

h1 {
	font-size:var(--heading--xl);
	line-height:1.05;
}

h2 {
	font-size:var(--heading--lg);
	line-height:1.1;
}

h3 {
	font-size:var(--heading--md);
	line-height:1.15;
}

h4 {
	font-size:var(--heading--sm);
	line-height:1.1;
}

h5 {
	font-size:var(--heading--xs);
	line-height:1.25;
}

h6 {
	font-size:var(--heading--xs);
	line-height:1.4;
}

p, div, blockquote, li, .pretty {
	text-wrap: pretty;
}

.no-text-wrap, .text-wrap-unset {
	text-wrap: unset;
}

/* Add top margin to blog post H2-H6 */
.single-post :is(h2, h3, h4, h5, h6) {
	margin-top: 1.5em;
}

/* Button Global Line Height */
.gb-button {
    line-height: 1em;
}


/* ___ GLOBAL ___ */

@media (prefers-reduced-motion: reduce) {
	/* Disable smooth scrolling for reduced motion users */
	html {
	  scroll-behavior: auto;
	}
  
	/* Disable animations and transitions for reduced motion users */
	*, *::before, *::after {
	  animation-duration: 0ms !important;
	  transition-duration: 0ms !important;
	}
  }

.gb-button-wrapper a.gb-button, .gb-button, .main-navigation .menu-toggle {
		transition: all 0.3s ease 0s;
}

#main {
	min-height: 65vh;
}


/* ___  MISC ___ */ 

/* Visually Hidden */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* No Underline */
.no-ul, .no-ul a {
	text-decoration: none;
}

/* Line Limits */
.line-limit-3, .line-limit-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-limit-3 {
    -webkit-line-clamp: 3;
}

.line-limit-2 {
    -webkit-line-clamp: 2;
}


/* ___ THEME ___ */ 

/* Search icon - remove GeneratePress default. Keep this CSS if you're using a custom icon. */
.main-navigation .menu-bar-item>a {
	display:none;
}


/* ___ BLOCKS EDITOR ___ */ 

.post-type-post .editor-styles-wrapper {
    max-width: 656px;
    margin-inline: auto;
    width: 100%;
}

.post-type-post .editor-styles-wrapper p a {
	text-decoration:underline;
}

.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
    margin-bottom: 0px;
}

/* -- Search Tweaks -- */
/* Clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	filter: grayscale(100) opacity(.3);
	cursor: pointer;
}


/* ___ BLOCKS & PLUGINS ___ */ 

/* Search Block */ 
.wp-block-search {
	border-radius: 4px;
	overflow: hidden;
	outline: 1px solid var(--surface-30);
	box-shadow: 0px 0px 0px #00000010;
	transition: all 250ms ease-in;
}

.wp-block-search:focus-within {
	outline: 1px solid var(--surface-30);
		box-shadow: 0px 4px 10px #00000010
}

.wp-block-search input {
	border: none;
	padding: 0px 1em;
	border-radius: 4px;
	outline: none;
}

.wp-block-search button{
	background: var(--surface-20);
	color: var(--surface-70);
	padding: 10px 12px;
	border-left: 1px solid var(--surface-30)
}

.wp-block-search button:hover{
	background: var(--surface-30);
	color: var(--surface-80);
}

.ipa-highlight mark {
    margin: 0 -0.2em;
    padding: 0em 0.3em;
    border-radius: 0.4em 0.4em;
    background: transparent;
    background-image: linear-gradient(to right, var(--accent), /* 10% opacity */ var(--accent-hover) /* 70% opacity */);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

ol, ul {
    margin: 0;
}

.ipa-course__text ol {
  list-style: none;
  counter-reset: item;
  padding-left: 0;
}

.ipa-course__text ol li {
  counter-increment: item;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.ipa-course__text ol li::before {
  content: counter(item);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8em;
  margin-right: 0.5rem;
  background: var(--accent);
  color: var(--base-3);
  padding: 0.2em 0.4em;
  border-radius: 9999px;
  font-size: .7em;
}