/*
Theme Name: Island Roads Custom Theme 2026
Theme URI: www.islandroads.com
Author: James Dark
Author URI: www.islandroads.com
Description: Custom theme created for Island Roads, using Fewer as a template.
Requires at least: 5.8
Tested up to: 6.2
Requires PHP: 5.7
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fewer
Tags: blog, news, portfolio, grid-layout, two-columns, three-columns, left-sidebar, wide-blocks, block-patterns, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, rtl-language-support, style-variations, template-editing, theme-options, threaded-comments, translation-ready
*/
/*
 * Font smoothing
 */
body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/*
 * Control the hover stylings of outline block style.
 * Unnecessary once block styles are configurable via theme.json
 * https://github.com/WordPress/gutenberg/issues/42794
 */
.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--secondary);
}

/* Hide the custom HTML search bar in the shared header ONLY on the homepage */
.home .custom-search-bar {
    display: none !important;
}

/**
 * Currently table styles are only available with 'wp-block-styles' 
 * theme support (block css) thus the following needs to be included
 * since 'wp-block-styles' aren't used for this theme.
 * https://github.com/WordPress/gutenberg/issues/45065
 */

/* Blue links only inside MAIN PAGE content */
.entry-content p a,
.wp-block-post-content p a {
    color: #00aeef !important;
    text-decoration: none;
}

.entry-content p a:hover,
.wp-block-post-content p a:hover {
    color: #0086CC !important;
	text-decoration: underline;
}

a {
    text-decoration: none;
}

/* Force news/post block titles back to your theme's default color */
.wp-block-post-title a,
.wp-block-query .wp-block-post-title a,
.wp-block-latest-posts__list a,
.wp-block-post a.wp-block-post-title {
    color: inherit !important;
    text-decoration: none !important;
}

.wp-block-table thead {
	border-bottom: 3px solid;
}
.wp-block-table tfoot {
	border-top: 3px solid;
}
.wp-block-table td,
.wp-block-table th {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid;
	word-break: normal;
}
.wp-block-table figcaption {
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.custom-search-columns {
    display: flex;
    gap: 2%;
    align-items: flex-start;
	justify-content: space-between;
}

.custom-search-columns > p {
	display: none;
}


.custom-search-columns {
    display: flex;
    gap: 2%;
    align-items: flex-start;
	justify-content: space-between;
}

.custom-search-columns > .search-left-column {
	flex: 0 0 60%;
    max-width: 60%;
    height: auto !important;
    min-height: 0 !important;
    flex-basis: auto !important;
	
}
.custom-search-columns > .search-right-column  {
	flex: 0 0 38%;
    max-width: 38%;
    height: auto !important;
    min-height: 0 !important;
    flex-basis: auto !important;
}


.result-card {
    display: flex;
    background: #D6D6D6; /* grey background */
    margin-bottom: 20px;
    padding: 0px;
    height: 120px; /* set your desired fixed height */
    overflow: hidden;
    display: flex;
	text-decoration: none !important;
}

.result-card:hover {
    background-color: #E0E0E0;
}


.result-accent {
    width: 6px;
    margin-right: 8px;
}

/* Make the whole card clickable */
.result-clickwrap {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
	text-decoration: none !important;
}

/* Ensure the card behaves like a button */
.result-card {
    cursor: pointer;
	text-decoration: none;
}

.result-card:hover .result-title {
    text-decoration: underline;
}

.page-accent {
    background: #75c044; /* green bar */
}

.post-accent {
    background: #fcaf17; /* orange bar */
}

.result-title {
    font-size: 20px;
    font-weight: 700;
    color: #00478c; 
    text-decoration: none;
	 display: -webkit-box;
    -webkit-line-clamp: 1; /* one-line title */
    -webkit-box-orient: vertical;
    overflow: hidden;
	text-decoration: none !important;
}

.result-date {
    font-size: 16px;
    font-weight: 500;
    color: #00478c; 
    text-decoration: none;
	 display: -webkit-box;
    -webkit-line-clamp: 1; /* one-line title */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.result-accent page-accent {
	color: #75c044;
}

.result-accent post-accent {
	color: #fcaf17;
}

.result-title:hover {
    text-decoration: underline;
}

.custom-search-columns {
	width: 100%;
}
.result-excerpt {
    margin-top: 10px;
    font-size: 14px;
    color: #444;
    line-height: 1.4;
	display: -webkit-box;
    -webkit-line-clamp: 2;  /* number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.az-container {
    color: #00478c;
    font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 18px;
}

#az-results {
    margin-top: 20px; /* Push results below the search bar */
    clear: both; /* Ensure it starts on a new line */
}

.result-clickwrap {
    display: block;
    flex: 1;
    text-decoration: none;
    color: inherit;
}




.az-item {
    display: block;
    background: #d3d3d3;
    border-left: 5px solid orange;
    padding: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    color: #004080;
    font-weight: bold;
    font-size: 18px;
    transition: background 0.3s, border-color 0.3s;
    position: relative; /* Keeps it inside its container */
}

.az-item:hover {
    background: #c0c0c0;
    border-left-color: #ff9900;
}

.az-title {
    color: #00478c; /* Dark blue */
    font-size: 20px;
    font-style: normal;
    margin-bottom: 15px;
    font-weight:700;
}

.az-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 15px;
    overflow-x: auto;           /* enables horizontal scroll on mobile */
    white-space: nowrap;        /* prevents wrapping */
    align-items: center;
}

.az-buttons button {
    flex: 0 0 auto;             /* prevents stretching */
}

.az-buttons .az-btn {
    background: #75c044;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
	width: 40px;
	height: 40px;	
	align-items: center;
}

.az-buttons .az-btn.az-active {
    border-color: #497A2B; 
    background: #5E9C36;  
    font-weight: bold;
}

.az-btn:hover {
    background: #58a63a;
}

.az-search-label {
    display: block;
    color: #00478c;
    font-weight: bold;
    margin-bottom: 5px;
}

.az-search input {
    width: calc(100% - 20px);
    padding: 10px;
    border: 2px solid #002b45;
    font-size: 16px;
}

#az-results .az-item {
    padding: 10px;
    background: #d3d3d3;
    border-left: 5px solid orange;
    padding: 10px;
    margin-bottom: 10px;
	text-decoration: none;
}

