/*
Theme Name: Identity Studio
Template: Divi
*/

@import url("../Divi/style.css");

/* ==========================================================
   COLOURS
   ========================================================== */

/*#page-container {
    padding-top: 110px !important;
}*/

body,
#page-container,
#main-content {
    background-color: #0E1A2B;
    color: #A9B4C3;
}


/* ==========================================================
   GENERAL LAYOUT
   ========================================================== */

/* Default Divi header offset */
#page-container {
    padding-top: 70px !important;
}


/* ==========================================================
   LINKS
   ========================================================== */

a {
    transition: all 0.3s ease-in-out;
}

footer a,
.light-link a {
    color: #4BAE7A !important;
    border-bottom: 1px solid !important;
    font-weight: 700 !important;
}

footer a:hover,
.light-link a:hover {
    color: #A9B4C3 !important;
    border-bottom-color: #A9B4C3 !important;
}

a.icon {
    border-bottom: none !important;
}


/* ==========================================================
   DEFAULT DIVI HEADER
   ========================================================== */

#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a,
#top-menu li.current-menu-ancestor > a,
#top-menu li.current_page_ancestor > a {
    color: #4BAE7A !important;
}

#top-menu-nav > ul > li > a:hover {
    color: #63C48F !important;
}


/* ==========================================================
   MOBILE MENU
   ========================================================== */

.menu-icon {
    font-size: 1.6em !important;
}

#main-header .et_mobile_menu {
    /*background-color: #FFFFFF !important;*/
    left: 0;
    padding: 0 !important;
}

.et_mobile_menu .menu-item a {
    font-size: 1.2em !important;
}

.et_mobile_menu .menu-icon a {
    font-size: 1em !important;
}

/* Text beside Theme Builder mobile menu icon */
.et_mobile_nav_menu::before {
    content: "MENU";
    position: absolute;
    right: 40px;
    margin-top: 5px;
    color: #333333;
    font-family: "Lato", Helvetica, Arial, Lucida, sans-serif;
    font-size: 16px;
    font-weight: 700;
}

/* Text beside default Divi mobile menu icon */
/*#et_mobile_nav_menu::before {
    content: "MENU";
    position: absolute;
    right: 33px;
    bottom: 30px;
    color: #333333;
    font-family: "Lato", Helvetica, Arial, Lucida, sans-serif;
    font-size: 16px;
}*/

/* Change hamburger to X when open */
.mobile_nav.opened .mobile_menu_bar::before {
    content: "\4d";
}

/* Remove mobile menu top border */
.et_mobile_menu {
    border-top: 0;
}

/* Centre mobile menu items */
.et_mobile_menu li {
    text-align: center !important;
}

.et_mobile_menu li li,
.et_mobile_menu li ul {
    padding-left: 0 !important;
}

/* Full-width mobile menu */
.et_mobile_menu {
    min-width: 100vw;
    margin-left: -10vw;
    padding-top: 0 !important;
}

html {
    height: -webkit-fill-available;
}

/* Remove opening delay */
.mobile_nav.opened .et_mobile_menu {
    display: block !important;
}

.et_mobile_menu a {
    font-weight: 400 !important;
}


/* ==========================================================
   FLUID TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3 {
    letter-spacing: -0.015em;
}

h1 {
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.05em;
}

h2 {
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.1em;
}

h3 {
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.15em;
}

h4 {
    font-size: clamp(23px, 2.8vw, 32px);
    line-height: 1.2em;
}

h5 {
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.25em;
}

h6 {
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.3em;
}

.single-post h1,
.single-post .et_pb_post_title h1 {
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.05em;
}

body,
.et_pb_text_inner,
.et_pb_post_content {
    font-size: clamp(18px, 1.3vw, 20px);
    line-height: 1.7em;
}

/* ==========================================================
   BLOCKQUOTES
   ========================================================== */

.single-post .et_pb_post_content blockquote {
    margin: 2em 0;
    padding: 0.5em 0 0.5em 1.5em;
    border-left: 3px solid #4BAE7A;
}

.single-post .et_pb_post_content blockquote p {
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.6em;
}


/* ==========================================================
   DEFAULT DIVI FOOTER
   ========================================================== */

#main-footer .footer-widget h2,
#main-footer .footer-widget h3,
#main-footer .footer-widget h4,
#footer-widgets .footer-widget h2,
#footer-widgets .footer-widget h3,
#footer-widgets .footer-widget h4 {
    margin-bottom: 16px;
    font-size: clamp(24px, 2.5vw, 34px) !important;
    line-height: 1.15em;
}

