@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&display=swap');
    
    /*=====================================================================
   1️⃣  RESET & BASE TYPOGRAPHY
   =====================================================================*/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html { font-size: 90%; }               /* 1 rem = 16 px */
body {
    font-family: 'EB Garamond', serif;
    line-height: 1.6;
    color: #222;
    background: #fdfdfd;
    overflow-x: hidden;                /* safety net */

}

/*=====================================================================
   2️⃣  SIDE GRADIENTS – always visible on any viewport size
   =====================================================================*/
body::before,
body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: 15vw;               /* fluid width for normal screens */
    min-width: 25px;           /* never shrink below 30 px */
    z-index: -2;               /* behind everything */
    pointer-events: none;
}
body::before { left: 0;  background: linear-gradient(to bottom, #b20000, #ff4500, #800080); }
body::after  { right: 0; background: linear-gradient(to bottom, #800080, #ff4500, #b20000); }

/*=====================================================================
   3️⃣  WHITE CONTENT PANE (wrapper) – scales with viewport
   =====================================================================*/
.wrapper {
    background: #ffffff;                     /* solid white */
    max-width: 960px;                        /* never grow larger than 960 px */
    margin: 0px auto;                          /* centre horizontally */
    margin-top: 0;
    padding: 0 37px 1.5rem 37px;    /* breathing room + 37 px left/right and 0 bottom so gradients stay visible */
    padding-top: 0;                 /* breathing room + 30 px left/right so gradients stay
    position: relative;             /* stacking context for gradients */
    z-index: 0;                     /* sits above gradient strips */
    background-clip: content-box;   /* *** crucial: keep background only on the content,
                                    leaving 30 px padding transparent: the gradients show *** */

}
.wrapper img { max-width: 100%; height: auto; }

/*=====================================================================
   16️⃣  CONTENT WRAPPER (inside .wrapper)
   =====================================================================*/
.content-wrapper {
    width: 100%;
    max-width: 640px;
    margin: 0px auto;
    padding: 0 1rem;
}

/* Add this block here */
@media (max-width: 600px) {
    .content-wrapper {
        padding: 0 1.5rem;
        max-width: 500px;
    }
}


/*=====================================================================
   4️⃣  HEADER (logo, banner)
   =====================================================================*/
header { text-align: center; padding: 0; }
.logo-wrapper { margin-bottom: .5rem; }
header .logo { max-height: 140px; height: auto; width: auto; }
.banner-wrapper { margin: 0; padding: 0; }
.banner { display: block; max-width: 100%; height: auto; }


/*=====================================================================
   6️⃣  HEADINGS AND FONT STYLING INDENT
   =====================================================================*/
h1 {
    font-family: 'Charm', system-ui, -apple-system, serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.4;
    margin-top: 1.5rem;
    margin-bottom: .5rem;
    color: #004400;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: normal;
}
h2, h3, h4, h5, h6 {
    font-family: Helvetica, sans-serif;
    color: #004400;
    overflow-wrap: anywhere;
    word-break: normal;
}
h2 { font-size: 1.5rem; margin-top: 0.4rem; margin-bottom: .5rem; }
h3 { font-size: 1.3rem; margin-top: 1.5rem; margin-bottom: .5rem; }
h4 { font-size: 1.15rem; margin-top: 1.5rem; margin-bottom: .5rem; }
h5 { font-size: 1rem;    margin-top: 1.5rem; margin-bottom: .5rem; }
h6 { font-size: .9rem;   margin-top: 1.5rem; margin-bottom: .5rem; }
p.jump_right {
  position: relative;
  left: 20px;
}
div.indent50 {
  text-indent: 50px;
  text-align: justify;
  text-justify: inter-word;
}

.custom-font {
  font-family: 'Charm', system-ui, -apple-system, serif;
  font-size: 120%;
}

/*=====================================================================
   7️⃣  MAIN SECTIONS
   =====================================================================*/
main > section { margin-bottom: 2rem; }

/*=====================================================================
   8️⃣  INTRO PARAGRAPH – purple & centred
   =====================================================================*/
.intro-text {
    color: #800080;
    text-align: center;
    margin: 1.4rem 0;
    font-size: 1.2rem;
}

/*=====================================================================
   9️⃣  FOOTER
   =====================================================================*/
footer {
    text-align: center;
    font-size: .875rem;
    color: #555;
    /*border-top: 1px solid #ddd; >> no line above footer*/
    padding: 1rem 0;
    
    /*margin-top: 2rem; adjusted below */
    margin: 0 auto;
    /*below is changed*/
    width: 100%;
    background: #ffffff;
    max-width: 960px;
    position: relative;
    z-index: 100;
    padding-bottom: 0;
}
.social-links { 
    margin-top: .5rem;
}
.social-links a {
    display: inline-block;
    margin: 0 .5rem;
    color: #fff;
    text-decoration: none;
}
.social-links a:hover,
.social-links a:focus { opacity: .8; }

/*=====================================================================
   10️⃣  POEM STYLING
   =====================================================================*/
.poem {
    width: 100%;
    max-width: 720px;
    margin: .2rem auto;
    padding: 1rem;
    text-align: center;
    font-family: 'EB Garamond', serif;
    font-size: 0.9rem;
    line-height: 1.2rem;
    color: #333;
}
.poem p { margin: .6rem 0; }
.poem footer {
    margin-top: .8rm;
    font-size: .9rem;
    font-style: italic;
    color: #555;
}

/*=====================================================================
   11️⃣  LANGUAGE TOGGLE
   =====================================================================*/
.lang-toggle-container {
    text-align: center;
    margin-top: 0.1rem;
}
.lang-toggle-container a {
    color: #2E2EFF;
    text-decoration: underline;
    font-weight: 500;
    font-size: .8rem;
    cursor: pointer;
}
.lang-toggle-container a:hover,
.lang-toggle-container a:focus {
    background: rgba(46,46,255,.15);
}

/* Helper – hide the English poem initially */
.hidden { display: none !important; }


/*=====================================================================
   5️⃣  NAVIGATION – dark‑green bar (global)
   =====================================================================*/
nav {
    background: #004400;               /* green bar – always present */
    width: 100%;
    display: flex;
    justify-content: flex-start;       /* start from the left */
    align-items: center;
    position: relative;
    box-sizing: border-box;
    padding: 0 0.5rem;                 /* tiny side padding */
}


/* Hamburger button – hidden on desktop, visible on mobile */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px;
}
.hamburger .bar {
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius: 2px;
}

/* Navigation groups (lists) */
.nav-main {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.nav-main.left  { margin-right: auto; }   /* Home stays left */
.nav-main.right { margin-left: auto; }    /* Contact stays right */

/*--------------------------------------------------------------
   DROPDOWN MENU (shared)
  --------------------------------------------------------------*/
nav li { position: relative; }
nav a {
    color: #fff; /*text color green menubar main menu white*/
    text-decoration: none;
    padding: .6rem .8rem;
    display: block;
    transition: background .2s, color .2s;
}

/* hover colour adjustment */
nav a:hover,
nav a:focus {
    background: rgba(46,46,255);
    color: #fff;
    text-decoration: underline;
}

/* Desktop dropdown (hover/focus) */
nav ul.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff; /*White background options menubar */
    /* background: rgba(46,46,255,.33); older color*/
    color: #000; /*black text in dropdown options*/
    min-width: 180px;
    border: 1px solid #ddd; /*tiny border around the dropdown block*/
    z-index: 1000;
}
nav ul.dropdown a { color: #000; }
nav li:hover > ul.dropdown,
nav li:focus-within > ul.dropdown { display: block; }

nav ul.dropdown a:hover,
nav ul.dropdown a:focus {
    background: rgb(46,46,255); /*blue background dropdown hover*/
    color: #fff; /*white text dropdown options on hover*/
}
/* Remove default bullets from every dropdown list */
nav ul.dropdown,
nav ul.dropdown li {
    list-style: none;
    margin: 0;
    padding: 0;
}

a:active {
	color: #fff;
	/*background-color: #079C14;*/
	text-decoration: underline;
}

/*=====================================================================
    BUTTON IS LINK (Sumup bookings)
   =====================================================================*/
.button-is-link {
  color: #fff;
  background-color: #2E2EFF; /* or any desired color */
   border: none;
    padding: .6rem 1.2rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .2s ease;
    border-radius: 0;
    margin: 0 auto; /* Centers horizontally */

}
.button-is-link:hover,
.button-is-link:focus { 
    background-color: rgba(46,46,255,.66); 
    text-decoration: underline;
    text-decoration-color: #fff;
}


/*CENTER THE BUTTON */
.center-button {
  height: 200px;
  justify-content: center; /* Centers horizontally */
  position: relative;
  border: 0;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}




/*=====================================================================
   12️⃣  PRIMARY BUTTON (contact form)
   =====================================================================*/
.btn-primary {
    background-color: #2E2EFF;
    color: #fff;
    border: none;
    padding: .6rem 1.2rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .2s ease;
    border-radius: 0;
}
.btn-primary:hover,
.btn-primary:focus { 
    background-color: rgba(46,46,255,.66); 
    text-decoration: underline;
    text-decoration-color: #fff;
}

/*=====================================================================
   13️⃣  CONTACT FORM STYLING
   =====================================================================*/
#contact {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 1.5rem;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
}
#contact h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: #004400;
    text-align: center;
}
#contact form label {
    display: block;
    margin-top: 1rem;
    margin-bottom: .25rem;
    font-weight: 500;
    color: #333;
}
#contact form input[type="email"],
#contact form input[type="text"],
#contact form textarea {
    width: 100%;
    padding: .6rem .8rem;
    font-size: 1rem;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fff;
    color: #222;
    transition: border-color .2s, box-shadow .2s;
}
#contact form input[type="email"]:focus,
#contact form input[type="text"]:focus,
#contact form textarea:focus {
    outline: none;
    border-color: #2E2EFF;
    box-shadow: 0 0 4px rgba(46,46,255,.25);
}
#contact form textarea { min-height: 120px; resize: vertical; }
#contact .btn-primary { margin-top: 1.5rem; width: 100%; font-size: 1.1rem; padding: .8rem; }
#contact .success-msg { margin-top: 1rem; text-align: center; }
.success-msg { margin-top: 1rem; font-size: .95rem; color: #004400; }

/*=====================================================================
   14️⃣  BODY LINKS (outside navigation)
   =====================================================================*/
a:not(nav a):not(nav a *) {
    color: #2E2EFF;
    text-decoration: underline;
    opacity: 1;
}
a:not(nav a):not(nav a *):visited { color: #800080; }
a:not(nav a):not(nav a *):hover,
a:not(nav a):not(nav a *):focus {
    background: rgba(46,46,255,.15);
}

/*=====================================================================
   15️⃣  SECTION IMAGES
   =====================================================================*/
.section-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 3rem;
    margin-bottom: 0;
}

/*=====================================================================
   17️⃣  TEXT‑HEAVY BLOCKS (poems, paragraphs, headings)
   =====================================================================*/
.text-wrapper,
.poem {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/*=====================================================================
   18️⃣  ACCESSIBILITY HELPERS
   =====================================================================*/
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);          /* hides the element completely */
    white-space: nowrap;
    border: 0;
}


/*--------------------------------------------------------------
   RESPONSIVE OVERRIDES
  --------------------------------------------------------------*/
/* Desktop – full menu, hide hamburger */
@media (min-width: 861px) {
    .hamburger { display: none; }

    .nav-main.right {
        display: flex;                /* ensure it’s visible */
        flex-direction: row;
        flex-wrap: wrap;              /* wrap if it runs out of space */
        gap: 0.5rem;                  /* tighter spacing on very tight screens */
    }
}

/* Mobile – show hamburger, collapse right‑hand list */
@media (max-width: 860px) {
    .hamburger { display: flex; }

    .nav-main.right {
        display: none;                /* hidden until hamburger toggles */
        position: absolute;
        top: 100%;
        right: 0px;
        background: #004400;
        flex-direction: column;
        width: 100%;
        padding: .5rem 0;
        box-shadow: 0 4px 8px rgba(0,0,0,.15);
        z-index: 1000;
    }
    .nav-main.right.active { display: flex; }

    /* Keep Home (left) and Contact (last <li>) visible on the bar */
    .nav-main.left,
    .nav-main.right > li:last-child { display: flex; }

    /* Mobile dropdowns become static blocks */
    .nav-main.right ul.dropdown {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        background: #fff;
        color: #000;
        border: 1px solid #ddd;
        box-shadow: none;
        margin-top: .3rem;
        padding-left: 0rem;
    }
    .nav-main.right ul.dropdown a { color: #000; }
}
/* Add this to make hover text white */
.nav-main.right ul.dropdown a:hover,
.nav-main.right ul.dropdown a:focus {
    color: #fff;
}

/* Very small screens – stack nav items vertically */
@media (max-width: 600px) {
    nav ul.nav-main { flex-direction: column; gap: .5rem; }
}


/*=====================================================================
   19️⃣  BLOCKQUOTE CLEANUP
   =====================================================================*/
blockquote {
    border: none;
    margin: 0;
    padding: 0;
}