#az-results .az-item:hover {
    background: #E0E0E0;
  
}

.az-title-link {
    color: #00478c;
    font-weight: bold;
    font-size: 18px;
	text-decoration: none;
}

.az-btn.az-disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    opacity: 0.6;
}

.az-disabled {
    background: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

.az-btn.active {
    background: #ffffff;
    color: #005f85;
    border-color: #ffb000;        /* accent border (e.g., council amber) */
    box-shadow: 0 0 0 1px #ffb000 inset;
}

.single-post-wrapper {
    display: flex;
    align-items: stretch; /* Ensures children stretch to equal height */
}

.single-post-column {
    flex: 7; /* 70% width */
}

.single-post-news-column {
    box-shadow: -2px 0 0 #ccc;
    flex: 3;
}

.search-results-wrapper {
    display: flex;
    align-items: stretch; /* Ensures children stretch to equal height */
}

.search-results-column {
    flex: 6; 
}

.search-results-news-column {
    box-shadow: -2px 0 0 #ccc;
    flex: 4;
    }

.news-post-wrapper {
    display: flex;
    align-items: stretch; /* Ensures children stretch to equal height */
    gap: 4px;	
	background-color: #F5F5F5 !important; /* Slightly lighter gray */
    border: none;
    color: black;
    padding: 2px 2px;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    width: 100%;
    position: relative;
	height: 100px;
	transition: background-color 0.3s ease;
	padding: 4px
}

/* Green vertical left edge */
.news-post-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px; /* Adjust width as needed */
    height: 100%;
    background-color: #75c044; /* Green edge */
}

.news-post-wrapper:hover {
    background-color: #FCFCFC !important; /* Slightly lighter gray */
}

.news-post-wrapper:hover::before {
    background-color: #A5D685; /* Lighter green edge on hover */
} 

.news-post-wrapper:hover .news-block-post-featured-image {
  transform: scale(1.05);
}

.news-image-column {
  flex: 1; 
  height: 100%;
}

.news-title-column {
  flex: 8; /* 70% width */
}

.homepage-wrapper {
  display: flex;
  align-items: stretch; /* Ensures children stretch to equal height */
  gap: 4px;	
}

.intro-column {
    flex: 7; /* 70% width */
}

.main-column {
    flex: 7; /* 70% width */
}

.homepage-main-wrapper {
    display: flex;
    align-items: stretch; /* Ensures children stretch to equal height */
    gap: 8px;
    background-color: #C7C7C7;
}

.twitter-column {
    flex: 3;
    height: 100%;	
    box-shadow: -2px 0 0 #ccc;
    }

.news-column {
    flex: 3;
    max-height: 200px;
    height: 100%;	
    box-shadow: -2px 0 0 #ccc;
}

.custom-search-bar {
    display: flex;
    max-width: 600px;
    margin: 20px auto;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid #636363;
}

.custom-search-bar input[type="search"] {
    flex: 1;
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    outline: none;
}

