/* styles.css */
:root {

  --brand:#c03b77; 		/* accent colour*/

  /* Page palette */
  --page-bg:     #000;      /* body background (#fff = white)   */
  --table-bg:    #ffe2e4;   /* pink panel in the centre         */
  --text-dark:   #51413c;   /* warm brown for serif text        */
  --text-general: #51413c;   /* warm brown for serif text        */

  /* Pill button palette */
  --btn-bg:      #ecc8ca;   	/* default pill background          */
  --btn-hover:   #d9b0b6;   	/* hover background                 */
  --btn-bg2line: #ebabac;   	/* default pill background for 2 line buttons */
  --btn-hover2line: #d9a0a8; 	/*hover background for 2 line buttons        */
  --btn-smalltext2line: #ffe2e4;  /*small text on a 2 line button          */
	}
html, body   {
	font-family:"Segoe UI", Arial, sans-serif; 
	margin:0; 	 		/* remove default body spacing       */
	background: var(--page-bg);	/* ← change variable at the top of page  */
	height: auto;			 
	min-height: 100dvh;     	/* allows content to grow but keeps full-screen structure*/
	display: flex;			/* flexbox lets us center the table  */
	flex-direction: column;     	/* stack header/banner, table, footer */
	align-items: center;		/* vertical centering                */
				/* removed justify-content so content starts at top and scrolls */
	}
.container {
  	display: flex;
	flex-direction: column;
  	align-items: center;
  	justify-content: center;	
  	width: 100%;
	max-width: 1090px;
	min-height: 100dvh;
	background: var(--table-bg); 
  	box-sizing: border-box;     /* keeps padding inside 1090px max */
	}

.my-text {
	max-width: 360px;
	overflow-wrap: break-word;
	margin: 0 auto 0;
	font-size: 1.1rem;		/* general text size */
	color: var(--text-general);	/* sample text colour  		*/
	margin-bottom: 1rem;
	padding: 0;
	}
/* any table with class="main-table" OR a bare table */
table	{
	width: 100%;	  		/* any width you need		*/	
	max-width: 1090px; 		/* optional cap so it doesn’t sprawl */
	min-height: 100dvh;		/* ensures at leat full viewport height */
	removed height: auto;	  	/* 100 % of the viewport height */
	color: var(--text-general);	/* sample text colour  		*/
	font-size: 1.2rem;		/* general text in table */
	border-collapse: collapse;
	}
td img {
  	display: block;
  	margin-bottom: 0px; 
  	padding: 0;
	}
main-table {
	width: 100%;	  		/* any width you need		*/
	max-width: 1090px; 		/* optional cap so it doesn’t sprawl */
	height: auto;		  	/* 100 % of the viewport height */
	color: #fff;	 		/* sample text colour  		*/
	border-collapse: collapse;
	}


/* -------------------------------------------------
   1.  Small–medium screens (≥600 px)
       – add a max-width cap so landscape phones /
         tablets don’t stretch too wide
--------------------------------------------------*/
@media (min-width: 600px) {
  .container {
    max-width: 500px;       /* your design width = match pill buttons */
    /*padding: 2rem;*/
  }
}

/* -------------------------------------------------
   2.  Desktops / large tablets (≥960 px)
       – grow the cap, but never wider than your
         original 1090 design
--------------------------------------------------*/
@media (min-width: 960px) {
  .container {
    max-width: 760px;       /* roomy on desktop, not wall-to-wall   */
  }
}

/* -------------------------------------------------
   3.  Super-wide screens (optional)
       – if you ever want the full 1090 back
--------------------------------------------------*/
@media (min-width: 1440px) {
  .container {
    max-width: 1090px;
  }
}




/* remove padding ONLY for the first table row (banner) */
.main-table tr:first-child td {
	padding: 0;
	}

/* make the banner image stretch edge-to-edge */
.main-table tr:first-child img {
  	display: block;   	/* kills tiny inline gaps */
  	width: 100%;      	/* fill the cell’s width */
  	height: auto;
	}
/* Center text horizontally and vertically inside every cell */
.main-table td, .main-table th {
	text-align: center;     /* horizontal centering */
  	rtical-align: middle;   /* vertical centering */
  	padding: 2 px;
  	vertical-align: top;
	}
.main-table img {
  	max-width: 100%;
  	height: auto;
  	display: block;
  	margin: 0 auto;
	margin-bottom: 0px;
	}

/* ─────────────────────────────
   LEGACY RECTANGULAR BUTTON
   (kept for pages already using .btn)
   ────────────────────────────*/
a.btn  {
	display:block; 
	padding:12px 20px; 
	margin:8px 0;
        background:var(--brand); 
 	color: var(--table-bg);
	text-align:center;
        text-decoration: none; 
	border-radius:6px;  
	transition: background 0.25s;
	}
