/*
Theme Name: Booknet Theme
Author: Ajan Inc
Description: A custom WordPress block theme with customizable patterns.
Version: 1.1
Text Domain: booknet
Tags: block-patterns, full-site-editing, customizable, responsive, theme-json, custom-blocks
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
/* Target links within navigation items that open in a new tab */
.wp-block-navigation-item a[target="_blank"] .wp-block-navigation-item__label::after {
content: '\2191';
display: inline-block;
margin-left: 0.5rem;
width: 0.5em;
height: 0;
line-height: 1;
vertical-align: top;
transform: rotate(45deg);
position: absolute;
}
.wp-block-navigation-item a[target="_blank"] .wp-block-navigation-item__label::after {
text-decoration: none;
}
.is-style-small-text {
font-size: var(--wp--preset--font-size--small);
line-height: 1.6;
}
.is-style-caption-text{
font-size: 0.75rem !important;
line-height: 1rem !important;
color: #494949;
}
.test{
height: 100%;
}
/* ====================
* Global tables styles
* ==================== */
table {
width: 100%;
border: 1px solid #e1e1e1;
margin: 0.5em 0 1em;
border-collapse: collapse;
}
caption {
text-align: left;
padding: 1em 0 0.5em;
}
table tr th, table tr td {
border: 1px solid #e1e1e1;
}
table thead th{
padding: 0.5em 1em 0.25em 1em;
text-align: center;
background-color: #e1e1e1;
}
table tbody th {
text-align: left;
}
table tr th {
font-weight: normal;
padding: 0.5em;
}
table tr:first-child td {
padding: 0.5em;
}
table tr:nth-child(even) {
background: #fdf9ff;
}
table td {
padding: 0.5em;
}
/* === end */
/* ===== Customizing elements of GravityForms */
.gsection_description {
font-size: 13px;
line-height: 1.5em;
color: #585E6A;
padding: 0 0 1em;
}
/* ===== Password Protected markup style CSS */
.entry-content.wp-block-post-content.is-layout-constrained.wp-block-post-content-is-layout-constrained .passster-form {
/*display: flex;
align-items: flex-start;*/
max-width: 93.5vw!important;
min-width: 940px;
min-height: 520px;
background: url(https://welcoming-platinum-peacock.162-223-226-60.wpsquared.site/wp-content/uploads/2026/04/Portal-pass-bg.png) no-repeat;
background-position: 90% 5%;
background-size: 65%;
display: flex;
align-items: center;
}
.passster-form:before {
content: '';
display: block;
width: 100%;
height: fit-content;
background: #ffffff78;
position: absolute;
z-index: 110;
min-width: 940px;
min-height: 520px;
right: 0;
}
.passster-form > form {
position: relative;
z-index: 125;
}
.passster-form > form.password-form {
padding: 2.5em;
width: 530px!important;
background: #fdfdfdf5;
margin-left: 2em;
border-radius: 4px;
outline: 1px solid #e5e5e5;
}
.passster-form fieldset {
margin: 1.5em 0;
display: flex;
border: none;
padding: 0;
}
.passster-form fieldset span.ps-loader {
position: absolute;
height: 36px;
}
.passster-form fieldset span.ps-loader img {
margin: 0.5em 1em;
}
.passster-form .ps-form-headline {
font-size: 24px;
font-weight: 500;
color: #094150;
}
.passster-form p {
color: #000;
line-height: 1em;
}
.passster-form > form.password-form input::placeholder {
font-size: 0.9em;
color: #777;
}
.passster-form > form.password-form input[type=password] {
width: 280px;
height: 36px;
margin: 2px 10px 0 0;
font-size: 1em;
padding-left: 0.5em;
}
.passster-form > form.password-form input[type=text] {
width: 280px;
height: 36px;
margin: 2px 10px 0 0;
font-size: 1em;
padding-left: 0.5em;
}
.passster-form > form.password-form input[type=email] {
width: 280px;
height: 36px;
margin: 2px 10px 0 0;
font-size: 1em;
padding-left: 0.5em;
}
.passster-form > form.password-form button[type=submit] {
width: 100px;
background: #094150;
padding: 8px 10px 8px 10px;
margin: 0px 0px 0px 0px;
border-radius: 6px;
font-size: 16px;
font-weight: 700;
color: #fff;
}
@media only screen and (max-width: 1024px) {
.entry-content.wp-block-post-content.is-layout-constrained.wp-block-post-content-is-layout-constrained .passster-form {
background-position: bottom;
background-size: 100%;
align-items: flex-start;
justify-content: center;
min-width: auto;
}
.passster-form > form.password-form {
width: 60% !important;
margin-left: 0;
}
}
@media only screen and (max-width: 768px) {
.passster-form > form.password-form {
width: 80% !important;
padding: 3.5em;
}
}
@media only screen and (max-width: 600px) {
.passster-form > form.password-form {
width: 90% !important;
padding: 2.5em 1.5em;
}
.passster-form .ps-form-headline {
font-size: 28px;
}
.passster-form .ps-form-instructions-wrap p {
font-size: 18px;
line-height: 1.2em;
margin: 1em 0 1.5em;
}
.passster-form > form.password-form input[type=password] {
width: 100%;
}
}
/* ===== HTML Report Styles */
.report-container {
max-width: 1050px;
}
/* ===== typography */
.report-container p.top {
text-align: right;
margin-top: 2em;
margin-bottom: 2em;
}
.report-container p.source-data-block {
padding: 1.15em 1.5em;
margin: 1em 0 3em;
background: #EBEBEB;
border-radius: 9px;
}
/* ===== images */
.report-container figure {
text-align: center;
}
.report-container figure img {
width: 100%!important;
max-width: 1050px;
}
/* ===== boxes.and.lists */
.report-container aside {
background-color: #F4EBF4;
padding: 4em 8em 8em 5em;
margin: 1em 2em;
border-radius: 3px;
}
.report-container aside ul li {
margin-bottom: 0.75em;
}
.report-container blockquote {
background-color: #ECEAFF;
padding: 4em 6em 5em;
margin: 2em 2em 2.5em;
border-radius: 3px;
}
.report-container blockquote p {
font-style: italic;
font-weight: 300;
}
.report-container ol.toc-list {
list-style-type: none;
padding: 1em 0 2em 1em;
}
.report-container ol.toc-list ol {
list-style-type: none;
padding: 0.25em 0 0.25em 1.5em;
}
.report-container ol.toc-list li a {
padding-left: 5px;
padding-right: 5px;
}
/* ===== table.styles */
.report-container table {
width: 100%;
border: 1px solid #e1e1e1;
margin: 0.5em 0 1em;
border-collapse: collapse;
}
.report-container caption {
text-align: left;
padding: 1em 0 0.5em;
}
.report-container table tr th, table tr td {
border: 1px solid #e1e1e1;
}
.report-container table thead th{
padding: 0.5em 1em 0.25em 1em;
text-align: center;
background-color: #e1e1e1;
}
.report-container table tbody th {
text-align: left;
}
.report-container table tr th {
font-weight: normal;
padding: 0.5em;
}
.report-container table tr:first-child td {
padding: 0.5em;
}
.report-container table tr:nth-child(even) {
background: #fdf9ff;
}
.report-container table td {
padding: 0.5em;
}
/*
* Custom List Style with SVG Icon
* Applies when the 'Custom SVG Icon List' style is selected for a List block.
*/
/* The class WordPress generates is 'is-style-' + your style name */
.wp-block-list.is-style-custom-svg-icon {
list-style-type: none !important; /* Remove default bullets/numbers */
padding-left: 0; /* Reset default padding often used for bullets */
}
.wp-block-list.is-style-custom-svg-icon li {
padding-left: 2em; /* Create space for the SVG icon. Adjust as needed. */
position: relative; /* Allows absolute positioning of the ::before pseudo-element */
margin-bottom: 1rem; /* Optional: space between list items */
}
.wp-block-list.is-style-custom-svg-icon li::before {
content: ''; /* Necessary for background-image to show */
display: inline-block; /* Or 'block' if you prefer */
/* Size of your icon */
width: 1.2em; /* Adjust based on your SVG and desired size */
height: 1.2em; /* Adjust based on your SVG and desired size */
/* Positioning the icon */
position: absolute;
left: 0;
/* top:7px; */
/* YOUR SVG ICON GOES HERE as a background-image */
/* You need to URL-encode your SVG code. */
/* Example with a simple checkmark SVG (replace with your own): */
background-image: url("./assets/img/checkbox.svg");
/* Example with a right arrow SVG: */
/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2350575e'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E"); */
background-repeat: no-repeat;
background-size: contain; /* Ensures the SVG scales within the bounds */
background-position: center; /* Centers the SVG in the allocated space */
}
/* --- Common styles for custom arrow Details blocks --- */
/* Remove default marker for both custom styles */
.wp-block-details.is-style-arrow-left > summary,
.wp-block-details.is-style-arrow-right > summary {
list-style: none; /* Try to hide default marker */
position: relative;
display: flex;
align-items: center;
cursor: pointer;
/* padding-left: 0; Reset padding for custom marker placement */
}
/* More robust way to hide default marker across browsers */
.wp-block-details.is-style-arrow-left > summary::-webkit-details-marker,
.wp-block-details.is-style-arrow-left > summary::marker,
.wp-block-details.is-style-arrow-right > summary::-webkit-details-marker,
.wp-block-details.is-style-arrow-right > summary::marker {
display: none !important; /* Important to override user agent styles */
content: "" !important; /* For Firefox */
}
/* Define the custom arrow pseudo-element (common properties) */
.wp-block-details.is-style-arrow-left > summary::before,
.wp-block-details.is-style-arrow-right > summary::before { /* Using ::before for left, ::after for right might be cleaner */
content: '';
width: 1rem; /* Adjust size as needed */
height: 1rem; /* Adjust size as needed */
display: inline-block;
background-image: url('assets/img/close.svg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
color: inherit; /* SVG 'currentColor' will use the text color */
transition: transform 0.2s ease-in-out;
}
/* --- Style for "Arrow Left" (is-style-arrow-left) --- */
.wp-block-details.is-style-arrow-left > summary {
/* Default flex order (pseudo-element first, then text content) */
}
.wp-block-details.is-style-arrow-left > summary::before {
margin-right: 0.5em; /* Space between arrow and text */
}
.wp-block-details.is-style-arrow-left[open] > summary::before {
transform: rotate(90deg); /* Arrow points down when open */
}
/* --- Style for "Arrow Right" (is-style-arrow-right) --- */
.wp-block-details.is-style-arrow-right > summary {
justify-content: space-between; /* Pushes text to left, pseudo-element to right */
/* To use ::before on the right, we need to change its order or use ::after */
}
/* Let's use ::after for the right arrow to make flex ordering simpler */
.wp-block-details.is-style-arrow-right > summary::before {
content: none; /* Hide ::before if it was defined commonly */
}
.wp-block-details.is-style-arrow-right > summary::after { /* Using ::after */
content: '';
width: 1em;
height: 1em;
display: inline-block;
background-image: url('assets/img/close.svg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
color: inherit;
transition: transform 0.2s ease-in-out;
margin-left: 0.5em; /* Space between text and arrow */
order: 1; /* Ensure it's visually last with justify-content:space-between */
}
.wp-block-details.is-style-arrow-right[open] > summary::after { /* Using ::after */
/* transform: rotate(-90deg); */
background-image: url('assets/img/open.png');
}
/* Apply a different background color to posts tagged 'docs' */
.is-doc-post {
/* background-color: #e6f7ff;
/* You can add other styles here too, like padding or a border */
/* padding: 15px; */
/* border: 1px solid #b3d7ff; */
}
.is-doc-post .wp-block-post-featured-image {
aspect-ratio: 3 / 4 !important; /* Sets a 3:4 portrait aspect ratio */
width: 100%; /* Or a specific max-width if you prefer */
height: auto; /* Height will be determined by width and aspect-ratio */
overflow: hidden; /* Ensures image parts outside the new ratio are clipped */
}
/* plugin css for custom post type */
/* Default button style (if not already covered by .wp-block-button__link) */
.wp-block-my-custom-fields-plugin-document-meta-display .document-download-button {
/* Your existing styles for the button version */
display: inline-block;
padding: 8px 15px;
background-color: #0073aa;
color: white !important;
text-decoration: none;
border-radius: 4px;
font-weight: bold;
}
.wp-block-my-custom-fields-plugin-document-meta-display .document-download-button:hover {
background-color: #005a87;
}
/* Style for the "Text Link Style" (when .is-style-link-button is active) */
.wp-block-my-custom-fields-plugin-document-meta-display.is-style-link-button .document-download-button-container a, /* Targets the tag directly */
.wp-block-my-custom-fields-plugin-document-meta-display .document-download-link-style { /* Class applied by PHP/JS */
background-color: transparent !important;
color: #0073aa !important; /* Or your theme's link color */
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
text-decoration: underline !important;
font-weight: normal !important;
box-shadow: none !important;
}
.wp-block-my-custom-fields-plugin-document-meta-display.is-style-link-button .document-download-button-container a:hover,
.wp-block-my-custom-fields-plugin-document-meta-display .document-download-link-style:hover {
color: #005a87 !important; /* Darker link color on hover */
text-decoration: none !important;
}
/* Ensure the lock icon color is appropriate for both styles */
.document-download-button .lock-icon svg,
.document-download-link-style .lock-icon svg {
fill: currentColor; /* Inherits color from parent tag */
}
/* Wrapper classes for styling text within the block (if not using default p tags) */
.document-meta-display-wrapper .document-access-status {
margin-bottom: 0.5em;
}
.document-meta-display-wrapper .document-download-button-container {
margin-top: 0.5em;
}
/* Theme css */
/* Active link styles */
/* a:active,
.wp-block-navigation-item__content:active,
.wp-block-button__link:active {
color: #000000 !important;
background-color: #156075 !important;
} */
/* nav description */
/* Make the navigation link a flex container to stack the title and description */
.wp-block-navigation-link a.wp-block-navigation-item__content,
.wp-block-navigation-item > a.wp-block-navigation-item__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.1em;
}
/* Styling for the navigation item description on the front-end */
.wp-block-navigation-item__description {
font-size: 0.8em;
opacity: 0.75;
line-height: 1.2;
font-style: normal;
pointer-events: none;
color: currentColor;
margin-top: -0.2em;
}
/* Styling for the description preview inside the block editor */
.wp-block-navigation-link .wp-block-navigation-item__description.is-editor-only-preview {
display: block;
font-size: 11px;
color: #444;
background-color: #f0f0f0;
padding: 2px 6px;
border-radius: 3px;
margin-top: 4px;
max-width: 90%;
}
.wp-block-navigation-item.has-visible-description .wp-block-navigation-item__description {
display: block !important; /* Force it to be visible, overriding any 'display: none'. */
}
/* theme styling */
/*
* Custom Block Styles for H1 Heading Variations
*/
/* --- H1 Sub-heading Style --- */
/* This CSS only applies when a Heading block is an H1 AND has the "H1 Sub-heading" style selected. */
.is-style-h1-sub-heading {
font-weight: 400;
color: var(--wp--preset--color--secondary);
font-family: var(--wp--preset--font-family--lato); /* 'Lato' from your theme.json */
font-size: 2.25rem;
line-height: 1.3;
letter-spacing: 0px;
}
/* --- H1 Sub-title Style --- */
/* This CSS only applies when a Heading block is an H1 AND has the "H1 Sub-title" style selected. */
.is-style-h1-sub-title {
font-weight: 275;
font-family: var(--wp--preset--font-family--lato); /* 'Lato' from your theme.json */
font-size: 2.125rem;
line-height: 1.3;
letter-spacing: 0px;
color: var(--wp--preset--color--primary);
}
.is-style-h2-sub-title {
font-weight: 275;
font-family: var(--wp--preset--font-family--lato);
color: var(--wp--preset--color--black);
font-size: 2rem;
line-height: 1.3;
letter-spacing: 0px;
}
.is-style-overline-heading{
font-weight: 700;
font-family: var(--wp--preset--font-family--lato);
font-size: var(--wp--preset--font-size--small);
line-height: 1.125rem;
letter-spacing: 0px;
text-transform: uppercase;
}
.is-style-title-1-heading{
font-weight: 700;
font-family: var(--wp--preset--font-family--lato);
font-size: 1.125rem;
line-height: 1.3rem;
letter-spacing: 0px;
color:var(--wp--preset--color--link)
}
.is-style-title-2-heading{
font-weight: 400;
font-family: var(--wp--preset--font-family--lato);
font-size: 1rem;
line-height: 1.3rem;
letter-spacing: 0px;
color: #767676;
}
.is-style-h1 {
font-family: var(--wp--preset--font-family--lato);
font-weight: 700 !important;
font-size: 3.75rem !important;
line-height: 1.3;
letter-spacing: 0px;
}
.is-style-h2 {
font-family: var(--wp--preset--font-family--lato);
font-weight: 700 !important;
font-size: 3rem !important;
line-height: 1.3;
letter-spacing: 0px;
color: var(--wp--preset--color--primary);
}
.is-style-h3 {
font-family: var(--wp--preset--font-family--lato);
font-weight: 400 !important;
font-size: 2.625rem !important;
line-height: 1.3;
letter-spacing: 0px;
color: var(--wp--preset--color--primary);
}
.is-style-h4 {
font-family: var(--wp--preset--font-family--lato);
font-weight: 275 !important;
font-size: 1.5rem !important;
line-height: 1;
letter-spacing: 0px;
}
.is-style-h5 {
font-family: var(--wp--preset--font-family--lato);
font-weight: 700 !important;
font-size: 1.25rem !important;
line-height: 1.3;
letter-spacing: 0px;
color: var(--wp--preset--color--primary);
}
.is-style-h6 {
font-family: var(--wp--preset--font-family--lato);
font-weight: 700 !important;
font-size: 1.125rem !important;
line-height: 1.3;
letter-spacing: 0px;
}
/* buttons */
/* Base styles for all our custom buttons for consistency */
.wp-block-button .wp-block-button__link {
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
border-width: 2px;
border-style: solid;
}
/* --- PRIMARY BUTTON --- */
/* Filled Style */
.wp-block-button.is-style-button-primary .wp-block-button__link {
background-color: var(--wp--preset--color--primary);
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--white);
border-color: var(--wp--preset--color--primary);
}
.wp-block-button.is-style-button-primary .wp-block-button__link:hover {
background-color: var(--wp--preset--color--primary-variation);
background: var(--wp--preset--color--primary-variation);
border-color: var(--wp--preset--color--primary-variation);
text-decoration: underline;
}
.wp-block-button.is-style-button-primary .wp-block-button__link:active {
background-color: var(--wp--preset--color--primary);
background: var(--wp--preset--color--primary);
border-color: var(--wp--preset--color--primary);
text-decoration: underline;
}
/* --- SECONDARY BUTTON --- */
/* Filled Style */
.wp-block-button.is-style-button-secondary .wp-block-button__link {
/* background-color: var(--wp--preset--color--secondary); */
color: var(--wp--preset--color--primary);
border-color: var(--wp--preset--color--secondary-variation);
background: linear-gradient(180deg, rgba(255, 255, 255, 3e-05) -18.59%, rgba(127, 168, 180, 0.163761) 81.93%, rgba(21, 96, 117, 0.3) 123.32%),linear-gradient(0deg, #EDF3F4, #EDF3F4);
}
.wp-block-button.is-style-button-secondary .wp-block-button__link:hover {
text-decoration: underline;
color: var(--wp--preset--color--black);
background: var(--wp--preset--color--secondary);
border-color: var(--wp--preset--color--secondary);
}
.wp-block-button.is-style-button-secondary .wp-block-button__link:active {
text-decoration: underline;
color: var(--wp--preset--color--black);
background: var(--wp--preset--color--secondary-variation);
background: var(--wp--preset--color--secondary-variation);
}
/* --- TERTIARY BUTTON --- */
/* Filled Style */
.wp-block-button.is-style-button-tertiary .wp-block-button__link {
/* background-color: var(--wp--preset--color--tertiary); */
color: var(--wp--preset--color--black);
border-color: var(--wp--preset--color--tertiary);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.3375) 0%, rgba(0, 0, 0, 0.135) 157.2%),linear-gradient(0deg, #CCCCCC, #CCCCCC);
}
.wp-block-button.is-style-button-tertiary .wp-block-button__link:hover {
text-decoration: underline;
border-color: var(--wp--preset--color--tertiary-variation);
background-color: #BEBEBE;
background: #BEBEBE;
}
.wp-block-button.is-style-button-tertiary .wp-block-button__link:active {
background: #999999;
background-color: #999999;
text-decoration: underline;
border-color:var(--wp--preset--color--tertiary-variation);
}
/* remove underline in tile component category */
.is-component-tile .taxonomy-category a{
text-decoration: none;
}
/*
* Custom Styles for Navigation Block Links as Buttons
* Ensure your Navigation block has the class "styled-nav-buttons"
*/
/* Target the individual link elements within your styled navigation */
.styled-nav-buttons .wp-block-navigation-item__content {
display: inline-block; /* Allows padding, margin, etc., like a button */
padding: 1rem 1.24rem; /* Vertical and horizontal padding */
margin: 4px; /* Space around each button */
border: 1px solid;
text-decoration: none; /* Remove underline from links */
border-radius: 8px; /* Rounded corners for button look */
font-weight: 500; /* Slightly bolder text */
line-height: 1.25; /* Adjust for text vertical centering if needed */
text-align: center;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Smooth transitions */
font-size: 1rem;
font-family: var(--wp--preset--font-family--lato);
color: var(--wp--preset--color--primary);
border-color: var(--wp--preset--color--secondary);
background: linear-gradient(180deg, rgba(255, 255, 255, 3e-05) -18.59%, rgba(127, 168, 180, 0.163761) 81.93%, rgba(21, 96, 117, 0.3) 123.32%);
}
/* Hover and Focus styles for all buttons */
.styled-nav-buttons .wp-block-navigation-item__content:hover{
text-decoration: underline;
color: var(--wp--preset--color--black);
background: var(--wp--preset--color--secondary);
border-color: var(--wp--preset--color--secondary);
}
.styled-nav-buttons .wp-block-navigation-item__content:focus {
text-decoration: underline;
color: var(--wp--preset--color--black);
background: var(--wp--preset--color--secondary-variation);
background: var(--wp--preset--color--secondary-variation);
}
/*
* Highlight style for the Current Page Item's Link
* WordPress adds classes like .current-menu-item or .current-page-item to the parent.
*/
.styled-nav-buttons .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.styled-nav-buttons .wp-block-navigation-item.current-page-item > .wp-block-navigation-item__content {
background-color: var(--wp--preset--color--primary);
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--white);
border-color: var(--wp--preset--color--primary);
}
/* Optional: Adjustments for the UL container if needed */
.styled-nav-buttons .wp-block-navigation__container {
display: flex; /* Helps align items in a row if not already */
flex-wrap: wrap; /* Allows buttons to wrap to the next line on smaller screens */
list-style: none; /* Ensure no list bullets if not already handled */
padding-left: 0; /* Remove default UL padding */
}
/* Optional: Ensure list items don't add extra styling */
.styled-nav-buttons .wp-block-navigation-item {
margin: 0; /* Reset default margins on list items if any */
}
/*
* ========================================
* Global Components styling
* ========================================
*/
li{
line-height: 1.25rem;
/* margin-bottom: 1rem; */
}
h4{
/*font-weight: 275;*/
}
/* page css */
.page-layout{
margin: 0 auto;
padding: var(--wp--preset--spacing--20);
}
.page-layout .wp-block-image{
flex-shrink: 0 ;
flex-grow: 0 ;
}
.page-layout p{
flex-shrink: 1;
flex-grow: 1;
flex-basis: 0;
}
@media (max-width: 600px) {
.page-layout aside{
padding-bottom: 0 !important;
}
.page-layout-blog-home .wp-block-columns{
flex-direction: column-reverse;
}
.page-layout-blog-home .page-layout-blog-home--list .wp-block-columns{
flex-direction: column-reverse;
}
.page-layout-blog-home img {
width: 70% !important;
height: auto;
}
.page-layout p{
flex-basis: auto;
}
}
@media (max-width: 450px) {
}
/* home and archive page */
ul.is-custom-category{
padding-left: 0;
/* margin: 0; */
}
.is-custom-category li{
list-style: none;
margin-bottom: 0.5rem;
}
/* single post page */
/*
* =========================================
* Responsive Images within Post Content
* =========================================
*/
/* 1. Base Responsive Rule for ALL Images in Content */
/* This makes images scale down gracefully if their container is too small. */
.page-layout-post-content img {
max-width: 100%;
height: auto;
display: block;
}
/* 2. Styles for Aligned Images on Desktop */
/* These styles handle images aligned left or right with text wrapping around them. */
.page-layout-post-content .alignleft {
float: left;
margin-right: 1.5em;
margin-bottom: 1em;
}
.page-layout-post-content .alignright {
float: right;
margin-left: 1.5em;
margin-bottom: 1em;
}
.page-layout-post-content .aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
/*
* ========================================
* Responsive Breakpoints
* ========================================
*/
/* Tablet Styles (600px and below) */
@media (max-width: 600px) {
/* On tablets, stop images from floating so they don't crowd the text.
They will now take up their own line. */
.page-layout-post-content .alignleft,
.page-layout-post-content .alignright {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
}
}
/* Mobile Styles (450px and below) */
@media (max-width: 450px) {
.page-layout-post-content .alignleft,
.page-layout-post-content .alignright,
.page-layout-post-content .aligncenter {
margin-left: 0;
margin-right: 0;
}
}
/*
* Responsive Category Display
* Hides and shows the correct version based on screen size.
*/
/* On desktop (screens wider than 600px), HIDE the mobile dropdown. */
@media (min-width: 601px) {
.show-on-mobile {
display: none;
}
}
/* On mobile (screens 600px and smaller), HIDE the desktop list. */
@media (max-width: 600px) {
.hide-on-mobile {
display: none;
}
}
/*
* =========================================
* Custom Styling for Mobile Category Dropdown
* =========================================
*/
/* Target the