#main-footer,
#main-footer p,
#main-footer li,
#main-footer a,
#footer-widgets,
#footer-widgets p,
#footer-widgets li,
#footer-widgets a {
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.6em;
}


/* Travel Blog grid */
.archive-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 5.5%;
    align-items: start;
}

/* Individual card */
.archive-card-grid > .archive-card {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;

    overflow: hidden;
    background: #16253B;
    border: 1px solid #243347;
    border-radius: 6px;
}

/* Image */
.archive-card .et_pb_image,
.archive-card .et_pb_image_wrap,
.archive-card .et_pb_image img {
    display: block;
    width: 100%;
    margin: 0 !important;
}

/* Title */
.archive-card-title {
    margin: 0 !important;
/*    padding: 16px 18px 0 !important;*/
}

.archive-card-title h2,
.archive-card-title h3 {
    margin: 0 !important;
    font-size: clamp(25px, 2.1vw, 34px) !important;
    line-height: 1.12em;
}

/* Location and date */
.archive-card-meta {
    margin: 0 !important;
    padding: 12px 18px 0 !important;
}

.archive-card-meta,
.archive-card-meta .et_pb_text_inner,
.archive-card-meta p {
    margin: 0 !important;
    color: #4BAE7A;
    font-size: 15px;
    line-height: 1.45em;
}

/* Button */
.archive-card .et_pb_button_module_wrapper {
    margin: 0 !important;
    padding: 20px 18px 0px !important;
}

/* Tablet */
@media (max-width: 1200px) {
    .archive-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }
}

/* Phone */
@media (max-width: 767px) {
    .archive-card-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}


/* Archive buttons: override Divi's unequal generated padding */
body #page-container .archive-card a.et_pb_button.et_pb_module,
body #page-container .archive-card a.et_pb_button.et_pb_module:hover {
    padding-top: 0.3em !important;
    padding-right: 1em !important;
    padding-bottom: 0.3em !important;
    padding-left: 1em !important;
    text-align: center !important;
}

/* Hide Divi's empty loop message on the Species archive */
.category-species .not-found-title,
.category-species .entry p {
    display: none !important;
}

/* ==========================================================
   HOMEPAGE CATEGORY LABELS
   ========================================================== */

.archive-card-type-module {
    margin: 0 !important;
    padding: 16px 18px 0 !important;
}

.archive-card-type-module .et_pb_text_inner {
    margin: 0;
}

.archive-card-type {
    display: inline-block;
    padding: 5px 10px;

    border: 1px solid currentColor;
    border-radius: 3px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;

    transition: .25s;
}

/* Travel */

.archive-card-type--travel {
    color:#4BAE7A;
    background:rgba(75,174,122,.10);
}

.archive-card-type--travel:hover {
    color:#0E1A2B;
    background:#4BAE7A;
}

/* Species */

.archive-card-type--species {
    color:#63A9C7;
    background:rgba(99,169,199,.10);
}

.archive-card-type--species:hover {
    color:#0E1A2B;
    background:#63A9C7;
}


/* ==========================================================
   CATEGORY META COLOURS
   ========================================================== */

.archive-card:has(.archive-card-type--species) .archive-card-meta,
.archive-card:has(.archive-card-type--species) .archive-card-meta *{
    color:#63A9C7 !important;
}

.archive-card:has(.archive-card-type--travel) .archive-card-meta,
.archive-card:has(.archive-card-type--travel) .archive-card-meta *{
    color:#4BAE7A !important;
}


/* ==========================================================
   CATEGORY BUTTONS
   ========================================================== */

.birley-card-button-module{
    margin:0!important;
    padding:18px 18px 20px!important;
}

.birley-card-button{
    display:inline-block;

    padding:.45em 1.15em;

    border:2px solid currentColor;
    border-radius:3px;

    text-decoration:none;

    transition:.25s;
}

/* Travel */

.birley-card-button--travel {
    color: #4BAE7A;
    border-color: #4BAE7A;
    background: rgba(75,174,122,.10);
}

.birley-card-button--travel:hover {
    color: #0E1A2B;
    background: #4BAE7A;
}

/* Species */

.birley-card-button--species {
    color: #63A9C7;
    border-color: #63A9C7;
    background: rgba(99,169,199,.10);
}

.birley-card-button--species:hover {
    color: #0E1A2B;
    background: #63A9C7;
}


/* introduction paragraph */
body .post-introduction .et_pb_text_inner p {
    color: #E8ECEF !important;
    font-size: clamp(22px, 1.8vw, 30px) !important;
    font-weight: 300 !important;
	line-height: 1.55em !important;}

