:root {
--primary-color: #0073aa;
--primary-green: #6a8b58;
--primary-blue: #00b4e5;
--secondary-color: #9cb95f;
--tertiary-color: #afd274;
--text-color: #333;
--background-color: #f9f9f9;
--border-radius: 8px;
--spacing: 1.5rem;
--line-height: 1.5em;
--primary-font: 'Secret Crush', Georgia, 'Times New Roman', Times, serif;
--secondary-font: roboto, sans-serif;
--block-width: 800px;
--wide-block-width: 1200px;
}
html {
width: 100%;
}
body {
font-family: var(--secondary-font);
color: var(--text-color);
font-size: 1.2em;
margin: 0;
padding: 0;
background-color: var(--background-color);
width: 100%;
overflow-x: hidden;
}
main{
padding: 0;
}
.main-content a, .page-title {
color: var(--secondary-color);
}
.main-content p{
line-height: var(--line-height);
}
.site-header, h1, h2, h3 {
font-family: var(--primary-font);
}
.type-post .entry-header, .blog-header {
max-width: var(--wide-block-width);
margin: auto;
} .site-header {
background: white;
}
.top-bar {
background: white;
padding: 10px 0;
text-align: center;
font-size: 16px;
color: #444;
}
.top-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: var(--wide-block-width);
margin: auto;
padding: 0 15px;
}
.social-icons a {
margin-left: 10px;
text-decoration: none;
font-size: 20px;
}
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 15px;
border-top: 1px solid #eee;
max-width: 1200px;
margin: auto;
}
.logo img {
max-height: 80px;
}
.nav-menu {
display: flex;
list-style: none;
gap: 25px;
}
.nav-menu li a {
text-decoration: none;
color: rgb(10, 103, 164);
font-weight: 500;
}
.btn-book {
background: var(--primary-green);
font-family: var(--secondary-font);
color: #fff;
padding: 10px 25px;
font-weight: bold;
text-decoration: none;
display: inline-block;
transition: background 0.3s ease;
}
.btn-book:hover {
background: var(--secondary-color);
}  .main-nav {
position: relative;
}
.main-nav .menu {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
gap: 0px;
}
.main-nav .menu li {
position: relative;
list-style: none;
}
.main-nav .menu li a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: var(--primary-color);
font-weight: 500;
} .menu li.menu-item-has-children > a::after {
content: ' ▼';
font-size: 0.7em;
}
.menu .sub-menu {
position: absolute;
top: 100%;
left: 0;
display: none;
flex-direction: column;
background: #fff;
min-width: 220px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
z-index: 1000;
padding: 0;
}
.menu .sub-menu li {
border-top: 1px solid var(--background-color);
}
.menu .sub-menu li a {
padding: 10px 15px;
color: var(--primary-color);
white-space: nowrap;
}
.menu li.menu-item-has-children:hover > .sub-menu {
display: flex;
} .menu-toggle {
display: none;
background: none;
border: none;
font-size: 26px;
padding: 10px;
cursor: pointer;
} @media (max-width: 768px) {
.menu-toggle {
display:inline-block;
}
.menu-wrapper {
display: none;
flex-direction: column;
background: #fff;
width: 100%;
position: absolute;
top: 200px;
left: 0;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
z-index: 999;
}
.menu-wrapper.open {
display: flex;
}
.main-nav {
position: static;
min-width: 60px;
text-align: center; 
}
.main-nav .menu {
flex-direction: column;
text-align: left; 
}
.main-nav .menu li {
width: 100%;
}
.menu .sub-menu {
position: relative;
box-shadow: none;
}
.main-nav .menu li.menu-item-has-children {
width: calc(100% - 50px);
}
.menu li.menu-item-has-children > a::after {
content: ' ▶';
float: right;
position: relative;
right: -50px;
}
.menu li.open > .sub-menu {
display: flex;
}
} #site-footer {
background-color: var(--secondary-color);
color: white;
text-align: center;
padding: 30px 15px;
}
#site-footer a {
color: white;
}
.back-to-top {
float: right;
background-color: var(--primary-color); color: white;
text-decoration: none;
padding: 10px 15px;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
transition: background-color 0.3s ease;
}
.back-to-top:hover {
background-color: var(--primary-color); }
.clear-fix::after {
content: "";
display: table;
clear: both;
}  .grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2rem;
padding: 2rem 0;
margin: 30px;
} .post-card {
background: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
overflow: hidden;
perspective: 1000px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
transform-style: preserve-3d;
}
.post-card:hover {
transform: rotateY(5deg) scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.card-link {
text-decoration: none;
color: inherit;
display: block;
} .post-thumbnail {
height: 200px; overflow: hidden;
position: relative;
}
.post-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
} .post-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
}
.post-title {
color: var(--primary-green);
font-size: 1.5rem;
margin: 0 0 0.5rem;
}
.page-title {
font-family: var(--primary-font);
font-size: 2.8rem;
font-weight: normal;
}
.post-excerpt {
flex: 1;
font-size: 1rem;
color: #444;
margin-bottom: 1rem;
}
.read-more {
font-weight: bold;
color: var(--primary-color);
text-decoration: underline;
transition: color 0.3s ease;
}
.read-more:hover {
color: var(--secondary-color);
} .accordion {
background-color: var(--primary-color);
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
font-size: 18px;
margin-bottom: 5px;
border-radius: 4px;
}
.accordion:hover,
.accordion:focus {
background-color: var(--primary-green);
}
.active,
.accordion:focus {
background-color: var(--primary-green);
}
.panel {
padding: 0 18px;
display: none;
background-color: var(--background-color);
overflow: hidden;
margin-bottom: 10px;
border-radius: 0 0 4px 4px;
}
.panel p {
margin: 15px 0;
} .archive-posts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
padding: 2rem;
}
.archive-header {
height: 300px;
display: flex;
align-items: center; justify-content: center; text-align: center;
flex-direction: column; } .package-item {
border: 1px solid #eee;
padding: 1rem;
margin-bottom: 2rem;
background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.package-item a{
text-decoration: none;
}
.package-thumbnail {
position: relative;
height: 220px; overflow: hidden;
}
.package-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover; display: block;
}
.package-title {
font-size: 1.75rem;
margin-bottom: 0.5rem;
}
.package-title a {
color: var(--primary-green);
}
.package-content {
margin-top: 1rem;
}
.read-more {
display: inline-block;
margin-top: 1rem;
color: var(--primary-color);
font-weight: bold;
text-decoration: none;
}
.read-more:hover {
text-decoration: underline;
} .fade-container {
position: relative;
height: calc( 100vh - 163px );
width: 100%;
display: flex;
align-items: center; justify-content: center; text-align: center;
overflow: hidden;
z-index: 0;
}
.fade-container.small{
height: 300px;
}
.fade-container::before,
.fade-container::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 100%;
transform: translateY(-50%); background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -2;
opacity: 0;
animation: fadeImages 10s infinite ease-in-out;
}
.fade-container::before {
background-image: url(https://www.woolshedecolodge.com.au/wp-content/themes/woolshedecolodge/assets/header-1.jpeg);
animation-delay: 0s;
}
.fade-container::after {
background-image: url(https://www.woolshedecolodge.com.au/wp-content/themes/woolshedecolodge/assets/header-1.jpeg);
animation-delay: 5s;
}
@keyframes fadeImages {
0%, 45% { opacity: 0; }
50%, 95% { opacity: 1; }
100% { opacity: 0; }
} .overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4); z-index: -1;
}
.fade-content {
position: relative;
z-index: 1;
max-width: 600px;
padding: 2rem;
}
.fade-content * {
color: white;
} .iframe-wrapper {
position: relative;
width: 100%;
height: 100%;
min-height: 650px;
overflow: hidden;
}
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.iframe-wrapper::after {
content: "";
display: table;
clear: both;
} article.post{
background-color: #fff;
} .custom-post-grid .grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 2rem;
}
.editor-styles-wrapper .custom-post-grid { }  .site-content, .entry-content {
max-width: 800px;
width: 800px;
margin: 0 auto;
padding: 1.5rem;
}
.entry-header{
padding: 1.5rem;
}
@media (max-width: 900px) {
.site-content, .entry-content {
max-width: none;
width: auto;
}
}
@media (max-width: 450px) {
.main-header .book-now{
display:none;
}
}
.wp-block-columns {
max-width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0 !important;
}
.wp-block-cover a{
text-decoration: none;
}
.wp-block-media-text a{
text-decoration: none;
color: var(--primary-green);
font-family: var(--primary-font);
font-size: 1.2em;
} .alignwide {
max-width: var(--wide-block-width);
margin-left: auto !important;
margin-right: auto !important;
display: block;
} .alignfull {
max-width: 100vw;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
box-sizing: border-box;
} .wp-block {
margin-bottom: 1.5rem;
} .pagination {
display: flex;
justify-content: center;
gap: 1rem;
margin: 3rem 0;
padding: 1rem;
flex-wrap: wrap;
position: relative;
overflow: hidden;
}
.pagination .page-numbers {
position: relative;
z-index: 1;
display: inline-block;
padding: 0.75rem 1.5rem;
font-size: 1.1rem;
font-weight: bold;
color: #fff;
border-color: #000;
background: #fff;
color: #000;
text-decoration: none;
transition: all 0.3s ease, transform 0.2s;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.pagination .page-numbers:hover {
background: #fff;
color: #0a0a0a;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 0 30px var(--primary-green);
}
.pagination .current {
background: var(--primary-green);
border-color: #fff;
color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(255,255,255,0.3);
animation: bounceHighlight 1.5s infinite ease-in-out;
}
.pagination .next {
border-color: #000;
background: #fff;
color: #000;
} @keyframes bounceHighlight {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
}