@charset "utf-8";


/* CSS Document */
html, body {
  margin: 0;
  padding: 0;
}
/* Reset / base styles — good practice */
* {
  box-sizing: border-box;   /* Makes padding/margin behave predictably */
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;  /* Force no horizontal scroll */
}

/* ============================================= */
/* Mobile-friendly text wrapping - added Feb 2026 */
/* ============================================= */
/* Main container / body */
body {
  font-family: Georgia, "Times New Roman", Times, serif;
  max-width: 100%;          /* ← key change: no artificial cap */
  width: 100%;
  margin: 0;                /* ← remove centering gaps */
  padding: 0 10px;          /* keep side breathing if you like, or set to 0 */
  line-height: 1.6;
  color: #333;
  box-sizing: border-box;
  background-color: white;  /* or whatever your desired page bg is */
}

/* Apply the framed border to the main wrapper (#container) */
#container {
	width: 100%;		/* full width on small screens */
	max-width: 1200px;	/* or 1140px / 1280px — common choices */
	margin: 0 auto;		/* Centers it horizontally*/
	padding: 5px;	/* Inner space between border and content — reduce to 10px or 8px if still too much */
	box-sizing: border-box;
  overflow: visible !important;
  position: relative;
	background-color: white;        /* Solid background so gold shows clearly */

	/* Green lines with gold between via box-shadow (no border conflict) */
  box-shadow: 
    0 0 0 2px #006400,             /* Inner green line (dark green; change hex as needed) */
    0 0 0 6px #fbdbc9,                 /* Gold/yellow middle space — adjust width for thicker gold */
    0 0 0 8px #006400;              /* Outer green line (total border ~8px thick) */

  /* Reduce space between border and content */
  padding: 10px;                    /* Was probably larger before — try 15px or 10px for less space */
}

#content {
  background: url('../Assets/Web%20design/bg_beige001.jpg') repeat !important;
  background-size: auto 100% !important;
  background-position: center !important;
  color: #000 !important;
  padding: 20px;
  min-height: 400px;                    /* ensure it fills */
}

#footer {
  width: 100%;
  min-height: 100px;
  background: url('../Assets/Web%20design/Gray%20marble.jpg') repeat !important;
  background-size: auto 100% !important;
  background-position: center !important;
  color: #000 !important;
  padding: 20px 10px;
  text-align: center;
}

/*  Section to define styles   */

.indented-list {
  list-style-type: disc;          /* bullet style: disc, circle, square, etc. */
  margin-left: 50px;              /* controls the overall indentation from the left */
  padding-left: 30px;             /* extra space inside the list before bullets */
}

p {
  margin: 1em 0;
}

/*  Printing options to vary font appearance  */
/* Core typography utilities
/* Sizes (use rem for accessibility/responsiveness; base html { font-size: 100%; } or 16px) */
.text-14 { font-size: 0.875rem; }   /* ~14px */
.text-16 { font-size: 1rem; }       /* standard body */
.text-18 { font-size: 1.125rem; }   /* your old caption size */
.text-20 { font-size: 1.25rem; }
.text-24 { font-size: 1.5rem; }     /* common for subheadings */

/* Weights */
.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold    { font-weight: 700; }

/* Alignment & Positioning */
.text-left { text-align: left;}
.text-center { text-align: center;}
.text-right {text-align: right;}

/*Indentation using rem*/
.text-indent    { text-indent: 2rem; }      /* classic paragraph indent — better than margin-left */
.indent-50      { margin-left: 3.125rem; }  /* your original 50px ≈ 3.125rem at 16px base */
.indent-small   { margin-left: 1.5rem; }    /* lighter option for nested notes */

/* Styles */
.font-italic  { font-style: italic; }
.font-normal-style { font-style: normal; }  /* rarely needed, but useful for overrides */
.font-bold {font-weight: bold;}

