/* RD Gateway guide — page styles */

/* --- Links ------------------------------------------------ */
.rdgw-content a { color: var(--link-color); text-decoration: underline; text-underline-offset: var(--mu-text-underline-offset); }
.rdgw-content a:visited { color: var(--link-color-visited); }
.rdgw-content a:hover { color: var(--link-color-hover); }
.rdgw-content a:focus, .rdgw-content a:active { color: var(--link-color-active-focus); }

/* --- Template resets ------------------------------------- */
html { box-sizing: revert; }

body {
   font-size: 13px;
   font-family: Arial, sans-serif;
   font-weight: revert;
   line-height: 1.4;
}

h1, h2, h3, h4, h5, h6 { font: revert; }

p {
   line-height: 1.6em;
   margin: 0.5em 0 1em;
   padding: 0.2em 0 0;
}

b, strong { font-weight: revert; }

ul, ol { padding: revert; list-style: revert; }


.u-grid-standard { grid-template-columns: revert; }

/* --- Content layout --------------------------------------- */
.rdgw-content {
   /* Match Massey website link colours */
   --link-color: var(--color-mu-blue);
   --link-color-hover: var(--color-black);
   --link-color-visited: var(--color-mu-poroporo);
   --link-color-active-focus: var(--color-mu-light-blue);
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
   padding: 0;
}

/* --- Sections --------------------------------------------- */
.rdgw-section {
   margin-bottom: 2.5rem;
}

.rdgw-section:last-child {
   margin-bottom: 0;
}

.rdgw-section + .rdgw-section {
   border-top: 1px solid #D5DCE5;
   padding-top: 2rem;
}

.rdgw-section__title {
   font-size: 1.25rem;
   font-weight: 700;
   color: var(--color-mu-dark-blue);
   margin-bottom: 1.2rem;
   display: flex;
   align-items: center;
   gap: 0.6rem;
}

/* Gold left-bar accent */
.rdgw-section__title::before {
   content: '';
   display: inline-block;
   width: 4px;
   height: 1.2em;
   background: var(--color-mu-gold);
   border-radius: 2px;
   flex-shrink: 0;
}

.rdgw-sub-heading {
   font-size: 1rem;
   font-weight: 700;
   color: var(--color-mu-dark-blue);
   margin: 1.4rem 0 0.7rem;
}

/* --- OS toggle -------------------------------------------- */
.rdgw-os-toggle {
   background: #fff;
   border: 1px solid #D5DCE5;
   border-radius: 3px;
   padding: 0.85rem 1rem;
   margin-bottom: 1.4rem;
   display: flex;
   align-items: center;
   gap: 1rem;
   flex-wrap: wrap;
}

.rdgw-os-toggle__label {
   font-size: 0.875rem;
   color: #5A6472;
   flex-shrink: 0;
}

.rdgw-btn-group {
   display: flex;
   gap: 0.4rem;
}

.rdgw-btn-os {
   padding: 0.4rem 1rem;
   border-radius: 3px;
   border: 2px solid var(--color-mu-blue);
   background: #fff;
   color: var(--color-mu-blue);
   font-size: 0.9rem;
   font-weight: 600;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   transition: background 0.1s, color 0.1s;
}

.rdgw-btn-os:hover { background: #F2F6F9; }

.rdgw-btn-os.active {
   background: var(--color-mu-blue);
   color: #fff;
}

.rdgw-os-panel { display: none; }
.rdgw-os-panel.active { display: block; }

/* --- Numbered steps --------------------------------------- */
.rdgw-steps {
   list-style: none;
   counter-reset: step-counter;
   margin: 0;
   padding: 0;
}

.rdgw-steps > li {
   counter-increment: step-counter;
   display: flex;
   gap: 1rem;
   margin-bottom: 1rem;
   align-items: flex-start;
}

.rdgw-steps > li::before {
   content: counter(step-counter);
   min-width: 2rem;
   height: 2rem;
   background: var(--color-mu-blue);
   color: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.82rem;
   font-weight: 700;
   flex-shrink: 0;
   margin-top: 0.15rem;
}

.rdgw-steps > li > p { padding-top: 0.2rem; margin: 0; }

/* Sub-list bullets — small gold squares */
.rdgw-steps li ul {
   list-style: none;
   padding: 0;
}

.rdgw-steps li ul li {
   position: relative;
   padding-left: 1.1rem;
}

.rdgw-steps li ul li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0.55em;
   width: 5px;
   height: 5px;
   background: var(--color-mu-gold);
   border-radius: 1px;
}