.custom-search-bar button {
    background-color: #75c044;
    border: none;
    padding: 0 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.custom-search-bar button:hover {
    background-color: #89d955;
}

.custom-search-bar button svg {
    fill: white;
    width: 16px;
    height: 16px;
}

.cover-search-bar {
    display: flex;
    max-width: 800px;
    height: 50px;
    margin: 20px auto;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid #636363;
    background-color: white;
}

.cover-search-bar input[type="search"] {
    flex: 1;
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    outline: none;
    background-color: white;
    color: #333;
}

.cover-search-bar button {
    background-color: #75c044;
    border: none;
    padding: 0 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.cover-search-bar button:hover {
    background-color: #89d955;
}

.cover-search-bar button svg {
    fill: white;
    width: 16px;
    height: 16px;
}



.custom-random-cover {
    min-height: 240px;
    width: 100% !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-bottom: 4px;
    padding: 20px;
    box-sizing: border-box;
}

.custom-random-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(100, 100, 100, 0.4); /* overlay with opacity */
    z-index: 1;
}

.cover-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.cover-heading {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.wp-block-search__inside-wrapper {
    display: flex;
    width: 100%;
    gap: 10px;
}

.wp-block-query-pagination-numbers a {
    margin-right: 8px; /* Adjust spacing between links */
}

.wp-block-query-pagination-numbers a:last-of-type {
    margin-left: 8px; /* Adds space before "Next Page" */
}

.wp-block-query-pagination-numbers a:first-of-type {
    margin-left: 8px; /* Adds space before "Next Page" */
}

.front_page_cover__image-background {
    object-position: 55% 64%;
    object-fit: cover;
}

.front_page_cover__background {            
    background-color: #a1a49f !important;
}

.cover-image {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
}

.wp-block-query {
    width: 100%;
}

.video-caption-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    max-width: 100%;	
    }

.video-box {
    flex: 2;
    min-width: 500px;
    aspect-ratio: 16 / 9;
}

.video-box iframe {
    width: 100%;
    height: 100%;
}

.caption-box {
    flex: 1;
    min-width: 200px;
    font-size: 16px;
    line-height: 1.4;
}




a:where(:not(.wp-element-button)) {
    color: #00aeef;
  /*  text-decoration: underline; */
}

.wp-block-post-template.is-layout-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}


.wp-block-post-template.is-layout-grid > * {
    flex: 1 1 calc(20% - 5px); /* or use 100% for full width */
    width: calc(20% - 5px); 
    height: auto;
}

.homepage-news-block-post {
	background-color: #F5F5F5 !important; /* Slightly lighter gray */
    border: none;
    color: black;
    padding: 5px 5px;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    width: 100%;
    position: relative;
	height: 80px;
}

/* Green vertical left edge */
.homepage-news-block-post::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 5px; /* Adjust width as needed */
   height: 100%;
   background-color: #75c044; /* Green edge */
}

/* Hover effect */
.homepage-news-block-post:hover {
   background-color: #FCFCFC !important; /* Slightly lighter gray */
}

.homepage-news-block-post:hover::before {
   background-color: #A5D685; /* Lighter green edge on hover */
}

.post-result-block {
	background-color: #E3E3E3 !important; /* Slightly lighter gray */
    border: none;
    color: black;
    padding: 5px 5px;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    width: 100%;
    position: relative;
	height: 116px;
}

/* Green vertical left edge */
.post-result-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px; /* Adjust width as needed */
    height: 100%;
    background-color: #fcaf17; /* Green edge */
}

/* Hover effect */
.post-result-block:hover {
    background-color: #F2F2F2 !important; /* Slightly lighter gray */
}

.post-result-block:hover::before {
    background-color: #ffd175ff; /* Lighter green edge on hover */
}

.result-block {
	background-color: #E3E3E3 !important; /* Slightly lighter gray */
    border: none;
    color: black;
    padding: 5px 5px;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    width: 96%;
    position: relative;
	height: 140px;
}

/* Green vertical left edge */
.result-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px; /* Adjust width as needed */
    height: 100%;
    background-color: #75c044; /* Green edge */
}

/* Hover effect */
.result-block:hover {
    background-color: #F2F2F2 !important; /* Slightly lighter gray */
}

.result-block:hover::before {
    background-color: #A5D685; /* Lighter green edge on hover */
}

.post-block {
	background-color: #cccccc !important; 
    border: none;
    color: black;
    padding: 5px 5px;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    width: 100%;
    position: relative;
  	border-radius: 2px;
}

.post-block:hover {
    background-color: #E0E0E0 !important; /* Slightly lighter gray */
}

.post-block:hover::before {
    background-color: #A5D685; /* Lighter green edge on hover */
}

.post-block:hover {
    background-color: #E3E3E3;
    transform: scale(1.01);
}

.news-block-post {
    position: relative;
    width: 100%; 
    aspect-ratio: 1 / 1;
    min-height:20%;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    background-color: #d3d3d3;
    transition: background-color 0.3s ease;
    border: 1px solid #000000 !important; 
    border-radius: 3px;
}

.news-block-post-featured-image {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    display: block; /* Ensure it's not hidden */
    transition: transform 0.3s ease;
    border-radius: 2px;
}

.news-block-post:hover .news-block-post-featured-image {
    transform: scale(1.05);
}

.news-block-post:hover .news-block-post-title {
    font-size: 19px;
    transition: font-size 0.3s ease;
    background-color: rgba(255, 255, 255, 0.7);
}

.news-block-post:hover .news-block-post-date {
    transition: font-size 0.3s ease;
    background-color: rgba(255, 255, 255, 0.7);
}

