/* =========================
   Global styles
   ========================= */
body {
  font-family: "Times New Roman", Times, serif;
  margin: 0;
  padding: 0;

  background-color: #f4f6f8;                 /* fallback */
  background-image: url("RPM_LOGO_WM.jpg");  /* TILE IMAGE */
  background-repeat: repeat;                /* default, explicit */
  background-position: top left;
  background-attachment: scroll;             /* normal tiling */

  color: #222;
}



/* =========================
   Header (logo area)
   ========================= */
header {
  background-color: #ffffff;   /* WHITE background for logo */
  text-align: center;
  padding: 20px;
}

header h1 {
  margin: 0 0 10px 0;
  color: #1a3d6b;               /* Dark blue text */
}

header img {
  max-width: 600px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* =========================
   Navigation bar
   ========================= */
nav {
  background-color: #10263f;    /* Darker blue */
  text-align: center;
  padding: 10px 0;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  margin: 0 15px;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
}
/* =========================
   Dropdown / flyout menu
   ========================= */

nav.main-nav {
  /* keeps your centered look, but allows a positioned dropdown */
  position: relative;
}

/* =========================
   Dropdown / flyout menu
   ========================= */

nav.main-nav .dropdown {
  position: relative;
  display: inline-block;
}

/* Menu container */
nav.main-nav .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;

  min-width: 220px;
  padding: 6px 0;

  background-color: #10263f;     /* SAME as nav bar */
  border: 1px solid #0b1c30;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  z-index: 1000;
}

/* Dropdown links */
nav.main-nav .dropdown-menu a {
  display: block;
  margin: 0;                     /* override nav a margins */
  padding: 8px 14px;

  color: #ffffff;                /* same as nav links */
  font-weight: bold;
  text-decoration: none;
}

/* Hover state matches nav feel */
nav.main-nav .dropdown-menu a:hover {
  background-color: #1a3d6b;     /* lighter blue accent */
  text-decoration: none;
}

/* Show menu */
nav.main-nav .dropdown:hover .dropdown-menu,
nav.main-nav .dropdown:focus-within .dropdown-menu {
  display: block;
}


nav.main-nav .dropdown-menu a:hover {
  background: #eef3f8;
  text-decoration: none;   /* don’t underline in menu */
}

/* Show only on hover / keyboard focus */
nav.main-nav .dropdown:hover .dropdown-menu,
nav.main-nav .dropdown:focus-within .dropdown-menu {
  display: block;
}

/* =========================
   Hero sections
   ========================= */
.hero {
  background-color: #1a3d6b;    /* Main blue */
  color: #ffffff;
  padding: 40px 20px;
  text-align: center;
}

/* =========================
   Dual-column sections
   ========================= */
.dual-section {
  display: flex;
  gap: 30px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  flex-wrap: wrap;
}

.card {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 10px;
  flex: 1;
  min-width: 300px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  text-align: center;
}

.card {
  border: 1px solid rgba(0, 0, 0, 0.10);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  border-color: #cfd8e3;
}

.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

.card-link,
.card-link:hover,
.card-link:visited,
.card-link:active {
  color: inherit;
  text-decoration: none;
}

.dual-section .card ul {
  display: inline-block;   /* allows centering */
  text-align: left;        /* keeps bullets/text aligned */
  padding-left: 1.2em;     /* normal bullet indent */
  margin: 0 auto;          /* centers the whole list */
}

.card img {
  max-width: 200px;
  height: auto;
  border-radius: 6px;
  margin-bottom: 10px;
}

.product-card {
  text-align: center;
}

.product-image {
  max-width: 100%;
  max-height: 180px;
  display: block;
  margin: 0 auto 10px;
}

.list-with-image {
  display: flex;
  align-items: flex-start;    /* top-align list and image */
  justify-content: center;    /* center as a group */
  gap: 30px;                  /* space between list and image */
  margin: 20px auto 30px;
}