a.btn:hover {
  	background: var(--table-bg);
  	color: var(--brand);
	}

/* ─────────────────────────────
   NEW PILL-SHAPED BUTTON
   (use <a class="btn-pill">…</a>)
   ────────────────────────────*/
a.btn-pill {
  	display: block;		/* fills the set width other options inline and inline-block*/
  	width: 340px;
	max-width: 90%;
	margin: 0 auto 0.5rem;	/* auto-center + 1rem bottom gap  */
  	padding: 0.5em 0.5em; 	/* vertical space, flat sides     */
  	background: var(--btn-bg);
  	color: var(--text-dark);
  	font-family: Georgia, serif;
  	font-size: 1.25rem;      /* 2.5 rem ≈ 40 px 	 	 */
  	line-height: 1.2;		/* ⬑ enough room if text wraps   */
	white-space: normal;
  	text-decoration: none;		/* allow wrapping (default, but explicit) */
  	border-radius: 30px;                /* 9999 perfect pill */
  	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) inset;
  	transition: background 0.25s, transform 0.15s;
}

/* optional: shrink font on very small phones so it wraps less */
@media (max-width: 380px) {
  a.btn-pill {
    font-size: 1rem;   
  }
}

a.btn-pill:hover, 
a.btn-pill:focus {
 		 background: var(--btn-hover);
		}

a.btn-pill:active {
  transform: scale(0.97);               /* little “press” effect */
}

/* ──────────────
  PILL WITH TWO LINES 
  ────────────── */
.btn-guide {
  /* pill shape */
  display: block;
  width: 340px; 
  max-width: 90%;
  margin: 0 auto 0.5rem;
  padding: 0.75em 0.5em 0.15em;              /* extra bottom room for sub-line */
  background: var(--btn-bg2line);        /* mid-pink you used in Photoshop */
  border-radius: 15px;
  text-decoration: none;
  text-align: center;
  color: #51413c;
  font-family: Georgia, serif;
  box-shadow: 0 0 0 2px rgba(0,0,0,.05) inset;
  transition: background .25s, transform .15s;
}
/* optional: shrink font on very small phones so it wraps less */
@media (max-width: 380px) {
  a.btn-guide {
    font-size: 1rem;   
  }
}

.btn-guide:hover,
.btn-guide:focus { 
		 background: var(--btn-hover2line); 
		}

.btn-guide:active { transform: scale(.97); }

/* main line */
.btn-guide .title {
  display: block;
  font-size: 1.35rem;      
  line-height: .75;
}

/* sub-line */
.btn-guide .sub {
  display: inline-flex;   /* keeps arrow + text on the same row */
  align-items: center;
  gap: .2em;
  font-size: 1.25rem;        /* small caption size */
  color: var(--btn-smalltext2line);         /* light caption text on 2nd line of button */
  margin-top: .04em;
}

/* arrow icon styling */
.btn-guide .arrow {
  font-size: 2.0rem;      /* a bit bigger than caption */
  color: var(--text-dark);         /* dark arrow */
  transform: translateY(-1px); /* optical centering */
}


/* ──────────────
default: show the images files at its natural dimensions 
────────────── */

.graphic-img {
  width: auto;          /* use intrinsic width */
  height: auto;         /* keep aspect ratio   */
  display: block;       /* kills the baseline gap            */
  margin: 0 auto;       /* center within its cell/container  */
}

/* when the viewport is narrow, scale down to 90 % */
@media (max-width: 600px) {
  .graphic-img {
    width: 70%;         /* 70 % of viewport or parent width  */
    max-width: 100%;    /* safety: never exceed parent       */
    height: auto;       /* keep aspect ratio                 */
  }
}

/* ──────────────
 headings and fonts   
────────────── */
h1, h2 {
	color:var(--brand);
	}

.intro-name {
	  font-family: Georgia, serif;
	  font-size: 2.75rem;
	  font-weight: normal;
	  margin: 0;	
	 padding: 0;
	  color: var(--text-dark);
}

/* ──────────────
  hand written style Google fonts 
  ────────────── */
.dancing-script-headers {
  	font-family: 'Dancing Script', cursive;
	 font-size: 3.75rem;
  	color: var(--text-dark);  
	margin-top: 0;
	margin-bottom: 0; 
	padding: 0;
	}

.ms-madi-regular {
	  font-family: "Ms Madi", cursive;
	 font-weight: 400;
	 font-style: normal;
	font-size:3.75rem;  
	color: var(--text-dark);
	 margin-top: 0;
	 margin-bottom: 0; 
	 padding: 0;
}

.hurricane-regular {
	 font-family: "Hurricane", cursive;
	 font-weight: 400;
	 font-style: normal;;
	font-size:3.75rem;  
	color: var(--text-dark);
	 margin-top: 0;
	 margin-bottom: 0; 
	 padding: 0;
}