/*
Theme Name:   GeneratePress Child
Theme URI:    https://generatepress.com
Description:  Default GeneratePress child theme
Author:       Tom Usborne
Author URI:   https://tomusborne.com
Template:     generatepress
Version:      1.0

/* --------TABLE OF CONTENTS--------
1. Root Variables
2. Typography
3. Theme Structure
4. Theme Components
5. Utility Classes
------------------------------------*/


/*** 1. ROOT VARIABLES ***/

:root {
    /* Typography */
    --headline-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --fs-body: 1.25rem;
    --fs-xl: clamp(3.05rem, calc(2.24rem + 4.08vw), 5.5rem);
    --fs-h1: clamp(2.44rem, calc(1.96rem + 2.41vw), 3.89rem);
    --fs-h2: clamp(1.95rem, calc(1.69rem + 1.33vw), 2.75rem);
    --fs-h3: clamp(1.56rem, calc(1.44rem + 0.64vw), 1.94rem);
    --fs-h4: clamp(1.25rem, calc(1.21rem + 0.21vw), 1.38rem);
    --fs-h5: clamp(1.25rem, calc(1.21rem + 0.21vw), 1.38rem);
    --fs-h6: clamp(1.25rem, calc(1.21rem + 0.21vw), 1.38rem);
    --fs-pre: clamp(0.97rem, calc(1.01rem + -0.05vw), 1rem);
    --fs-body-xl: clamp(1.27rem, calc(1.15rem + 0.59vw), 1.62rem);
    --fs-body-l: clamp(1.13rem, calc(1.05rem + 0.38vw), 1.35rem);
    --fs-body-s: clamp(0.89rem, calc(0.87rem + 0.08vw), 0.94rem);
    --fs-body-xs: clamp(0.78rem, calc(0.79rem + -0.01vw), 0.79rem);
	
    /* Section Spacing*/
    --section-xs-padding: 1rem clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
    --section-s-padding: clamp(1.5rem, 1.5rem + 0vw, 1.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
    --section-m-padding: clamp(1.5rem, 1.197rem + 1.515vw, 2.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
    --section-d-padding: clamp(3rem, 2.394rem + 3.03vw, 5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
    --section-l-padding: clamp(4.5rem, 3.591rem + 4.545vw, 7.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
    --section-xl-padding: clamp(6rem, 4.788rem + 6.061vw, 10rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
	--padding-sp-horizontal: clamp(0.938rem, 0.283vw + 0.872rem, 1.25rem);
}

/*** 2. TYPOGRAPHY ***/


/* Target the breadcrumb more precisely */
.rank-math-breadcrumb p {
    font-size: var(--fs-body-s);
    font-weight: 400;             
    line-height: 1.8;
}

.rank-math-breadcrumb a {
	border-bottom: 2px solid var(--surface-50);
}

.rank-math-breadcrumb a:hover {
	border-bottom: 2px solid var(--surface-30);
}

/* Base Text Styles */
p {
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    font-family: var(--body-font);
}

/* Headings */
h1, h2, h3, h4, h5, h6, 
.fs-xl, .fs-h1, .fs-h2, .fs-h3, .fs-h4, .fs-h5, .fs-h6 {
    font-weight: 700;
    margin-bottom: .5em;
    font-family: var(--headline-font);
}

/* Heading Sizes */
.fs-xl {
    font-size: var(--fs-xl);
    line-height: 1.05;
}

h1, .fs-h1 {
    font-size: var(--fs-h1);
    line-height: 1.05;
}

h2, .fs-h2 {
    font-size: var(--fs-h2);
    line-height: 1.1;
}

h3, .fs-h3 {
    font-size: var(--fs-h3);
    line-height: 1.15;
}

h4, .fs-h4 {
    font-size: var(--fs-h4);
    line-height: 1.1;
}

h5, .fs-h5 {
    font-size: 1.375rem;
    font-size: var(--fs-h5);
    line-height: 1.25;
}

h6, .fs-h6 {
    font-size: 1.25rem;
    font-size: var(--fs-h6);
    line-height: 1.4;
}

/* Additional Text Styles */
.fs-pre {
    font-size: var(--fs-pre);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.fs-body-xl {
    font-family: var(--body-font);
    font-size: var(--fs-body-xl);
}

.fs-body-l {
    font-family: var(--body-font);
    font-size: var(--fs--body-l);
}

.fs-body-s {
    font-family: var(--body-font);
    font-size: var(--fs-body-s);
}

.fs-body-xs {
    font-family: var(--body-font);
    font-size: var(--fs-body-xs);
}

/* Post Content Typography */
.single-post :where(h2, h3, h4, h5, h6) {
    margin-top: 1.5em;
}

/* Text Balance */
.balance {
    text-wrap: balance;
}

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


/*** 3. THEME STRUCTURE ***/

/* Main Content Area Height*/
/* Ensures the main content area always takes at least 65% of viewport height */
#main {
    min-height: 65vh;
}

/* Removes horizontal padding from header's inner container */
.inside-header {
    padding-inline: 0px !important;
}

.inside-header.grid-container .site-logo {
	padding-inline-start: clamp(0.938rem, 0.283vw + 0.872rem, 1.25rem) !important;
}

/* Responsive horizontal padding for header */
.site-header {
    padding-inline: clamp(1rem, 0.848rem + 0.758vw, 1.5rem) !important;
}

/* =============================================
   Single Post Layout Styles
   ============================================= */

/**
 * Base Grid Container Styles
 * Applies to all screen sizes
 */

.grid-container {
  padding-left: var(--padding-sp-horizontal);
  padding-right: var(--padding-sp-horizontal);
  transition: all 0.3s ease;
}

@media (max-width: 1250px) {
    #site-navigation .navigation-branding, #sticky-navigation .navigation-branding {
      margin-left: 0px !important;
    }
}
/**
 * Main Content Area Layout
 */
body.single-post .site-content {
  display: flex;
  flex-direction: column; /* Mobile-first approach */
  column-gap: clamp(1rem, 34.82vw + -15.735rem, 11.25rem);
  transition: all 0.3s ease;
}

body.single-post .content-area {
  width: 100%;
  min-width: 0; /* Prevent flex overflow */
}

/**
 * Sidebar Styles - Initially hidden on mobile
 */
body.single-post #right-sidebar {
  flex: 0 0 337px;
  transition: all 0.3s ease;
}

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

/**
 * Mobile Layout (0-949px)
 * - Single column layout
 * - Hidden sidebar
 */
@media (max-width: 949px) {
  body.single-post #right-sidebar {
    display: none;
  }
  
  /* Ensures content takes full width */
  body.single-post .content-area {
    flex: 1 0 100%;
    padding-right: 0;
  }
}

/**
 * Desktop Layout (950px+)
 * - Sidebar/content side-by-side
 * - Responsive column gap
 */
@media (min-width: 950px) {
  body.single-post .site-content {
    flex-direction: row;
  }
  
  body.single-post #right-sidebar {
    display: block;
  }
  
  body.single-post .content-area {
    flex: 1;
  }
}


/* Section Spacing */
.section-xs {
    padding: var(--section-xs-padding);
}

.section-s {
    padding: var(--section-s-padding);
}

.section-m {
    padding: var(--section-m-padding);
}

.section-d {
    padding: var(--section-d-padding);
}

.section-l {
    padding: var(--section-l-padding);
}

.section-xl {
    padding: var(--section-xl-padding);
}

.padding-sp-horizontal {
  padding-left: var(--padding-sp-horizontal);
  padding-right: var(--padding-sp-horizontal);
}

/*** 4. THEME COMPONENTS ***/

/* Button Styles */
.gb-button {
    line-height: 1em;
	transition: all 0.3s ease;
}

/* Container Styles */ 
/*Remove bottom margin on last paragraph*/
.gb-container p:last-child:last-of-type {
    margin-bottom: 0;
}

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

/*text selection highlight color*/
::selection {
  background: var(--contrast); /* background */
  color: var(--surface-0);       /* text */
}

::-moz-selection {
  background: var(--contrast);
  color: var(--surface-0);
}
/*end text selection highlight color*/


/*** 5. UTILITY CLASSES ***/

/* 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;
}

/* Stretch link on Card  */ 

.stretch-link{
	position: relative;
}

.stretch-link a::after{
	content: '';
	position: absolute;
	inset: 0;
}

.stretch-link a:is(:focus-visible)::after{
	outline: 2px solid;
}

.stretch-link a:is(:hover, :focus){
	outline: none;
}

/* END Stretch link on Card  */ 



/* CF7 Contact form */

.wpcf7-form-control-wrap input[type="text"],
.wpcf7-form-control-wrap input[type="email"] {
    width: 70%;
    padding: 10px;
	margin-top: 0.5em;
    box-sizing: border-box; /* includes padding in width calculation */
}

.wpcf7 form .wpcf7-response-output {
	margin-left: 0em;
	width: 70%;
}

.wpcf7-form-control.wpcf7-submit.has-spinner {
    padding: 10px 15px !important;
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1) !important;
}