/* Inline code */
.rdgw-steps code, .rdgw-content p code {
   background: #EEF2F7;
   border: 1px solid #C5D0DE;
   border-radius: 3px;
   padding: 0.1em 0.4em;
   font-family: Consolas, 'Courier New', monospace;
   font-size: 0.88em;
   color: var(--color-mu-dark-blue);
}

/* --- Standalone bullet lists ------------------------------ */
.rdgw-list {
   list-style: none;
   margin: 0.75rem 0 0.75rem 1.5rem;
   padding: 0;
   line-height: 1.8;
}

.rdgw-list > li {
   position: relative;
   padding-left: 1.1rem;
}

.rdgw-list > li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0.55em;
   width: 5px;
   height: 5px;
   background: var(--color-mu-gold);
   border-radius: 1px;
}

/* --- Callouts --------------------------------------------- */
.rdgw-callout {
   border-left: 4px solid var(--color-mu-gold);
   background: var(--color-mu-gold-tint);
   padding: 0.8rem 1rem;
   border-radius: 0 3px 3px 0;
   margin: 1rem 0;
   font-size: 0.93rem;
}

.rdgw-callout--warning {
   border-left-color: var(--color-mu-volcano);
   background: var(--color-mu-volcano-tint);
}

.rdgw-callout__title {
   font-weight: 700;
   font-size: 0.78rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   margin-bottom: 0.3rem;
   color: var(--color-mu-dark-blue);
}

.rdgw-callout--warning .rdgw-callout__title { color: var(--color-mu-volcano); }

/* --- Primary button --------------------------------------- */
.rdgw-btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   background: var(--color-mu-blue);
   color: #fff;
   padding: 0.65rem 1.4rem;
   border-radius: 3px;
   text-decoration: none;
   font-weight: 600;
   font-size: 0.93rem;
   transition: background 0.12s;
   margin-top: 1rem;
}

.rdgw-btn-primary:hover {
   background: var(--color-mu-dark-blue);
   color: #fff;
   text-decoration: none;
}

/* --- Contact cards ---------------------------------------- */
.rdgw-contact-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
   gap: 1rem;
   margin-top: 1rem;
}

.rdgw-contact-card {
   background: #fff;
   border: 1px solid #D5DCE5;
   border-radius: 3px;
   padding: 1.2rem;
   box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.rdgw-contact-card__icon {
   font-size: 1.3rem;
   margin-bottom: 0.4rem;
   line-height: 1;
}

.rdgw-contact-card__title {
   font-weight: 700;
   color: var(--color-mu-dark-blue);
   margin-bottom: 0.35rem;
   font-size: 0.93rem;
}

.rdgw-contact-card__body {
   font-size: 0.86rem;
   color: #5A6472;
   line-height: 1.7;
}

.rdgw-contact-card__hours {
   margin-top: 0.6rem;
   padding-top: 0.6rem;
   border-top: 1px solid #D5DCE5;
   font-size: 0.78rem;
   color: #5A6472;
}

/* --- RemoteApp notice bar --------------------------------- */
.rdgw-notice-bar {
   background: var(--color-mu-light-blue);
   color: #fff;
   text-align: center;
   padding: 0.6rem 1.5rem;
   font-size: 0.88rem;
}

.rdgw-notice-bar a {
   color: #fff;
   font-weight: 600;
   text-decoration: underline;
}

.rdgw-notice-bar a:hover {
   text-decoration: underline;
}

/* --- Header ----------------------------------------------- */
.main-nav-desktop { display: block; }

.main-nav-desktop__grid { padding-bottom: 1.5rem; }

/* --- Screenshot toggles ----------------------------------- */
.rdgw-screenshot-toggle {
   margin-top: 0.6rem;
}

.rdgw-screenshot-toggle summary {
   display: inline-flex;
   align-items: center;
   gap: 0.3rem;
   font-size: 0.85rem;
   color: var(--color-mu-blue);
   cursor: pointer;
   user-select: none;
}

.rdgw-screenshot-toggle summary:hover {
   text-decoration: underline;
}

.rdgw-screenshot-toggle img {
   display: block;
   max-width: 100%;
   height: auto;
   margin-top: 0.6rem;
   border: 1px solid #D5DCE5;
   border-radius: 3px;
}

/* --- Responsive ------------------------------------------- */
@media (max-width: 580px) {
   .rdgw-os-toggle { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
   .rdgw-hero { padding: 1.75rem 1rem; }
}