/* Optional: semantic-ish combinations you use very frequently (but sparingly) */
.caption {
  font-size: 1.125rem;          /* .text-18 equivalent */
  font-style: italic;
  font-weight: 700;             /* or .font-normal if you define it */
  color: #555;                  /* if captions are usually gray, etc. */
  margin-top: 0.5rem;
  line-height: 1.4;             /* optional – improves readability */
  text-align: center;           /* optional – if most captions are centered */
}

/*indenting a quote*/
.quote,
.blockquote {
  margin: 1.5rem 3rem;          /* top/bottom 1.5rem, left/right 3rem ≈ 48px indent */
  font-style: italic;
  font-size: 1rem;              /* or .text-16 if you prefer explicit */
  color: #444;                  /* slightly darker gray – optional but nice */
  line-height: 1.5;
}

.text24 {
	font-size: 24px;
	font-style: italic;
	font-weight: bold;
}



.textbold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.quote {
	font-size: 16px;
	font-style: italic;
	padding-left: 20px;
	padding-right: 25px;
}



/* Text wrapping for better readability on phones */
p,
li,
td,
th {
	word-wrap: break-word;
	/* breaks long words if needed */
	overflow-wrap: break-word;
	/* modern/standard name - preferred */
	hyphens: auto;
	/* adds hyphens where appropriate (good for English) */
}

/* Make tables responsive on small screens */
table {
	width: 100%;		/* fills container */
	max-width: 100%;
	table-layout: auto;
	border-collapse: collapse;    /* clean look */
}

td, th {
	padding: 10px;
  	vertical-align: top;          /* aligns content nicely */
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Make ALL images responsive */
img {
  max-width: 100%;      /* Prevents overflow on mobile/small containers */
  height: auto;         /* Keeps perfect proportions — no squashing - preserves aspect ratio */
  display: block;       /* Removes unwanted space below images in some cases */
  margin: 0 auto;       /* Centers the image horizontally if it's narrower than its container - optopnal */
}

/* Make stamp layouts flexible and centered */
.stamp-layout {
  max-width: 100%;               /* won't overflow screen */
  margin: 1.5em auto;            /* centers the block + nice spacing */
}

/* Allow the figure to reach up to original image size */
.stamp-image {
  margin: 0 auto 1em auto;       /* typical spacing below image */
  text-align: center;            /* centers image if smaller */
  max-width: 706px;              /* cap at your largest stamp image size */
}

/* Let images be full size up to container limit, scale down on small screens */
.stamp-image img {
  max-width: 100%;               /* overrides global if parent is wide enough */
  height: auto;                  /* keeps perfect aspect ratio */
  display: block;
  margin: 0 auto;
}

    /* The css for images being displayed horizontally  */
.image-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;                     /* Space between images – adjust to 10–30px */
  justify-content: center;       /* Centers the pair */
  margin: 20px 0;
}

.image-pair figure,
.image-pair img {                /* Works with or without <figure> */
  flex: 0 1 300px;               /* Preferred width ~300px, can shrink but not grow beyond natural size */
  max-width: 300px;              /* Hard cap at 300px */
  text-align: center;
  margin: 0;
}

.image-pair img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.image-pair figcaption {
  margin-top: 8px;
  font-size: 0.95em;
  color: #555;
  line-height: 1.3;
}