.wpcf7-form-control.wpcf7-submit.has-spinner:hover {
    background-color: var(--surface-0) !important;
    color: var(--surface-50) !important;
}

.wpcf7-list-item {
    margin: 0 !important;
}

/* Mobile Layout */
@media (max-width: 600px) {
    .wpcf7-form-control-wrap input[type="text"],
    .wpcf7-form-control-wrap input[type="email"] {
        width: 100%;
        padding: 10px;
        margin-top: 0.5em;
        box-sizing: border-box;
    }
    
    .wpcf7 form .wpcf7-response-output {
        width: 100%;
    }
}

/*button styling*/
.wpcf7-form-control.wpcf7-submit.has-spinner {
    padding: 10px 15px !important;
	font-weight: bold;
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1) !important;
}

/*ENDS button styling*/

/* End CF7 Contact form */


/* ==============================================
   COMMENTS SECTION STYLING
   ============================================== */

/* Comment Section Titles */
.comment-reply-title,
.comments-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--surface-50);
    margin-top: 1em;
}

/* Comment Form Container */
.comment-respond {
    background-color: var(--surface-10);
    padding: 35px;
    margin: 0;
	margin-bottom: 40px;
}


/* ==============================================
   BUTTON STYLING
   ============================================== */

/* Base Button Styles */
.comment-form .submit,
.comment-reply-link {
    display: inline-block;
    padding: 10px 20px;
    font-weight: bold;
    line-height: 1;
    color: var(--surface-0) !important;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    position: relative;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Submit Button */
.comment-form .submit {
    /* Add specific styles if needed */
}

/* Reply Link */
.comment-reply-link {
    background-color: var(--surface-50);
    width: fit-content;
}

.comment-reply-link:hover {
    background-color: var(--contrast);
    text-decoration: none;
}

/* Cancel Reply Link */
#cancel-comment-reply-link {
    padding-left: 30px;
    font-size: var(--fs-body-s);
    text-decoration: underline;
}