/* Keep your centered, aligned list behavior */
.list-with-image .centered-list {
  display: inline-block;
  text-align: left;
  padding-left: 1.2em;
  margin: 0;
}

/* Image sizing */
.list-image {
  max-width: 220px;           /* adjust as needed */
  height: auto;
}

.list-with-image {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;                 /* slightly tighter */
  margin: 20px auto 30px;

  max-width: 800px;          /* KEY FIX */
}

/* Center card titles on home page */
.card h2 {
  text-align: center;
}

.info-table th a {
  color: inherit;           /* same color as header text */
  text-decoration: none;
  display: inline-block;    /* improves click area */
}

/* Hover/focus behavior */
.info-table th a:hover,
.info-table th a:focus {
  text-decoration: underline;
}
/* Centered list, aligned bullets */
.hero .centered-list {
  display: inline-block;   /* allows centering */
  text-align: left;        /* keeps bullets/text aligned */
  padding-left: 1.2em;     /* normal bullet indent */
  margin: 20px auto;       /* centers the whole list */
}

.hero .centered-list li {
  margin-bottom: 0.4em;
}

/* Two-column table with full cell borders */
.info-table {
  table-layout: auto;
  border-collapse: collapse;
  margin: 20px auto;
  text-align: left;
}

.info-table th,
.info-table td {
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  vertical-align: top;     /* looks better when wrapping */
}

/* 3-column table based on existing info-table */
.info-table-3 {
  table-layout: auto;
  border-collapse: collapse;
  margin: 20px auto;
  text-align: left;
}

/* Same cell styling as 2-column table */
.info-table-3 th,
.info-table-3 td {
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  vertical-align: top;
}

/* Column 1: header/label column */
.info-table-3 th {
  font-weight: 600;
  white-space: nowrap;   /* matches your 2-column behavior */
  background-color: rgba(0, 0, 0, 0.05);
}

/* Column 2 & 3: allow wrapping */
.info-table-3 td {
  white-space: normal;
}



/* =========================
   Links (email & phone)
   ========================= */
a {
  color: #ffd966;               /* High-contrast gold */
}

a:hover {
  color: #ffffff;
}

/* =========================
   Contact info formatting
   ========================= */
.hero .contact-info {
  max-width: 600px;             /* centered block */
  margin: 0 auto;
  text-align: left;             /* LEFT-aligned text */
}

.hero .contact-info p {
  margin: 18px 0;               /* spacing between lines */
}

/* =========================
   Footer
   ========================= */
footer {
  background-color: #10263f;
  color: #ffffff;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}

/* =========================
   Responsive layout
   ========================= */
@media (max-width: 768px) {
  .dual-section {
    flex-direction: column;
  }
}

/* Base button style */
/* Centered link button */
.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #1e73be;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;

    /* centering */
    margin: 20px auto;
    display: block;
    width: fit-content;
}

/* Hover effect */
.btn:hover {
    background-color: #155a96;
}
/* Compact buttons inside tables */
.info-table a.btn,
.info-table-3 a.btn {
  display: inline-block;
  margin: 0;
  padding: 6px 12px;
  font-size: 14px;
  white-space: nowrap;
}

/* Hover flyout on lists */
.flyout-list li {
  position: relative;
  margin-bottom: 12px;
}

.flyout-list .flyout {
  position: absolute;
  left: 110%;
  top: 0;

  background: #f4f6f8;
  border: 1px solid #ccc;
  padding: 12px;
  width: 280px;

  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 10;

  display: block;          /* important: prevents inline behavior */
  pointer-events: none;    /* keeps hover from “fighting” */
}

.flyout-list li:hover .flyout {
  opacity: 1;
  transform: translateX(0);
}



/* FORCE high-contrast hover inside dropdown */
nav.main-nav .dropdown-menu > a:hover,
nav.main-nav .dropdown-menu > a:focus {
  background-color: #17385f !important;  /* darker hover */
  color: #ffffff !important;             /* keep white */
  text-decoration: none !important;
}


}