/* Force side-by-side only when enough width exists (optional override) */
@media (min-width: 650px) {      /* ~300 + 300 + gap + some margin */
  .image-pair {
    flex-wrap: nowrap;           /* Prevent wrapping */
  }

/* Container for the pair — centers the whole thing */
.side-by-side-pair {
  display: flex;
  flex-wrap: wrap;              /* Allows stacking on small screens */
  justify-content: center;      /* Centers the pair horizontally */
  gap: 1.5rem;                  /* Space between images — try 1rem or 2rem */
  margin: 2em auto;             /* Vertical spacing + center on page */
  max-width: 1100px;            /* Prevents it from getting too wide on huge screens; adjust to taste */
}

/* Each image + caption block */
.pair-item {
  flex: 1 1 400px;              /* Grow/shrink, but don't get smaller than ~400px before stacking */
  max-width: 550px;             /* Optional cap per image — prevents one from dominating too much */
  text-align: center;           /* Centers caption under image */
}

.pair-item img {
  max-width: 100%;              /* Never overflow its container */
  height: auto;                 /* Keeps natural aspect ratio */
  display: block;
  margin: 0 auto;               /* Centers if narrower than container */
  box-shadow: 0 3px 10px rgba(0,0,0,0.15); /* Optional — subtle lift */
}

/* Caption styling (reuse your .caption class) */
.pair-item .caption {
  margin-top: 0.8em;
  font-size: 0.95em;
  color: #444;
  line-height: 1.4;
}

/* On small screens: stack vertically, full width each */
@media (max-width: 800px) {     /* Adjust breakpoint: 768px or 900px? Test on your phone */
  .side-by-side-pair {
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;                /* More vertical space when stacked */
  }
  
  .pair-item {
    max-width: 90%;             /* Or 100% if you want edge-to-edge on mobile */
  }
}

}

/* On very narrow phones: stack and center */
@media (max-width: 649px) {
  .image-pair {
    flex-direction: column;
    align-items: center;
  }
}

.dp-stack {
  display: flex;
  flex-direction: column;
  align-items: center;           /* Centers each figure block on the page */
  gap: 40px;                     /* Vertical space between the two image+caption pairs */
  margin: 20px 0;
}

.dp-item {
  width: 100%;
  max-width: 500px;              /* Matches your largest image; adjust if needed */
  text-align: left;              /* Ensures caption text is left-aligned */
  margin: 0;
}

.dp-item img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;                /* Centers image within its figure */
}

.dp-figcaption.caption {
  margin: 8px 0 0 0;             /* Small top gap, no bottom margin */
  padding: 0 10px;               /* Tiny side padding so text doesn't touch edges */
  font-size: 1em;                /* Or your preferred size — override 0.9em if needed */
  color: #444;
  line-height: 1.4;
  text-align: left;              /* Force left justification */
  width: 100%;                   /* Matches image container width */
  box-sizing: border-box;
}
/* Entries for a row of text then an image*/
.side-by-side {
    display: flex;
    flex-wrap: wrap;               /* still allows stacking on very narrow screens */
    gap: 30px;                     /* generous space between text & image */
    margin: 1.5em 0 2em 0;
    align-items: flex-start;       /* tops align even if heights differ */
    justify-content: flex-start;   /* prevent accidental centering */
}

.text-box {
    flex: 1 1 340px;               /* grow to fill space, base ~min 340px */
    min-width: 0;                  /* prevents overflow issues */
}

.image-box {
    flex: 0 1 360px;              /* image side doesn't grow much */
    text-align: center;           /* centers image inside its box if smaller */
}

.image-box img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ddd;        /* optional visual help during debugging */
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Force side-by-side down to ~phone landscape / small tablet */
@media (max-width: 820px) {
    .side-by-side {
        flex-direction: column;
        gap: 20px;
    }
    .image-box {
        max-width: 100%;           /* image can take full width when stacked */
    }
}

    .image-box {
        max-width: 100%;           /* image can take full width when stacked */
    }


/* Entries for 2 image and descriptions side by side */
.stamp-layout {
  display: flex;
  flex-wrap: wrap;          /* allows stacking on small screens */
  gap: 1.5rem;              /* modern replacement for cellpadding */
  align-items: flex-start;  /* keeps tops aligned even if text is longer */
  margin: 1.5rem 0;
}

.stamp-image {
  flex: 0 0 300px;          /* fixed width for image column, won't grow */
  max-width: 40%;           /* prevents it getting too wide on huge screens */
}

.stamp-description {
  flex: 1;                  /* takes remaining space */
  min-width: 0;             /* helps with long unbreakable content */
}

/* Optional: reverse image/text order (useful for alternating left/right) */
.stamp-layout.reverse {
  flex-direction: row-reverse;
}

