/* css/base.css */

/* Basic reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

/* Layout */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  font-weight: 700;
  font-size: 1.25rem;
  margin-left:60px;
}
.logo a{text-decoration:none;cursor:pointer;}
#DioceseCrest{position:absolute;top:0px;left:10px;z-index:100;width:70px;height:100px;background-repeat:no-repeat;background-position:center;background-size:contain;}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.main-nav a {
  text-decoration: none;
  font-size: 0.95rem;
}

.theme-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.theme-switcher select {
  padding: 0.25rem 0.5rem;
}

/* header block with image set in theme CSS */
.header {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
}

.parish-image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.header-overlay {
  position: relative;
  max-width: 40rem;
  margin: 2rem;
  padding: 1.5rem;
}

/* Content sections */
.content-section {
  padding: 3rem 1.5rem;
}

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 2rem;
  align-items:stretch;
}

.section-image {
  flex: 1 1 50%;
  min-height: 200px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.section-text {
  flex: 1 1 50%;
}

.section-text h2 {
  margin-bottom: 0.75rem;
  font-size: 1.6rem;
}

.section-text p {
  font-size: 1rem;
}

/* Layout variants (image left or right) */
.layout-image-left .section-image {
  order: 0;
}

.layout-image-left .section-text {
  order: 1;
}

.layout-image-right .section-image {
  order: 1;
}

.layout-image-right .section-text {
  order: 0;
}

/* Footer */
.site-footer {
  text-align: center;
  padding: 1.5rem;
  font-size: 0.9rem;
}

.editablePage{
  position: relative;              /* needed for the tab positioning */
  padding:12px;
  border: 1px solid transparent;   /* baseline so layout doesn't jump */
  transition: border-color 0.15s ease;
  cursor:pointer;
}

.editableSection{
  position: relative;              /* needed for the tab positioning */
  padding:12px;
  border: 1px solid transparent;   /* baseline so layout doesn't jump */
  transition: border-color 0.15s ease;
  cursor:pointer;
}

.editable {
  position: relative;              /* needed for the tab positioning */
  padding:12px;
  border: 1px solid transparent;   /* baseline so layout doesn't jump */
  transition: border-color 0.15s ease;
  cursor:pointer;
}

/* Border on hover */
.editable:hover, .editableSection:hover:not(:has(.editable:hover)), .editablePage:hover:not(:has(.editableSection:hover)) {
  border-color: #007bff;           /* change to your brand colour */
}

/* "Edit" tab */
.editable::after, .editableSection::after, .editablePage::after {
  content: "edit";
  position: absolute;
  top: -10px;
  right: 10px;
  padding: 2px 8px;
  font-size: 11px;
  background: #007bff;
  color: #fff;
  border-radius: 3px 3px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0;
  pointer-events: none;            /* don't block clicks */
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  border-radius:3px;
}

.editablePage::after {
  content: "page edit";
  top: -2px;
  z-index:100;
  position:fixed;
}
.editTextLower::after{ top:-2px;}

/* Show tab on hover */
.editable:hover::after, .editableSection:hover:not(:has(.editable:hover))::after, .editablePage:hover:not(:has(.editableSection:hover))::after {
  opacity: 1;
  transform: translateY(0);
}
.Draft {
  position: relative;              /* needed for the tab positioning */
  padding:12px;
  border: 1px solid transparent;   /* baseline so layout doesn't jump */
  transition: border-color 0.15s ease;
  cursor:pointer;
  border-color: #FFCC00;
  opacity:0.5;
}
.Draft::before {
  content: "Draft";
  position: absolute;
  top: -13px;
  left: 10px;
  padding: 2px 8px;
  font-size: 11px;
  background: #FFCC00;
  color: #fff;
  border-radius: 3px 3px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 1;
  pointer-events: none;            /* don't block clicks */
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  border-radius:3px;
}
.Draft:hover::before {opacity:0;}
.Deleted {
  position: relative;              /* needed for the tab positioning */
  padding:12px;
  border: 1px solid transparent;   /* baseline so layout doesn't jump */
  transition: border-color 0.15s ease;
  cursor:pointer;
  border-color: #DD0000;
  opacity:0.5;
}
.Deleted::before {
  content: "Deleted";
  position: absolute;
  top: -13px;
  left: 10px;
  padding: 2px 8px;
  font-size: 11px;
  background: #DD0000;
  color: #fff;
  border-radius: 3px 3px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 1;
  pointer-events: none;            /* don't block clicks */
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  border-radius:3px;
}
.Deleted:hover::before {opacity:0;}


/* Responsive behaviour */
@media (max-width: 900px) {
  .section-inner {
    flex-direction: column;
	align-items:flex-start;
  }

  .section-image,
  .section-text {
    order: 0;
    width: 100%;
  }

  .header {
    min-height: 35vh;
  }

  .header-overlay {
    margin: 1.5rem;
	padding:1.2rem;
  }
 
  .header-overlay h1 {
    font-size: 1.4rem !important;
  }
  .site-header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .main-nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }
	.layout-image-left .section-image, .layout-image-right .section-image {
	  order: 0;
	}
	
	.layout-image-left .section-text, .layout-image-right .section-text {
	  order: 1;
	}
	
  #menu{max-width: calc(100% - 90px);
    margin-left: 90px;}
}

@media (max-width: 600px) {
  .site-header {
    justify-content: center;
  }

  .logo {
    width: 100%;
    text-align: center;
  }
  .header-overlay {
	padding:0.3rem;
  }
  .header-overlay h1 {
    font-size: 1rem !important;
  }

  .section-text h2 {
    font-size: 1.3rem;
  }

  .content-section {
    padding: 2rem 1rem;
  }
  #Universalis_day{display:none !important;}
}