/* Enlarged opening paragraph on posts and standard-editor pages */
.single-post .et_pb_post_content > p:first-of-type,
body.page:not(.et_pb_pagebuilder_layout)
.et_pb_post_content > p:first-of-type {
    color: #E8ECEF !important;
    font-size: clamp(22px, 1.8vw, 30px) !important;
    font-weight: 300 !important;
    line-height: 1.55em !important;
}

/* Homepage archive buttons: remove hidden icon spacing */
/* Homepage archive links */
.homepage-cta {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 300px;
    min-height: 58px;

    margin-left: auto;
    padding: 12px 18px;

    box-sizing: border-box;

    font-family: "Lato", Helvetica, Arial, Lucida, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.25em;
    text-align: center;
    text-decoration: none;

    border: 2px solid;
    border-radius: 4px;

    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

/* Remove Text module paragraph spacing */
.homepage-cta-module,
.homepage-cta-module .et_pb_text_inner,
.homepage-cta-module p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Travel */
.homepage-cta--travel {
    color: #4BAE7A;
    border-color: #4BAE7A;
    background: rgba(75, 174, 122, 0.10);
}

.homepage-cta--travel:hover {
    color: #0E1A2B;
    background: #4BAE7A;
}

/* Species */
.homepage-cta--species {
    color: #63A9C7;
    border-color: #63A9C7;
    background: rgba(99, 169, 199, 0.10);
}

.homepage-cta--species:hover {
    color: #0E1A2B;
    background: #63A9C7;
}

/* Mobile only */
@media (max-width: 767px) {

    .homepage-cta-module {
        text-align: left !important;
    }

    .homepage-cta-module a {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

}

/* ==========================================================
   SINGLE POST CATEGORY LABEL
   Larger and left-aligned above the post title
   ========================================================== */

.single-post .archive-card-type-module {
    margin: 0 0 26px 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.single-post .archive-card-type-module .et_pb_text_inner,
.single-post .archive-card-type-module p {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* Larger label on individual post pages */
.single-post .archive-card-type {
    display: inline-block;
    margin: 0 !important;
    padding: 7px 12px;

    font-size: 14px;
    line-height: 1.2em;
    letter-spacing: 0.08em;
}


/* ==========================================================
   MORE WILDLIFE STORIES
   ========================================================== */

.related-post-list {
    display: block !important;
    width: 100% !important;
}

/* Each repeated loop item */
.related-post-list > .related-post-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 18px 0 !important;

    background: transparent !important;
    border-bottom: 1px solid #243347;
}

.related-post-list > .related-post-item:last-child {
    border-bottom: 0;
}

/* Remove Divi module spacing */
.related-post-item .et_pb_module {
    margin: 0 !important;
    padding: 0 !important;
}

/* Small category badge */
.related-post-type {
    margin: 0 0 8px !important;
    padding: 0 !important;
}

.related-post-type .et_pb_text_inner,
.related-post-type p {
    margin: 0 !important;
    padding: 0 !important;
}

.related-post-type .archive-card-type {
    padding: 3px 7px;
    font-size: 9px;
    line-height: 1.2em;
}

/* Post title */
.related-post-item .et_pb_heading {
    margin: 0 !important;
    padding: 0 !important;
}

.related-post-item h2,
.related-post-item h3,
.related-post-item h4 {
    margin: 0 !important;
    padding: 0 !important;

    font-size: clamp(20px, 1.5vw, 26px) !important;
    line-height: 1.2em !important;
}

.related-post-item h2 a,
.related-post-item h3 a,
.related-post-item h4 a {
    color: #E8ECEF !important;
    text-decoration: none;
}

.related-post-item h2 a:hover,
.related-post-item h3 a:hover,
.related-post-item h4 a:hover {
    color: #4BAE7A !important;
}

/* Location and trip date */
.related-post-item .et_pb_text {
    margin: 7px 0 0 !important;
    padding: 0 !important;
}

.related-post-item .et_pb_text_inner,
.related-post-item .et_pb_text_inner p {
    margin: 0 !important;
    padding: 0 !important;
}

.related-post-item .birley-related-meta {
    color: #A9B4C3;
    font-size: 14px;
    line-height: 1.4em;
}

.related-post-item .birley-related-separator {
    color: #4BAE7A;
}

/* Small category badges in More Wildlife Stories */
body.single-post #page-container
.related-post-item
.related-post-type
.archive-card-type {
    margin: 0 !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
    line-height: 1.2em !important;
    letter-spacing: 0.08em !important;
}

body.single-post #page-container
.related-post-item
.related-post-type {
    margin: 0 0 8px !important;
    padding: 0 !important;
}

body.single-post #page-container
.related-post-item
.related-post-type .et_pb_text_inner,
body.single-post #page-container
.related-post-item
.related-post-type p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide image titles on hover */
img {pointer-events:none!important}

/* Allow the default Divi logo link to be clicked */
#main-header .logo_container,
#main-header .logo_container a,
#main-header #logo {
    pointer-events: auto !important;
}


/* ==========================================================
   HOMEPAGE IMAGE-ONLY SLIDER
   Divi controls the responsive aspect ratio;
   this makes its internal slides fill that frame.
   ========================================================== */

.home-hero-slider {
    width: 100% !important;
    overflow: hidden;
}

/* Make Divi's internal slider layers fill the module ratio */
.home-hero-slider .et_pb_slides,
.home-hero-slider .et_pb_slide {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
}

/* Make every slide background fill its frame */
.home-hero-slider .et_pb_slide {
    background-size: cover !important;
    background-position: center center;
    background-repeat: no-repeat !important;
}

/* Image-only slides do not need Divi's content padding */
.home-hero-slider .et_pb_container,
.home-hero-slider .et_pb_slider_container_inner,
.home-hero-slider .et_pb_slide_description {
    height: 100% !important;
    min-height: 100% !important;
}

.home-hero-slider .et_pb_slide_description {
    margin: 0 !important;
    padding: 0 !important;
}

/* Keep navigation visible */
.home-hero-slider .et-pb-slider-arrows,
.home-hero-slider .et-pb-controllers {
    z-index: 10;
}


/* Homepage About CTA */
.homepage-cta--about {
    color: #E8ECEF;
    border-color: #E8ECEF;
    background: rgba(232, 236, 239, 0.08);
}

.homepage-cta--about:hover {
    color: #0E1A2B;
    border-color: #E8ECEF;
    background: #E8ECEF;
}

/* Latest Photos */
.homepage-cta--latest {
    color: #B8AA92;
    border-color: #B8AA92;
    background: rgba(184, 170, 146, 0.10);
}

.homepage-cta--latest:hover {
    color: #0E1A2B;
    background: #B8AA92;
}

/* ==========================================================
   PRIMARY NAVIGATION COLOURS
   ========================================================== */

/* Default active state: Home and About */
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a,
#top-menu li.current-menu-ancestor > a,
#top-menu li.current_page_ancestor > a {
    color: #E8ECEF !important;
}

/* Travel: hover and WordPress active states */
#top-menu li.menu-travel > a:hover,
#top-menu li.menu-travel > a:focus,
#top-menu li.menu-travel.current-menu-item > a,
#top-menu li.menu-travel.current-menu-ancestor > a,
#top-menu li.menu-travel.current-menu-parent > a,
#top-menu li.menu-travel.current_page_item > a,
#top-menu li.menu-travel.current-post-ancestor > a,
#top-menu li.menu-travel.current-post-parent > a {
    color: #4BAE7A !important;
}

/* Species: hover and WordPress active states */
#top-menu li.menu-species > a:hover,
#top-menu li.menu-species > a:focus,
#top-menu li.menu-species.current-menu-item > a,
#top-menu li.menu-species.current-menu-ancestor > a,
#top-menu li.menu-species.current-menu-parent > a,
#top-menu li.menu-species.current_page_item > a,
#top-menu li.menu-species.current-post-ancestor > a,
#top-menu li.menu-species.current-post-parent > a {
    color: #63A9C7 !important;
}

/* Explicit category archive states */
body.category-travel-blog #top-menu li.menu-travel > a {
    color: #4BAE7A !important;
}

body.category-species #top-menu li.menu-species > a {
    color: #63A9C7 !important;
}

/* Latest Photos: hover and WordPress active states */
#top-menu li.menu-latest > a:hover,
#top-menu li.menu-latest > a:focus,
#top-menu li.menu-latest.current-menu-item > a,
#top-menu li.menu-latest.current-menu-ancestor > a,
#top-menu li.menu-latest.current-menu-parent > a,
#top-menu li.menu-latest.current_page_item > a,
#top-menu li.menu-latest.current-post-ancestor > a,
#top-menu li.menu-latest.current-post-parent > a {
    color: #B8AA92 !important;
}

/* Explicit Monthly Updates archive state */
body.category-monthly-updates #top-menu li.menu-latest > a {
    color: #B8AA92 !important;
}

/* Protect email link */
.protected-email,
.protected-email-link {
    color: #4BAE7A;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.protected-email-link:hover,
.protected-email-link:focus {
    color: #A9B4C3;
	text-decoration: underline;
    text-underline-offset: 3px;
}