/* Mobile-first responsive stacking */
@media (max-width: 700px) {   /* adjust breakpoint to taste */
  .stamp-layout,
  .stamp-layout.reverse {
    flex-direction: column;
  }
  
  .stamp-image {
    max-width: 100%;
    align-self: center;     /* centers image when stacked */
  }
}

/* Bonus: make images responsive */
.stamp-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* making a 2 column table  */

.printing-details-summary {
  max-width: 600px;           /* or whatever width looks good */
  margin: 0 auto;             /* centers the whole block */
  padding: 0 15px;            /* breathing room on mobile */
}

.printing-details-summary .row {
  display: flex;
  flex-wrap: wrap;            /* allows wrapping on very narrow screens */
  gap: 12px 20px;             /* row gap / column gap */
  margin-bottom: 8px;         /* space between rows */
  align-items: baseline;      /* nice vertical alignment */
}

.printing-details-summary dt {
  font-weight: bold;
  flex: 0 0 140px;            /* fixed width for terms – adjust as needed */
  /* or use: min-width: 130px; max-width: 160px; */
}

.printing-details-summary dd {
  flex: 1;                    /* takes remaining space */
  margin: 0;                  /* remove default margin */
}

.printing-details-summary .row dt,
.printing-details-summary .row dd {
  display: block;   /* ← overrides any list-item weirdness */
}

/* CSS for making tables */

.catalog-list {
  max-width: 900px;               /* Constrain overall width – adjust to taste */
  margin: 2rem auto;
  font-size: 1.05rem;
}

.catalog-list dl {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr minmax(180px, auto);  /* Date | Description | Reference */
  gap: 1rem 2rem;                 /* row gap | column gap */
  align-items: baseline;
  margin: 0;
}

.catalog-list dt {
  font-weight: bold;
  color: #006400;                 /* or your green theme color */
  padding-top: 0.5rem;
}

.catalog-list dd {
  margin: 0;
}

.catalog-list dd.reference {
  font-size: 0.95em;
  color: #555;
  font-style: italic;
}

.your-5col-table th, 
.your-5col-table td {
  padding: 8px 6px;            /* reduce padding on mobile */
  word-break: break-word;      /* ← prevents super-long words from overflowing */
}

/* or go nuclear on very small screens: */
@media (max-width: 640px) {
  .your-5col-table {
    display: block;
    overflow-x: auto;          /* horizontal scroll if really needed */
  }
}

/* Mobile: stack into single column */
@media (max-width: 768px) {
  .catalog-list dl {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .catalog-list dt {
    border-top: 1px solid #ddd;
    padding-top: 1rem;
  }

  .catalog-list dd.reference {
    margin-top: 0.3rem;
  }
}

.date-stamp-summary {
  max-width: 900px;
  margin: 2rem auto;
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(140px, auto) 1fr minmax(220px, auto);
  gap: 1rem 1.5rem;
}

.date-stamp-summary .header-row,
.date-stamp-summary .row {
  display: contents;
}

/* Header styling */
.date-stamp-summary .header-row > div {
  padding: 0.8rem;
  font-weight: bold;
  background: #f8f8f8;
  border-bottom: 2px solid #006400;
  text-align: left;
}

/* Data styling */
.date-stamp-summary dt,
.date-stamp-summary dd {
  padding: 0.6rem 0.8rem;
  margin: 0;
  border-bottom: 1px solid #eee;
}

.date-stamp-summary dt {
  font-weight: bold;
  color: #333;
}

.date-stamp-summary dd.reference {
  font-size: 0.95em;
  color: #555;
  font-style: italic;
}
/* End CSS for tables */

/* trial to look for size problem  */
.stamp-layout {
  width: auto;
  max-width: 100%;
  margin: 1.5em auto;
}

.stamp-image {
  max-width: 908px;   /* update to your biggest image width */
  margin: 0 auto 1em;
  text-align: center;
}

.stamp-image img {
  width: 100%;                   /* fill the available container width */
  max-width: 908px;              /* cap at your largest image width so desktop shows full detail */
  height: auto;                  /* ← this is the key: auto height = no distortion */
  display: