/*
 * STC portals, classic pages (student, ICT and admin areas built from tables and <font> tags): a modern skin.
 * Style only; linked from the shared portal headers. Colours and fonts follow the main site and css/portal.css.
 */
@import url("../assets/css/site-fonts.css");

:root {
  --stc-green: #17803d;
  --stc-green-deep: #0f5a2e;
  --stc-green-dark: #0b3a20;
  --stc-green-tint: #e8f3ec;
  --stc-bg: #f3f5f2;
  --stc-ink: #142019;
  --stc-text: #4d5a53;
  --stc-line: #dfe6e1;
  --stc-shadow: 0 1px 2px rgba(20, 32, 25, .04), 0 10px 30px rgba(20, 32, 25, .08);
}

html, body { background: var(--stc-bg) !important; }
body {
  margin: 0; padding: 28px 16px 56px; font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; font-size: 15px;
  line-height: 1.6; color: var(--stc-text); -webkit-font-smoothing: antialiased;
}
font { font-family: inherit !important; }
h1, h2, h3, h4 { font-family: 'Yantramanav', 'Roboto', sans-serif; color: var(--stc-ink); font-weight: 700; line-height: 1.25; }
h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 20px; }
a { color: var(--stc-green); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--stc-green-deep) !important; font-size: inherit !important; }

/* The page card */
#wrap {
  width: auto !important; max-width: 1040px; margin: 0 auto !important; overflow: hidden;
  background: #fff !important; border: 1px solid var(--stc-line); border-radius: 22px !important;
  box-shadow: var(--stc-shadow) !important; padding-bottom: 32px;
}
#wrap > table:first-of-type { width: 100%; border-collapse: collapse; }

/* Banner row: crest, motto strip, St Teresa picture */
#wrap td[bgcolor="green"], #wrap td[bgcolor="GREEN"] { background: var(--stc-green-deep) !important; }
#wrap td[bgcolor="green"] font, #wrap td[bgcolor="green"] i, #wrap td[bgcolor="green"] b { color: #fff !important; }
#wrap td[bgcolor="green"] font[size="7"] { font-size: 26px !important; letter-spacing: 6px; }
#wrap td[bgcolor="green"] font[size="+2"] { font-size: 16px !important; letter-spacing: .5px; opacity: .9; }
#wrap > table:first-of-type td:first-child img, #wrap > table:first-of-type td:last-child img {
  display: block; width: 100%; max-width: 180px; height: 83px; object-fit: cover;
}

/* Menu bar (a green table of links) */
#wrap table[bgcolor="green"], #wrap table[bgcolor="GREEN"] {
  width: 100%; height: auto !important; border-collapse: collapse; background: var(--stc-green-dark) !important;
}
#wrap table[bgcolor="green"] td { padding: 0; text-align: center; }
#wrap table[bgcolor="green"] td a {
  display: block; padding: 15px 8px; color: rgba(255, 255, 255, .85) !important; font-size: 13px; font-weight: 600;
  letter-spacing: .6px; text-decoration: none;
}
#wrap table[bgcolor="green"] td a font { color: inherit !important; }
#wrap table[bgcolor="green"] td a:hover { background: rgba(255, 255, 255, .08); color: #fff !important; }

/* Page body: headings and forms below the header */
center { display: block; max-width: 1040px; margin: 0 auto; }
body > center, #wrap ~ center { padding: 36px 24px 8px; }
form[name="open"], form[name="login"] {
  display: block; max-width: 460px; margin: 18px auto 0; padding: 28px 28px 12px; text-align: left;
  background: #fff; border: 1px solid var(--stc-line); border-radius: 20px; box-shadow: var(--stc-shadow);
}
form[name="open"] table, form[name="login"] table { width: 100%; }
form[name="open"] h1, form[name="login"] h1 { margin: 0 0 4px; text-align: center; }
form[name="open"] br, form[name="login"] br { content: ""; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="tel"], select, textarea {
  display: block; box-sizing: border-box; width: 100%; height: 48px; margin: 8px 0 4px; padding: 10px 14px;
  border: 1px solid #cfd8d2; border-radius: 12px; background: #fff; color: var(--stc-ink);
  font-family: inherit; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease;
}
#wrap table[bgcolor] input, td input[type="checkbox"], td input[type="radio"] { display: inline-block; width: auto; }
textarea { height: auto; min-height: 120px; }
input:focus, select:focus, textarea:focus { border-color: var(--stc-green); box-shadow: 0 0 0 4px rgba(23, 128, 61, .14); outline: 0; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--stc-green); vertical-align: middle; }
input[type="file"] { padding: 10px; border: 1px dashed #cfd8d2; border-radius: 12px; background: var(--stc-bg); }

input[type="submit"], input[type="button"], button, .btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin: 12px 0; padding: 0 28px;
  border: 0; border-radius: 12px; background: var(--stc-green) !important; color: #fff !important; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: .3px; box-shadow: 0 6px 16px rgba(23, 128, 61, .22);
  transition: background-color .15s ease, transform .15s ease;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover, .btn:hover { background: var(--stc-green-deep) !important; transform: translateY(-1px); }
form[name="open"] input[type="submit"], form[name="login"] input[type="submit"] { width: 100%; }

/* Data tables in the admin areas */
table[border], table.table { border-collapse: separate !important; border-spacing: 0; border: 1px solid var(--stc-line) !important; border-radius: 14px; overflow: hidden; background: #fff; }
table[border] th, table.table th { padding: 11px 12px; background: var(--stc-green-tint); color: var(--stc-green-deep); font-weight: 700; border: 0 !important; border-bottom: 1px solid var(--stc-line) !important; }
table[border] td, table.table td { padding: 10px 12px; border: 0 !important; border-top: 1px solid var(--stc-line) !important; color: var(--stc-ink); }
table[border] tr:hover td { background: #f7faf8; }

img { max-width: 100%; height: auto; }

/* Old public STOBA article pages use a fixed-width inline-styled content block. */
body > div[style*="padding-left:100px" i] {
  box-sizing: border-box; width: min(100% - 32px, 1120px) !important; max-width: 1120px; height: auto !important;
  margin: 28px auto 48px !important; padding: 30px 34px !important; overflow: auto; text-align: left;
  color: var(--stc-text) !important; background: #fff !important; border: 1px solid var(--stc-line); border-radius: 20px;
  box-shadow: var(--stc-shadow);
}
body > div[style*="padding-left:100px" i] img {
  float: left; width: min(46%, 500px) !important; height: auto !important; margin: 0 30px 20px 0 !important;
  border-radius: 14px; box-shadow: var(--stc-shadow) !important;
}

/* Phones */
@media (max-width: 767px) {
  body { padding: 12px 10px 40px; }
  #wrap { border-radius: 16px !important; }
  #wrap > table:first-of-type td:first-child, #wrap > table:first-of-type td:last-child { display: none; }
  #wrap table[bgcolor="green"] tr, #wrap table[bgcolor="green"] tbody { display: flex; flex-wrap: wrap; }
  #wrap table[bgcolor="green"] td { flex: 1 1 33%; }
  #wrap table[bgcolor="green"] td a { padding: 12px 6px; font-size: 12px; }
  form[name="open"], form[name="login"] { padding: 22px 18px 8px; }
  body > div[style*="padding-left:100px" i] { width: calc(100% - 20px) !important; margin: 18px auto 32px !important; padding: 20px !important; }
  body > div[style*="padding-left:100px" i] img { float: none; display: block; width: 100% !important; max-width: 500px; margin: 0 auto 20px !important; }
}

/* ---------------------------------------------------------------- old <font> colours and leftovers (from the page audit) */
font[color="blue" i], font[color="#0000ff" i], #wrap font[color="green" i] { color: var(--stc-green) !important; }
font[color="red" i], font[color="#ff0000" i] { color: #b42318 !important; }
td:not([bgcolor]) font[color="white" i], center > font[color="white" i] { color: inherit !important; }
img[src=""], img:not([src]) { display: none; }
fieldset { border: 1px solid var(--stc-line); border-radius: 14px; padding: 18px 20px; }
legend { width: auto; padding: 0 8px; border: 0; font-weight: 700; color: var(--stc-ink); }
a[style*="color:blue" i], a[style*="color: blue" i], a[style*="color:#0000ff" i] { color: var(--stc-green) !important; }
/* pages/title_house.php: content in a padded div outside the card */
body > div[style*="padding-left:100px" i] {
  max-width: 1040px; margin: 24px auto; background: #fff; border: 1px solid var(--stc-line); border-radius: 22px;
  box-shadow: var(--stc-shadow); padding: 28px 32px !important; overflow: hidden;
}
hr[color] { border: 0; border-top: 1px solid var(--stc-line); }
body > a { color: var(--stc-green) !important; }