/* 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: fixed !important;
  top: 0;
  z-index: 100;
  width:100%;
}
#parish_Main{margin-top:91px;}
.logo {
  font-weight: 700;
  font-size: 1.25rem;
  margin-left:75px;
}
.logo a{text-decoration:none;cursor:pointer;}
#DioceseCrest{position:absolute;top:0px;left:5px;z-index:100;width:70px;height:100px;background-repeat:no-repeat;background-position:center;background-size:contain;}

.main-nav ul, #sectionmenu {
  list-style: none;
  display: flex;
  gap: 0.6rem;
}

#sectionmenu{justify-content: center;    position: sticky;
    top: 95px;
    background-color: #f5f5f7dd;
	backdrop-filter: blur(6px);
	z-index:99;}

.main-nav a, #sectionmenu a {
  text-decoration: none;
  font-size: 0.95rem;
}
.backToTop{cursor:pointer;opacity:0.5;transition:0.3s;}
.backToTop:hover{opacity:0.8;}
.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 */

:root{--HeaderMinHeight:40vh;}

.header {
  position: relative;
  min-height: var(--HeaderMinHeight);
  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;
}
.backToTopDiv{float:right;}
.backToTop{text-decoration:none;}
/* 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, .editableSnippet {
  position: relative;              /* needed for the tab positioning */
  padding:12px;
  border: 1px solid #AAAAAA33;   /* baseline so layout doesn't jump */
  transition: border-color 0.15s ease;
  cursor:pointer;
}

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

/* "Edit" tab */
.editable::after, .editableSection::after, .editablePage::after, .editableSnippet::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;
}

.editableSection::after {
  content: "edit section";
}

.editableSection.header::after {
  content: "edit header";
}
.editableSection.site-header::after {
  content: "edit menu";
}

.editableSnippet::after {
  content: "edit snippet settings";
 }
.editable.section-image::after{
  content: "edit image";
}
.editable.section-Title::after{
  content: "edit title";
}
.editable.section-Body::after{
  content: "edit text";
}
.editablePage::after {
  content: "edit page";
  top: -2px;
  z-index:100;
  position:fixed;
}
.editTextLower::after{ top:-2px;}

/* Show tab on hover */
.editable:hover::after, .editableSnippet:hover::after, .editableSection:hover:not(:has(.editable:hover, .editableSnippet: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;}

.OutOfDate, .ConfirmInfo, .NoInfo {
  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: #FFAAFF;
  opacity:0.5;
}
.OutOfDate::before,.ConfirmInfo::before,.NoInfo::before {
  content: "Not Currently Showing - Out of Date";
  position: absolute;
  top: -13px;
  left: 10px;
  padding: 2px 8px;
  font-size: 11px;
  background: #FFAAFF;
  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;
}
.ConfirmInfo::before {
  content: "Not Currently Showing - Information needs Confirming";
}
.NoInfo::before {
  content: "Not Currently Showing - No Information";
}
.OutOfDate:hover::before, .ConfirmInfo:hover::before, .NoInfo:hover::before {opacity:0;}

.unpublished{opacity:0.5;}
  .deletePageDiv{width:16px;height:16px;display:inline-block;border-radius:8px;font-weight:bold;line-height:12px;text-align:center;font-size:14px;background-color:#DD0000;color:#FFFFFF;cursor:pointer;margin:0 0 0 2px;transition:0.3s;}
  .deletePageDiv:hover{background-color:#FF0000;}
/* 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, #sectionmenu {
    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% - 75px);
    margin-left: 75px;}
}

@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;}
}