/* Comment Navigation */
.comment-navigation {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin: 40px 0;
    text-align: center;
}

.comment-navigation .nav-previous,
.comment-navigation .nav-next {
    display: inline-block;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

.comment-navigation a {
    display: inline-block;
    padding: 12px 30px;
    min-width: 160px;
    margin-bottom: 1em;
    background-color: var(--surface-50);
    color: var(--surface-0);
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95em;
    line-height: 1.5;
    border: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: color 0.3s ease, background-color 0.3s ease;
}

.comment-navigation a:hover {
    background-color: var(--contrast);
    color: var(--surface-0);
    transform: none;
}

/* Responsive */
@media (max-width: 600px) {
    .comment-navigation {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .comment-navigation a {
        width: 100%;
        max-width: 220px;
        padding: 10px 20px;
    }
}


/* ==============================================
   RESPONSIVE ADJUSTMENTS
   ============================================== */

@media (max-width: 768px) {
    .comment .children {
        padding-left: 15px;
        margin-left: 10px;
    }
    
    .comment-content {
        padding: 20px;
    }
    
    .comment-respond {
        padding: 25px;
    }
}


/* Query Pagination Buttons Styling */

.page-numbers.current {
  background-color: var(--surface-10) !important;
	
	border: 5px solid var(--surface-10) !important;
}


.page-numbers:not(.current):hover {
    background-color: var(--surface-10);
}
/* END Query Pagination Buttons Styling */



/* Weekly Newsletter */
.form-inline-complex-layout {
    display: flex;   
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}


.form-column-item {
    display: flex;  
    flex-direction: column; 
    flex: 1;  
}


.form-column-item.submit-column {
    flex: 0 0 auto;
}



.form-column-item label {
    display: block;   
    font-weight: bold;
    width: 100%;
}


.form-column-item .column-field-input,
.form-column-item input[type="text"],
.form-column-item input[type="email"] {
    width: 100%;  
    box-sizing: border-box;
}


.form-column-item .inline-button.wpcf7-submit {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}



@media (max-width: 650px) {
    .form-inline-complex-layout {
        flex-direction: column;
        align-items: stretch;
    }

    .form-column-item,
    .form-column-item.submit-column {
         width: auto;
         min-width: auto;
         flex: 0 0 auto;
    }


    .form-column-item label,
    .form-column-item .column-field-input {
         width: 100%; 
    }



     .form-column-item .inline-button.wpcf7-submit {
         width: 100%;
     }
}

/* End Weekly Newsletter */