.news-block-post-date {
    top: 10px;
    left: 10px;
    position: absolute;
    z-index: 2;
    color: #00478c !important;
    font-weight: bold;
    font-size: 14px;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 4px 6px;
    border-radius: 3px;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-block-post-title {
    position: absolute;
    top: 50px;
    left: 10px;
    right: 10px;
    z-index: 2;
    color: #00478c !important;
    font-weight: bold;
    font-size: 18px !important;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 4px 6px;
    border-radius: 3px;
    max-width: 90%;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;   /* limit to 3 lines */
    overflow: hidden;        /* required */
    text-overflow: ellipsis; /* required */
   white-space: normal; 
	overflow-wrap: break-word;
}


.news-block-post-title a {
    text-decoration: none;
}

.news-block-post-title a:hover {
    text-decoration: none;
}

.news-block-post:hover .news-block-post-read-more {
    color: #00478c !important; /* Make text visible */
    font-size: 18px !important; /* Optional: make it slightly larger */
    background-color: rgba(255, 255, 255, 0);
}

.search-result-block {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    background-color: #cccccc !important;
    transition: background-color 0.3s ease;
}

.search-result-block:hover {
	background-color: #d4d4d4 !important;
}

.search-result:hover .search-result-featured-image {
    transform: scale(1.05);
}

.search-result-title {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 2;
    color: #00478c !important;
    font-weight: bold;
    font-size: 24px !important;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 4px 6px;
    border-radius: 3px;
    max-width: 90%;
    white-space: normal; /* allow wrapping */
    overflow: visible;
}

.search-result-preview {
    position: absolute;
    top: 60px;
    left: 10px;
    right: 10px;
    z-index: 2;
    color: #00478c !important;
    font-weight: bold;
    font-size: 18px !important;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 4px 6px;
    border-radius: 3px;
    max-width: 90%;
    white-space: normal;
    overflow: visible;
}

.search-result-title a {
    text-decoration: none;
}

.search-result-title a:hover {
    text-decoration: none;
}

.Report-It-Online-Button {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background-color: #fcaf17;
    padding: 5px;
    width: 160px !important; 
    height: 40px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	text-decoration: none !important;
}

.Report-It-Online-Button:hover {
    background-color: #fac761;
	text-decoration: none !important;
}

.news-story-container {
    margin: 0 auto; /* This centers the container horizontally */
    display: flex;   /* Enables flexbox layout */
	width: 100% !important;
}

.news-story-container h2 {
  text-align: left !important;
  margin-left: 0 !important;
}

.page-container {
	width: 80%;
	justify-items: center;
}

.Report-It-Online-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 100%; /* Ensures it fills the button height */
    font-size: 18px;
    font-weight: bold;
	text-decoration: none !important;
    color: #ffffff;
}

.Report-It-Online-text:hover {
	text-decoration: none !important;
}

.Report-It-Online-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

.Report-It-Online-icon::before {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 2px;
    background-color: black;
    transform: rotate(45deg);
}

.Report-It-Online-icon::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 2px;
    height: 10px;
    background-color: black;
    transform: rotate(45deg);
}
.Page-Information-Button {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background-color: #D6D6D6;
    padding: 2px;
    border-radius: 2px;
    width: calc(20% - 10px); 
    height: 140px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    position: relative;
	text-decoration: none !important;
}

.Page-Information-Button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: #fcaf17;
    border-radius: 2px 0 0 2px;

}

.Page-Information-Button:hover {
    background-color: #E0E0E0;
}

.Page-Information-Button:hover::before {
    background-color: #fcaf17;
	text-decoration: none !important;
}

.Page-Information-Button-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2px;
    height: 100%;
    padding-left: 10px;
}

.Page-Information-Button-Title {
    color: #00478c;
    font-weight: bold;
    font-size: 20px;
}

.Page-Information-Button-Subtitle {
    color: #000000;
    font-size: 16px;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.Page-Information-Button-Arrow {
    font-size: 20px;
    display: flex;
    align-items: center;
    margin-left: 10px;
}

a:hover {
    text-decoration: underline;
}



.news-block-post-title a:hover {
    text-decoration: none;
}

.Report-It-Button {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Allows children to control their own vertical alignment */
    background-color: #d3d3d3;
    padding: 5px;
    border-radius: 5px;
    width: 300px;
    height: 120px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    color: inherit;
    margin: 2px;
}

.Report-It-Button-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    height: 100%; /* Ensures it fills the button height */
}

.Report-It-Button-Title {
    color: #00478c;
    font-weight: bold;
    font-size: 18px;
}

.Report-It-Button-Subtitle {
    color: #000000;
    font-size: 16px;
    top: 40;
}

.Report-It-Button-Arrow {
    font-size: 20px;
    display: flex;
    align-items: center; /* Vertically center the arrow */
    margin-left: 10px;
}

.Report-It-Button:hover {
 background-color: #bebebe;
}

.wp-element-button:hover, .wp-block-button__link:hover {
    background-color: #ffffff00 !important;/* Add a background color */
 }
     
 .wp-element-button:link, .wp-block-button__link:link {
    background-color: #ffffff00 !important;/* Add a background color */
 }

.Read-More-Page-Button {
    width: 200px !important;
    height: 50px !important;
    display: inline-block !important;
    text-align: center !important;
    word-wrap: break-word !important;
    line-height: 0 !important; /* Adjust this value to reduce gaps */
    overflow: hidden !important;
    box-sizing: border-box !important; /* Ensure padding is included in the element's total width and height */
    background-color: #75c044 !important; /* Add a background color */
    color: #ffffff !important; /* Ensure text color is visible */
    position: relative !important; /* Ensure positioning context for the paragraph */
    border-radius: 4px; /* Optional: rounded corners */
}

.Read-More-Page-Button p {
    text-align: center; /* Center-align the text */
    line-height: 0 !important; /* Adjust this value to reduce gaps */
    width: 80% !important;
}

.Read-More-Page-Button-Arrow {
    font-size: 20px;
    display: flex;
    align-items: center; /* Vertically center the arrow */
    margin-left: 10px;
}

.read-more-btn {
    background-color: #4CAF50;      /* Green background */
    color: white;                   /* White text */
    border: 1px solid black;        /* Thin black border */
    padding: 10px 20px;             /* Padding for size */
    font-size: 16px;                /* Font size */
    cursor: pointer;                /* Pointer cursor on hover */
    display: flex;                  /* Flexbox for alignment */
    justify-content: space-between;/* Space between text and arrow */
    align-items: center;           /* Center vertically */
    width: 150px;                  /* Fixed width for layout */
}

.read-more-btn:hover {
    background-color: #94de64;     /* Slightly darker green on hover */
}

.ButtonHolder {
    display: flex; /* Ensure the container uses flexbox */
    align-items: left;
}
.Page-Heading {
    padding-left: 0% !important;
}

.read-more-link {
    align-self: flex-end; /* Aligns to the right */
    padding: 10px 20px;
    border: none;
    cursor: pointer;
	width: 100px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.report-it-online-link {
    display: inline-block;
    padding: 10px 16px;
    background-color: #fcaf17;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;         /* Prevents text from wrapping */
    flex-shrink: 0;              /* Prevents shrinking in flex layout */
    min-width: 140px;            /* Ensures enough space for text */
    text-align: center;
}

.report-it-online-link:hover {
    background-color: #c78b12;
}

.island-roads-logo {
    display: inline-block;
    padding: 10px 16px;
    background-color: #00000000;
    color: #ffffff;
    border: none;
    cursor: pointer;
    flex-shrink: 0;              /* Prevents shrinking in flex layout */
    min-width: 140px;            /* Ensures enough space for text */
	align-items: center;
}

.wp-block-search__button {
    align-self: flex-end; /* Aligns to the right */
    padding: 10px 20px;
    background-color: #75c044 !important;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.wp-block-site-logo img {
    height: auto;
    max-width: 100%;
	align-self: center; /* Aligns to the right */
}

.wp-block-search__button:hover {
    background-color: #94de64 !important;
}

.search-bar {
 height: 40px;
    border-radius: 6px;
    border: 2px solid #f4c400; /* Match button color */
    padding: 0 10px;
    font-size: 16px;
}
.wp-block-search {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.wp-block-search__input {
    padding: 10px;
    font-size: 16px;
    border: 2px solid #f4c400;
    border-radius: 6px;
    width: 250px;
    box-sizing: border-box;
    background-color: white;
    color: black;
}

.wp-block-search__button {
    padding: 10px 16px;
    background-color: #f4c400;
    color: #000;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.custom-search-button:hover {
    background-color: #e6b800;
}

.info-block-wrapper {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
}

.header-container {
    display: flex;
    align-items: center;
    gap: 20px; /* spacing between elements */
    flex-wrap: wrap; /* optional: allows wrapping on smaller screens */
}

.help-and-support-container {
    display: flex !important;
    flex-wrap: wrap;
    width: 100%;
    min-height: 400px; /* Try a fixed pixel value */
    margin: 0 auto;
    gap: 10px;
    align-items: stretch;
}

.button-container {
    display: flex !important;
    flex-wrap: wrap;
    width: 100%; /* Ensure the container takes up the full width */
    max-width: 100%; /* Set a max-width if needed */
    gap: 10px; /* Adds space between buttons */
    margin: 0 auto; /* Center the container */
}

.button-container-2 {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.community-newsletter-button:hover::before {
    opacity: 1;
}

.news-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%     
}

.news-title-text {
    text-shadow: 
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px  1px 0 black;
}

.read-more-link {
    margin-left: auto;
}

.news-post-template {
    width: 100%;
    height: 100%;
    display: inline-block;
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    box-sizing: border-box;
    color: #ffffff;
    position: relative;
    text-decoration: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4%;
    margin: 2px;
}

.news-post-template::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.news-post-template img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.news-post-template p {
    font-size: 26px;
    margin: 0;
    padding: 8px; /* Add padding for internal spacing */
    color: inherit;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.2;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    word-break: normal;
    font-weight: 600;
    z-index: 2;
}

.news-post-template::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.news-post-template:hover::before {
    opacity: 1;
}

/* Base nav styles */

nav.custom-nav a.active-page {
  background-color: #0055AD;
}

nav.custom-nav {
    height: 45px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* or try space-between */
    background-color: #00478c;
    width: 80%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
}

/* Nav links */
nav.custom-nav a {
    flex: 1;
    height: 100%; 
    min-width: 120px; /* Optional: prevents items from shrinking too much */
    display: flex;
    align-items: center;       /* Vertically center text */
    justify-content: center;   /* Horizontally center text */
    padding: 10px;
    color: white;
    text-decoration: none;
    box-sizing: border-box;
    border-right: 1px solid white;
    font-weight: 600;
    text-align: center;
    font-size: 20px;
    transition: background-color 0.3s ease;
}

.news-read-more-link {
    display: block;
    font-size: 16px;
    margin-top: 10px;
    }

.ctf {
    flex: 1;
    overflow-y: auto;
    border-radius: 4px;
    background-color: #F7F7F7;
    padding: 10px;
    height: 510px;	
}

.ctf-tweets {
    border-radius: 4px;
    background-color:	#F7F7F7;
}

.ctf-header-bio {
	color: #373737;
	align-items: center;
	justify-content: center;
}

.ctf-author-avatar {
    content: "";
    display: inline-block;
    background-image: url('https://islandroads.com/wp-content/themes/islandroads/images/logo.jpg');
    background-size: cover;
    font-size: 0px;
    background-size: contain; /* or 'cover' depending on your goal */
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    overflow: hidden;
    background-color:	#FFFFFF;
    opacity: 1;
}

.ctf-header-img {
    content: "";
    display: inline-block;
    background-image: url('https://islandroads.com/wp-content/themes/islandroads/images/logo.jpg');
    background-size: cover;
    border-radius: 50%;
    font-size: 0px;
    background-size: contain; /* or 'cover' depending on your goal */
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    overflow: hidden;
    background-color:#FFFFFF;
}

@media (min-width: 1250px) and (max-width: 1800px) {
	.Page-Information-Button {
        width: calc(20% - 10px); 
        height: 200px;
	}
	.wp-block-post-template.is-layout-grid > * {
		flex: 1 1 19% !important; /* or use 100% for full width */
		max-width: 19%;
		height: auto;
	}
	.news-block-post-title {
		 font-size: 17px;
	}
	.news-block-post:hover .news-block-post-title {
        font-size: 18px;
        transition: font-size 0.3s ease;
        background-color: rgba(255, 255, 255, 0.7);
	}
	.main-column {
        flex: 6; /* 80% width */
    }

    .twitter-column {
        flex: 4;
	}
}

@media (min-width: 1100px) and (max-width: 1250px) {
    nav.custom-nav {
		width: 100%;
	}
   nav.custom-nav a {
	    font-size: 17px;
   }
	
	.Page-Information-Button {
        width: calc(20% - 10px); 
        height: 200px;
	}
	.wp-block-post-template.is-layout-grid > * {
		flex: 1 1 19% !important; /* or use 100% for full width */
		max-width: 19%;
		height: auto;
	}
	.page-container {
		width: 96%;
			
	}
	.news-story-container {
    	width: 96%;
	}
	.news-block-post-title {
		 font-size: 16px;
	}
	.news-block-post:hover .news-block-post-title {
        font-size: 17px !important;
        transition: font-size 0.3s ease;
        background-color: rgba(255, 255, 255, 0.7);
	}
	.main-column {
        flex: 6; /* 80% width */
    }

    .twitter-column {
        flex: 4;
	}
}

@media (min-width: 900px) and (max-width: 1100px) {
	nav.custom-nav {
		width: 100%;
	}
	nav.custom-nav a {
		font-size: 16px;
   	}
	.news-story-container {
    	width: 96%;
	}
	.Page-Information-Button {
	 	width: calc(20% - 10px); 
	 	height: 200px;
	}
	.wp-block-post-template.is-layout-grid > * {
		flex: 1 1 49% !important; /* or use 100% for full width */
		max-width: 49%;
		height: auto;
	}
	.page-container {
		width: 96%;
	}
	.news-block-post-title {
	 	font-size: 14px;
	}
	.news-block-post:hover .news-block-post-title {
		font-size: 15px;
		transition: font-size 0.3s ease;
	 	background-color: rgba(255, 255, 255, 0.7);
	}
}

@media (min-width: 800px) and (max-width: 900px) {
	
	.homepage-wrapper {
	flex-direction: column;
	}

	.intro-column,
	.main-column {
		flex: unset; /* Remove flex sizing */
		width: 100%; /* Full width */  
	}
	
	.twitter-column {
 		box-shadow: 0 -2px 0 #ccc;
	}

	nav.custom-nav {
		width: 100%;
	}
	.news-story-container {
    	width: 96%;
	}
   nav.custom-nav a {
	    font-size: 16px;
   }
	
	.Page-Information-Button {
	  width: calc(33.33% - 10px); 
	  height: 200px;
	}
	.wp-block-post-template.is-layout-grid > * {
		flex: 1 1 49% !important; /* or use 100% for full width */
		max-width: 49%;
		height: auto;
	}
	.page-container {
		width: 96%;
		justify-items: center;
	}
}

/* Remove right border from last item */
nav.custom-nav a:last-child {
    border-right: none;
}

/* Hover effect */
nav.custom-nav a:hover {
    background-color: #015db9;
}

/* Hamburger button */
.menu-toggle {
    display: none;
    background-color: #00478c;
    color: white;
    border: none;
    font-size: 24px;
    font-weight: 600;
    padding: 15px;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.wp-block-media-text__content {
	padding: 10px !important;
}

.components-popover {
    background-color: #ffffff;
}

.breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.breadcrumb li {
    margin-right: 10px;
}

.breadcrumbs a {
    color: #00aeef !important;
}

.breadcrumb a {
   color: 00aeef;
}

.breadcrumb li::after {
    content: "›";
    margin-left: 10px;
    color: #999;
}

.breadcrumb li:last-child::after {
    content: "";
}

.image-side-header {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.image-side-header h2 {
    margin: 0;
    padding: 0;
}

.fixed-layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    max-width: 100%;
    margin: 0 auto;
}

/* Image side */
.image-side {
    width: auto;
    max-width: 50%;
    height: 50%;
}

.image-side img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Text side */
.text-side {
    flex: 1;
    font-size: 16px;
    line-height: 1.6;
}

.video-side {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
}

.video-side iframe {
    width: 50%;
    height: 150%;
    max-width: 50%;
}

.responsive-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.responsive-video iframe {
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.wp-block-search {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	color: #b3b3b3 !important;
}

.wp-block-search__label {
	display: flex;
	flex: auto;
	flex-wrap: nowrap;
	max-width: 100%;
	color: #b3b3b3 !important;
	border-radius: 4px !important;
}

@media (max-width: 768px) {
    .custom-search-columns {
        flex-direction: column;
    }
	
    .custom-search-columns > .search-left-column,
    .custom-search-columns > .search-right-column {
        flex: 0 0 100%;
		max-width: 100%;
		height: auto !important;
		min-height: 0 !important;
		flex-basis: auto !important;
     }
    .help-and-support-container {
        flex-direction: column;
        gap: 10px; /* Remove gap between flex items */
        padding: 0;
    }

    .help-and-support-container > * {
        width: 100%;
        margin: 0 !important;
    }
    .fixed-layout {
        flex-direction: column;
    }
    .image-side {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
    }
    .image-side img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .text-side {
        width: 100%;
    }
}


@media (max-width: 800px) {
  .video-caption-flex {
        flex-direction: column;
  }
  .video-box {
        order: 2;
  }
  .caption-box {
        order: 1;
  }
  
  .video-box {
        flex: 2;
        width: 100%;
        max-width: 100%;
        min-width:0%;
        aspect-ratio: 16 / 9;
        box-sizing: border-box;
   }
    .single-post-wrapper {
        flex-direction: column; /* Stack vertically */
    }

    .single-post-column {
            flex: 100%;
        }
    .single-post-news-column {
        flex: 100%;
        box-shadow: 0 -2px 0 #ccc;
    }

    .homepage-wrapper {
        flex-direction: column;
    }

    .intro-column,
    .main-column {
        flex: unset; /* Remove flex sizing */
        width: 100%; /* Full width */
    }
	.twitter-column {
 		box-shadow: 0 -1px 0 #ccc;
	}
	.news-column {
 		box-shadow: 0 -1px 0 #ccc;
	}
	
	.x-container {
	    width: 100%
	}

    .Structures-Example-Section {
        height: 360px;
        width:100%
    }
    .Structures-Example-Section .content {
        width:100%
    }
        
    .menu-toggle {
        display: block;
    }

    nav.custom-nav {
        flex-direction: column;
        display: none;
        width: 100%;
        height: 100%;
    }

    nav.custom-nav.show {
        display: flex;
    }

    nav.custom-nav a {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid white;
    }

    nav.custom-nav a:last-child {
        border-bottom: none;
    }

	nav.custom-nav a {
		justify-content: left;
	}

    .ButtonHolder {
        display: flex !important;/* Ensure the container uses flexbox */
        justify-content: center !important; /* Center horizontally */    
    }
    .Page-Heading {
        padding-left: 1% !important;
    
    }
    .Page-Description {
        padding-left: 1% !important;
    }
   
	.search-result-block {
	  height: 260px;
	}

  
	:root :where(p a:where(:not(.wp-element-button))) {
		color: #00aeef;
	}
	
    .news-block-post {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1; /* Makes height equal to width */
        border-radius: 5px;
        overflow: hidden;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        background-color: #d3d3d3;
        transition: background-color 0.3s ease;
    }

    .news-block-post-featured-image {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 120%;            
        height: 120%;
        object-fit: cover;
        z-index: 0;
        display: block; /* Ensure it's not hidden */
        transition: transform 0.3s ease;
    }

    .news-block-post:hover .news-block-post-featured-image {
        transform: scale(1.05);
    }

    .news-block-post-date {
        top: 10px;
        left: 10px;
        position: absolute;
        z-index: 2;
        color: #00478c !important;
        font-weight: bold;
        font-size: 12px !important;
        background-color: rgba(255, 255, 255, 0.7);
        padding: 4px 6px;
        border-radius: 3px;
        max-width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
	
    .news-block-post-title {
        top: 50px; /* Push it down below the date */
        left: 10px;
        right: 10px;
        position: absolute;
        z-index: 2;
        color: #00478c !important;
        font-weight: bold;
        font-size: 14px;
        background-color: rgba(255, 255, 255, 0.7);
        padding: 4px 6px;
        border-radius: 3px;
        max-width: 90%;
        font-size: 14px;
        white-space: normal; /* Allow wrapping */
        overflow: visible;   /* Let it grow */
        text-overflow: unset;
		word-wrap: break-word;       /* Break long words */
		overflow: hidden;            /* Hide overflow */
		text-overflow: ellipsis;     /* Add "..." if text is too long */
		display: -webkit-box;        /* For multi-line ellipsis */
		line-clamp: 3;       /* Limit to 3 lines */
		-webkit-box-orient: vertical;
    }

    .news-block-post-title a {
        text-decoration: none;
    }

    .news-block-post-title a:hover {
        text-decoration: none;
    }

	.news-block-post:hover .news-block-post-title {
	  font-size: 15px;
	  transition: font-size 0.3s ease;
	  background-color: rgba(255, 255, 255, 0.7);
	}

    /* Positioning */

    .wp-block-group {
        flex-wrap: wrap;
        width: 100%; /* Ensure the container takes up the full width */
        max-width: 100% !important;
        margin: 0 auto; /* Center the container */
    } 

    .Page-Information-Button {
        display: flex;
        justify-content: space-between;
        align-items: stretch; /* Allows children to control their own vertical alignment */
        background-color: #E3E3E3;
        padding: 5px;
        border-radius: 5px;
        width: 100%;
        height: 100px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        text-decoration: none;
        color: inherit;
        margin: 2px;
    }

    .Page-Information-Button-Title {
        color: #00478c;
        font-weight: bold;
        font-size: 18px;
    }

    .Page-Information-Button-Subtitle {
        color: #000000;
        font-size: 16px;
        top: 80;
    }

    .Page-Information-Button-Arrow {
        font-size: 20px;
        display: flex;
        align-items: center; /* Vertically center the arrow */
        margin-left: 10px;
    }

    .Page-Information-Button:hover {
        background-color: #bebebe;
    }

    .search-result-title {
    top: 5px; /* Push it down below the date */
    font-size: 22px !important;
    }

    .search-result-preview {
        top: 100px;
        font-size: 16px !important;
    }
	.Report-It-Online-Button {
	  width: 200px !important; 
	  height: 40px;
	}

    .Report-It-Online-text {
     	font-size: 18px;
    }
    .island-roads-logo {
		justify-items: center;
		align-self: center;
		width: 100% !important;            /* Ensures enough space for text */
	}
	.mobile-search-bar {
		width: 20%;
	}
	.wp-block-heading {
		width: 100%;
		padding: 0px;
	}
	.header-container {
		display: flex;
		flex-direction: column; /* Stack buttons vertically */
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
	}
	.page-container {
		width: 96%;
		justify-items: center;
	}
	.news-story-container {
    	width: 96%;
	}
	.wp-block-heading {
		width: 80%
	}
	.wp-block-post-template.is-layout-grid > * {
		flex: 1 1 49% !important; /* or use 100% for full width */
		max-width: 49%;
		width: calc(20% - 10px); 
		height: auto;
	}
}

@media (max-width: 700px) 
{
	.wp-block-post-template.is-layout-grid > * {
		flex: 1 1 98% !important; /* or use 100% for full width */
		max-width: 98%;
		height: auto;
	}
}


@media (min-width: 2000px) 

{
	.page-container {
		width: 60%;
	}
	.news-story-container{
		width: 60%;
	}
	nav.custom-nav {
		height: 40px ;
		width: 60%;
	}

	
}
  
/* ---------------------------
   MATCH ORIGINAL COVER DESIGN
   (stops theme from breaking it)
---------------------------- */

/* Prevent theme reversing the order */
#randomCoverBlock .cover-search-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100%;
    margin: 0 auto;
}

/* Search input — original design */
#randomCoverBlock .cover-search-bar input[type=search] {
    flex: 1 1 auto !important;
    padding: 16px !important;
    font-size: 18px !important;
    border: none !important;
    outline: none !important;
    background: #fff !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25) !important;
}

/* Green button — original design */
#randomCoverBlock .cover-search-bar button {
    flex: 0 0 70px !important;
    background: #6dc644 !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Icon */
#randomCoverBlock .cover-search-bar button svg {
    width: 22px;
    height: 22px;
    fill: #fff;
}

/* Heading text (from original block) */
#randomCoverBlock .cover-heading {
    color: #fff;
    font-size: 42px;
    text-align: center;
    font-weight: 300;
    margin: 40px 0 20px 0;
}

/* Prevent theme search styles overriding anything */
#randomCoverBlock .cover-search-bar * {
    border-radius: 0 !important;
}